前言

使用百度貼吧客戶端的時(shí)候發(fā)發(fā)現(xiàn)加載的小動(dòng)畫挺有意思的，于是自己動(dòng)手寫寫看。想學(xué)習(xí)自定義View以及自定義動(dòng)畫的小伙伴一定不要錯(cuò)過(guò)哦。?
　　讀者朋友需要有最基本的canvas繪圖功底，比如畫筆Paint的簡(jiǎn)單使用、Path如何畫直線等簡(jiǎn)單的操作，不熟悉也沒(méi)關(guān)系，下文帶大家擼代碼的時(shí)候會(huì)簡(jiǎn)單的講一下。?
　　此篇文章用到如下知識(shí)點(diǎn)：

　　1）、自定義View的測(cè)量?
　　2）、自定義View屬性的自定義及使用?
　　3）、Path繪制貝塞爾曲線?
　　4）、Canvas的裁剪?
　　5）、用ValueAnimator控制動(dòng)畫?
　　6）、Canvas文字居中

　　好了，開(kāi)始正文！

一、準(zhǔn)備工作 1、效果圖

2、動(dòng)畫拆解

　　直觀的看我們要實(shí)現(xiàn)三個(gè)方面?
　　1）、波浪動(dòng)畫（藍(lán)色部分）?
　　2）、不規(guī)則的文字（白色的半個(gè)“貼”字）?
　　3）、控件顯示部分限制成圓形?
　　

3、技術(shù)分析

　　1）、波浪動(dòng)畫?
　　要實(shí)現(xiàn)波浪動(dòng)畫，首先要繪制出波浪的形狀，其次再讓他動(dòng)起來(lái)。波浪線看起來(lái)有點(diǎn)像是正弦或者余弦函數(shù)，但是Android的Path并沒(méi)有提供繪制正余弦圖形的函數(shù)，但是提供了一個(gè)功能更強(qiáng)大的曲線——貝塞爾曲線，貝塞爾曲線分為二階、三階及多階，本案例里使用的是二次貝塞爾曲線，如下圖所示，二階貝塞爾曲線需要三個(gè)點(diǎn)才可以確定

　?
我們來(lái)看一下Android里貝塞爾曲線的源碼：

/*?@param?x1?The?x-coordinate?of?the?control?point?on?a?quadratic?curve
?????*?@param?y1?The?y-coordinate?of?the?control?point?on?a?quadratic?curve
?????*?@param?x2?The?x-coordinate?of?the?end??on?a?quadratic?curve
?????*?@param?y2?The?y-coordinate?of?the?end?point?on?a?quadratic?curve
?????*/
????public?void?quadTo(float?x1,?float?y1,?float?x2,?float?y2)?{
????????isSimplePath?=?false;
????????native_quadTo(mNativePath,?x1,?y1,?x2,?y2);
????}

由注解可以看出來(lái)quadTo(float x1, float y1, float x2, float y2)的四個(gè)參數(shù)分別是控制點(diǎn)的x,y坐標(biāo)，結(jié)束點(diǎn)的x,y坐標(biāo)，少了一個(gè)開(kāi)始點(diǎn)呀！不要著急，開(kāi)始點(diǎn)是Path路徑的上一次結(jié)束的點(diǎn)，如果你的Path沒(méi)有繪制過(guò)路徑，那么Path的最后一個(gè)點(diǎn)坐標(biāo)就是（0,0）如果想自己定義起始點(diǎn)位置，就用Path.moveTo(float x, float y)即可。?
但是每次都需要指定具體的控制點(diǎn)和結(jié)束點(diǎn)既麻煩又容易出錯(cuò)，那么就需要rQuadTo(float dx1, float dy1, float dx2, float dy2)出馬了，rQuadTo跟quadTo的區(qū)別在于rQuadTo使用的是相對(duì)起始點(diǎn)的坐標(biāo)，而不是具體的坐標(biāo)點(diǎn)，舉個(gè)例子，如下代碼效果等價(jià)：

?//使用quadTo
????Path?path=new?Path();
????path.moveTo(100,100);
????path.quadTo(150,0,200,100);

????//使用rQuadTo
????Path?path=new?Path();
????path.moveTo(100,100);
????path.rQuadTo(50,-100,100,0)

此時(shí)畫筆最后的落點(diǎn)都為（200,100）。?
　　畫波浪線的技術(shù)難點(diǎn)解決了那么如何讓波浪動(dòng)起來(lái)呢，想動(dòng)起來(lái)肯定需要波浪在水平方向移動(dòng)，那么我們需要畫一個(gè)很長(zhǎng)很長(zhǎng)的波浪讓他移動(dòng)，這樣就實(shí)現(xiàn)了上下起伏效果，但是這樣需要畫無(wú)數(shù)多條貝塞爾曲線，肯定不行，這時(shí)就用到萬(wàn)能的數(shù)學(xué)理論——周期函數(shù)了，如果我們繪制兩個(gè)周期的貝塞爾曲線，每次只讓它顯示一個(gè)周期，然后等第二周期顯示結(jié)束的時(shí)候再?gòu)念^開(kāi)始，這樣就造成了無(wú)限周期的假象，如下圖?
　　初始位置為1，向右前進(jìn)，當(dāng)走到2位置的時(shí)候重置成3的位置，即1原始的位置，如此往復(fù)就成了綿綿不絕的波浪了?
　?
　　做成效果如下：黃色區(qū)域就是要顯示的區(qū)域，藍(lán)色豎線是波浪線兩個(gè)周期的總長(zhǎng)度?
　　

2）、不規(guī)則的文字

我們可以看到圓球里的“貼”字在波浪區(qū)域顯示的是白色，波浪區(qū)域之外顯示的是藍(lán)色，Android并不支持給文字部分區(qū)域著色的功能，那么我們只能靠控制顯示區(qū)域讓文字只顯示特定形狀，強(qiáng)大的Canvas正好有畫布裁剪功能，通過(guò)裁剪畫布就能控制繪制區(qū)域，畫布的裁剪可以用Canvas.clipPath(Path path)實(shí)現(xiàn)，傳入一個(gè)閉合的Path既可以隨心所欲裁剪畫布，裁剪示意圖如下?
?
利用波浪形閉合路徑講畫布裁剪成波浪形，那么在此接下來(lái)的Canvas繪制操的內(nèi)容只能在這個(gè)波浪形區(qū)域里顯示，這樣就解決了文字的部分區(qū)域顯示問(wèn)題。那么接下來(lái)我們只用在相同位置繪制相同字體、字號(hào)不同色的文字即可實(shí)現(xiàn)一個(gè)文字顯示兩種顏色了（注意：實(shí)際操作的時(shí)候，被裁剪的文字要蓋在未被裁減的文字的上邊，即先在畫布裁剪之前繪制藍(lán)色的“貼”字，然后再裁剪畫布再在裁剪后的畫布上繪制白色的“貼”）

3）、控件顯示部分限制成圓形

經(jīng)過(guò)2）的分析，將顯示部分限制在圓形區(qū)域里不是易如反掌嗎，使用一個(gè)圓形的Path裁剪畫布即可。感興趣的同學(xué)也可以嘗試BitmapShader或者Xfermode來(lái)將顯示區(qū)域變成圓形

好了，最主要的步驟都分析完了，上一張圖更直觀地展示一下繪制流程?
?
圖中可以看出波浪形的閉合Path有兩個(gè)作用，一個(gè)是負(fù)責(zé)裁剪畫布，一個(gè)是負(fù)責(zé)繪制藍(lán)色，其實(shí)只用第一個(gè)功能即可，此處只是方便分解步驟。

二、代碼實(shí)現(xiàn)
既然是自定義控件，那就要有通用性比如下邊的效果：?
?
loading小球需文字和顏色都可以改變，所以我們要給自己的控件添加這兩個(gè)屬性。首先在“res/values/”路徑下新建一個(gè)attrs.xml文件，在里邊定義如下屬性：

接下來(lái)開(kāi)始自定義View?
　　復(fù)寫三個(gè)構(gòu)造函數(shù)，將單參數(shù)和雙參數(shù)的構(gòu)造函數(shù)的super方法都改為this，保證無(wú)論調(diào)用哪個(gè)構(gòu)造方法都會(huì)跳到三個(gè)參數(shù)的構(gòu)造方法中，這樣就可以偷懶只用在三個(gè)參數(shù)的構(gòu)造方法里初始化各種參數(shù)了

public?class?Wave?extends?View?{
????public?Wave(Context?context)?{
????????this(context,null);
????}

????public?Wave(Context?context,?AttributeSet?attrs)?{
????????this(context,?attrs,0);
????}

????public?Wave(Context?context,?AttributeSet?attrs,?int?defStyleAttr)?{
????????super(context,?attrs,?defStyleAttr);
????????//初始化參數(shù)
????????init(context,attrs);
????}
}

接下來(lái)是初始化函數(shù)，在此處我們獲取到自定義的顏色及文字參數(shù)，并初始化各種畫筆，代碼比較簡(jiǎn)單，看注釋內(nèi)容即可

private?void?init(Context?context,?AttributeSet?attrs)?{
????????//獲取自定義參數(shù)值
????????TypedArray?array?=??context.obtainStyledAttributes(attrs,?R.styleable.Wave);
????????//自定義顏色和文字
????????color?=?array.getColor(R.styleable.Wave_color,?Color.rgb(41,?163,?254));
????????text?=?array.getString(R.styleable.Wave_text);
????????array.recycle();
????????//圖形及路徑填充畫筆（抗鋸齒、填充、防抖動(dòng)）
????????mPaint?=?new?Paint(Paint.ANTI_ALIAS_FLAG);
????????mPaint.setStyle(Paint.Style.FILL);
????????mPaint.setColor(color);
????????mPaint.setDither(true);
????????//文字畫筆（抗鋸齒、白色、粗體）
????????textPaint?=?new?Paint(Paint.ANTI_ALIAS_FLAG);
????????textPaint.setColor(Color.WHITE);
????????textPaint.setTypeface(Typeface.DEFAULT_BOLD);
????????//閉合波浪路徑
????????path?=?new?Path();
????}

接下來(lái)是生成波浪線的方法，示意圖如下：?
?
　　將Path起點(diǎn)移動(dòng)到最左邊粉色點(diǎn)處，然后繪制兩個(gè)周期的長(zhǎng)度的波形（一上一下是一個(gè)周期），每個(gè)周期在x軸的跨度為此控件的寬度控制點(diǎn)距波形的軸線的絕對(duì)高度是整個(gè)控件的3/20，當(dāng)然想讓波形波動(dòng)幅度大的話這個(gè)比例可以隨意調(diào)整，接下來(lái)就用前邊講到的rQuadTo( )來(lái)生成閉合的波浪圖形，其中mWidth為控件的寬度，mHeight為控件的高度

private?Path?getActionPath(float?percent)?{
????????Path?path?=?new?Path();
????????int?x?=?-mWidth;
????????//當(dāng)前x點(diǎn)坐標(biāo)（根據(jù)動(dòng)畫進(jìn)度水平推移，一個(gè)動(dòng)畫周期推移的距離為一個(gè)周期的波長(zhǎng)）
????????x?+=?percent?*?mWidth;
????????//波形的起點(diǎn)
????????path.moveTo(x,?mHeight?/?2);
????????//控制點(diǎn)的相對(duì)寬度
????????int?quadWidth?=?mWidth?/?4;
????????//控制點(diǎn)的相對(duì)高度
????????int?quadHeight?=?mHeight?/?20?*?3;
????????//第一個(gè)周期波形
????????path.rQuadTo(quadWidth,?quadHeight,?quadWidth?*?2,?0);
????????path.rQuadTo(quadWidth,?-quadHeight,?quadWidth?*?2,?0);
????????//第二個(gè)周期波形
????????path.rQuadTo(quadWidth,?quadHeight,?quadWidth?*?2,?0);
????????path.rQuadTo(quadWidth,?-quadHeight,?quadWidth?*?2,?0);
????????//右側(cè)的直線
????????path.lineTo(x?+?mWidth?*?2,?mHeight);
????????//下邊的直線
????????path.lineTo(x,?mHeight);
????????//自動(dòng)閉合補(bǔ)出左邊的直線
????????path.close();
????????return?path;
????}

上邊代碼所表示的閉合路徑如下圖?

接下來(lái)就是重頭戲onDraw了

protected?void?onDraw(Canvas?canvas)?{
????????//底部的字
????????textPaint.setColor(color);
????????drawCenterText(canvas,?textPaint,?text);
????????//上層的字
????????textPaint.setColor(Color.WHITE);
????????canvas.save(Canvas.CLIP_SAVE_FLAG);
????????????//裁剪成圓形
????????????Path?o?=?new?Path();
????????????o.addCircle(mWidth?/?2,?mHeight?/?2,?mWidth?/?2,?Path.Direction.CCW);
????????????canvas.clipPath(o);
????????????//生成閉合波浪路徑
????????????path?=?getActionPath(currentPersent);
????????????//畫波浪
????????????canvas.drawPath(path,?mPaint);
????????????//裁剪文字
????????????canvas.clipPath(path);
????????????drawCenterText(canvas,?textPaint,?text);
????????canvas.restore();
????}

這里繪制思路是：在canvas上繪制藍(lán)色的文字 ——>將畫布裁剪成圓形 ——>繪制波浪 ——>裁剪畫布成波浪形 ——>繪制文字，這里一定要注意繪制順序，先繪制的在下部，后繪制的在上部。思路簡(jiǎn)單只用注意到兩次clip即可。?
　　細(xì)心的朋友一定看到了一個(gè)函數(shù)drawCenterText(canvas, textPaint, text)沒(méi)錯(cuò)，這個(gè)函數(shù)就是講文字繪于控件正中心的方法。有的讀者可能一直在使用Canvas.drawText( String text, float x, float y, Paint paint)?這個(gè)方法，但是參數(shù)中的（x,y)到底是哪個(gè)坐標(biāo)呢，是文字左上角的點(diǎn)的坐標(biāo)嗎？不是的，接下來(lái)我們用代碼驗(yàn)證一下這個(gè)（x,y）到底在文字的哪個(gè)部位

????????canvas.drawText(text,600,200,textPaint);
????????canvas.drawCircle(600,200,3,paint);
????????canvas.translate(600,?200);
????????Rect?bgRect=new?Rect(0,0,1000,400);
????????canvas.drawRect(bgRect,bgPaint);

????????Rect?textBound=new?Rect();
????????textPaint.getTextBounds(text,0,text.length(),textBound);
????????paint.setColor(Color.RED);
????????canvas.drawRect(textBound,paint);

????????Paint.FontMetrics?metrics=textPaint.getFontMetrics();
????????paint.setColor(Color.RED);
????????//?ascent?橙色
????????paint.setColor(Color.rgb(255,126,0));
????????canvas.drawLine(0,?metrics.ascent,?500,metrics.ascent,?paint);
????????//?descent
????????paint.setColor(Color.rgb(255,0,234));
????????canvas.drawLine(0,?metrics.descent,?500,?metrics.descent,?paint);
????????//?top
????????paint.setColor(Color.DKGRAY);
????????canvas.drawLine(0,?metrics.top,?500,?metrics.top,?paint);
????????//?bottom
????????paint.setColor(Color.GREEN);
????????canvas.drawLine(0,?metrics.bottom,?500,?metrics.bottom,?paint);

　首先是在畫布的（600,200）處畫上文字，為了方便觀察（600,200）在文字的什么部位，我在（600,200）處畫了一個(gè)半徑3像素的圓圈。然后平移畫布到（600,200）的地方然后依次畫出了文字的邊框圖以及FontMetrics信息里的top、ascent、descent、bottom信息?
我把運(yùn)行結(jié)果截圖做了處理，方便大家看?
?
　　從結(jié)果看（600,200）那個(gè)藍(lán)色的點(diǎn)并不是在文字的左上角，而是左下角，這個(gè)點(diǎn)所在的y坐標(biāo)即是大家常說(shuō)的BaseLine的位置，那現(xiàn)在這個(gè)函數(shù)Canvas.drawText( String text, float x, float y, Paint paint)就可以理解為——將文字的基準(zhǔn)點(diǎn)放在（x,y）處，那么這個(gè)基準(zhǔn)點(diǎn)可以改變嗎？答案是肯定的，可以通過(guò)繪制文字的畫筆的setTextAlign(Align align)方法設(shè)置為Paint.Align.CENTER或者Paint.Align.RIGHT，如果不設(shè)置的話默認(rèn)是Paint.Align.LEFT。讀者朋友們有興趣的話可以試試設(shè)置成CENTER之后（600,200）的藍(lán)圈圈是不是跑到了文字的中部呢？從上圖我們也可以看出，整個(gè)文字是介于FontMetrics.top和FontMetrics.bottom之間。?
　　好了，貼上文字居中的代碼，相信認(rèn)真看上邊那段話的朋友一定能輕松讀懂

??private?void?drawCenterText(Canvas?canvas,?Paint?textPaint,?String?text)?{
????????Rect?rect?=?new?Rect(0,?0,?mWidth,?mHeight);
????????textPaint.setTextAlign(Paint.Align.CENTER);

????????Paint.FontMetrics?fontMetrics?=?textPaint.getFontMetrics();
????????float?top?=?fontMetrics.top;
????????float?bottom?=?fontMetrics.bottom;

????????int?centerY?=?(int)?(rect.centerY()?-?top?/?2?-?bottom?/?2);

????????canvas.drawText(text,?rect.centerX(),?centerY,?textPaint);
????}

分析好上邊的代碼 我們就能繪制出一個(gè)靜態(tài)的小球了，動(dòng)畫既然要?jiǎng)?，肯定就像汽車一樣需要一個(gè)”引擎”，在上面說(shuō)到的繪制波浪路徑的函數(shù)中我們忽略了getActionPath(float percent)的參數(shù)percent，這個(gè)參數(shù)即是當(dāng)前動(dòng)畫的進(jìn)度，那么我們?nèi)绾蝸?lái)制造這個(gè)進(jìn)度呢？需要怎樣把這個(gè)動(dòng)畫“引擎”點(diǎn)燃呢。我們可以通過(guò)各種手段計(jì)時(shí)，生成一個(gè)計(jì)時(shí)Thread或者自己寫一個(gè)Handler等等，只要能均勻的生成進(jìn)度即可。?
　　本文中用到一個(gè)巧妙的定時(shí)器ValueAnimator?大家常說(shuō)的屬性動(dòng)畫ObjectAnimator就是它的一個(gè)子類，使用它來(lái)作為動(dòng)畫的引擎再方便不過(guò)了，從字面翻譯”ValueAnimator”那就是“值動(dòng)畫者”直譯雖然low但是恰恰更好理解，就是讓數(shù)值動(dòng)起來(lái)，從什么值動(dòng)到什么值呢？?
ValueAnimator animator = ValueAnimator.ofFloat(0, 1);?
這句話就是定義一個(gè)值從0變化到1的一個(gè)animator，我們的percent值就是從0變化到1的中間過(guò)程值，那么怎么得到這個(gè)過(guò)程值呢？——監(jiān)聽(tīng)器！對(duì)！

animator.addUpdateListener(new?ValueAnimator.AnimatorUpdateListener()?{
????????????@Override
????????????public?void?onAnimationUpdate(ValueAnimator?animation)?{
????????????????float?percent?=?animation.getAnimatedFraction();
????????????}
????????});

那么數(shù)值從0變到1需要多久呢？怎么能無(wú)限重復(fù)呢？重復(fù)的時(shí)候是重頭開(kāi)始還是反轉(zhuǎn)進(jìn)行呢？別急下面三句話就是讓動(dòng)畫無(wú)限重復(fù)，每次從頭開(kāi)始，一個(gè)周期1000毫秒

?animator.setDuration(1000);
?animator.setRepeatCount(ValueAnimator.INFINITE);
?animator.setRepeatMode(ValueAnimator.RESTART);

好了，引擎設(shè)置好了，發(fā)動(dòng)?
animator.start();?
上效果?
?
WTF！這是什么鬼，為什么鬼畜地慢幾拍？?
打印出來(lái)橫坐標(biāo)看看

07-09?18:18:47.308??E/Jcs:?getActionPath:?-21
07-09?18:18:47.326??E/Jcs:?getActionPath:?-15
07-09?18:18:47.342??E/Jcs:?getActionPath:?-10
07-09?18:18:47.359??E/Jcs:?getActionPath:?-5
07-09?18:18:47.375??E/Jcs:?getActionPath:?-2
07-09?18:18:47.392??E/Jcs:?getActionPath:?0
07-09?18:18:47.409??E/Jcs:?getActionPath:?0

最后幾拍的數(shù)值差好像不太對(duì)呀！拍拍腦門突然一想，我的動(dòng)畫不均勻是忘記設(shè)置一個(gè)均勻的插值器了！哎！

animator.setInterpolator(new?LinearInterpolator());

補(bǔ)上一個(gè)線性插值器，整個(gè)世界都順暢了?

百度Loading小球Github源碼

三、結(jié)語(yǔ)

靜態(tài)配圖是用Illustrator配合ps做的，gif是在www.ezgif.com上生成的