前言
使用百度貼吧客戶端的時(shí)候發(fā)發(fā)現(xiàn)加載的小動(dòng)畫(huà)挺有意思的，于是自己動(dòng)手寫(xiě)寫(xiě)看。想學(xué)習(xí)自定義View以及自定義動(dòng)畫(huà)的小伙伴一定不要錯(cuò)過(guò)哦。
讀者朋友需要有最基本的canvas繪圖功底，比如畫(huà)筆Paint的簡(jiǎn)單使用、Path如何畫(huà)直線等簡(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)畫(huà)
6）、Canvas文字居中
好了，開(kāi)始正文！
一、準(zhǔn)備工作
1、效果圖
2、動(dòng)畫(huà)拆解
直觀的看我們要實(shí)現(xiàn)三個(gè)方面
1）、波浪動(dòng)畫(huà)（藍(lán)色部分）
2）、不規(guī)則的文字（白色的半個(gè)“貼”字）
3）、控件顯示部分限制成圓形
3、技術(shù)分析
1）、波浪動(dòng)畫(huà)
要實(shí)現(xiàn)波浪動(dòng)畫(huà)，首先要繪制出波浪的形狀，其次再讓他動(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í)畫(huà)筆最后的落點(diǎn)都為（200,100）。
畫(huà)波浪線的技術(shù)難點(diǎn)解決了那么如何讓波浪動(dòng)起來(lái)呢，想動(dòng)起來(lái)肯定需要波浪在水平方向移動(dòng)，那么我們需要畫(huà)一個(gè)很長(zhǎng)很長(zhǎng)的波浪讓他移動(dòng)，這樣就實(shí)現(xiàn)了上下起伏效果，但是這樣需要畫(huà)無(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正好有畫(huà)布裁剪功能，通過(guò)裁剪畫(huà)布就能控制繪制區(qū)域，畫(huà)布的裁剪可以用Canvas.clipPath(Path path)實(shí)現(xiàn)，傳入一個(gè)閉合的Path既可以隨心所欲裁剪畫(huà)布，裁剪示意圖如下
利用波浪形閉合路徑講畫(huà)布裁剪成波浪形，那么在此接下來(lái)的Canvas繪制操的內(nèi)容只能在這個(gè)波浪形區(qū)域里顯示，這樣就解決了文字的部分區(qū)域顯示問(wèn)題。那么接下來(lái)我們只用在相同位置繪制相同字體、字號(hào)不同色的文字即可實(shí)現(xiàn)一個(gè)文字顯示兩種顏色了（注意：實(shí)際操作的時(shí)候，被裁剪的文字要蓋在未被裁減的文字的上邊，即先在畫(huà)布裁剪之前繪制藍(lán)色的“貼”字，然后再裁剪畫(huà)布再在裁剪后的畫(huà)布上繪制白色的“貼”）
**3）、控件顯示部分限制成圓形 **
經(jīng)過(guò)2）的分析，將顯示部分限制在圓形區(qū)域里不是易如反掌嗎，使用一個(gè)圓形的Path裁剪畫(huà)布即可。感興趣的同學(xué)也可以嘗試BitmapShader或者Xfermode來(lái)將顯示區(qū)域變成圓形
好了，最主要的步驟都分析完了，上一張圖更直觀地展示一下繪制流程
圖中可以看出波浪形的閉合Path有兩個(gè)作用，一個(gè)是負(fù)責(zé)裁剪畫(huà)布，一個(gè)是負(fù)責(zé)繪制藍(lán)色，其實(shí)只用第一個(gè)功能即可，此處只是方便分解步驟。
二、代碼實(shí)現(xiàn)
文章只貼出主要代碼，完整代碼文末提供鏈接
既然是自定義控件，那就要有通用性比如下邊的效果：
loading小球需文字和顏色都可以改變，所以我們要給自己的控件添加這兩個(gè)屬性。首先在“res/values/”路徑下新建一個(gè)attrs.xml文件，在里邊定義如下屬性：
<declare-styleable name="Wave">
<attr name="color" format="color"/>
<attr name="text" format="string"/>
</declare-styleable>
接下來(lái)開(kāi)始自定義View
復(fù)寫(xiě)三個(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ù)，并初始化各種畫(huà)筆，代碼比較簡(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();
//圖形及路徑填充畫(huà)筆（抗鋸齒、填充、防抖動(dòng)）
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(color);
mPaint.setDither(true);
//文字畫(huà)筆（抗鋸齒、白色、粗體）
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)畫(huà)進(jìn)度水平推移，一個(gè)動(dòng)畫(huà)周期推移的距離為一個(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了
@Override
protected void onDraw(Canvas canvas) {
//底部的字
textPaint.setColor(color);
drawCenterText(canvas, textPaint, text);
//上層的字
textPaint.setColor(Color.WHITE);
//生成閉合波浪路徑
path = getActionPath(currentPercent);
canvas.clipPath(path);
//裁剪成圓形
canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, mPaint);
drawCenterText(canvas, textPaint, text);
}
這里繪制思路是：在canvas上繪制藍(lán)色的文字 ——>將畫(huà)布裁剪成波浪形 ——>在波浪形畫(huà)布上繪制圓 ——>在波浪形畫(huà)布上繪制文字，這里一定要注意繪制順序，先繪制的在下部，后繪制的在上部。
細(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);
首先是在畫(huà)布的（600,200）處畫(huà)上文字，為了方便觀察（600,200）在文字的什么部位，我在（600,200）處畫(huà)了一個(gè)半徑3像素的圓圈。然后平移畫(huà)布到（600,200）的地方然后依次畫(huà)出了文字的邊框圖以及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ò)繪制文字的畫(huà)筆的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();
//文字框最高點(diǎn)距離baseline的距離（負(fù)數(shù)）
float top = fontMetrics.top;
//文字框最低點(diǎn)距離baseline的距離（正數(shù)）
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)畫(huà)既然要?jiǎng)?，肯定就像汽車一樣需要一個(gè)"引擎"，在上面說(shuō)到的繪制波浪路徑的函數(shù)中我們忽略了getActionPath(float percent)的參數(shù)percent，這個(gè)參數(shù)即是當(dāng)前動(dòng)畫(huà)的進(jìn)度，那么我們?nèi)绾蝸?lái)制造這個(gè)進(jìn)度呢？需要怎樣把這個(gè)動(dòng)畫(huà)“引擎”點(diǎn)燃呢。我們可以通過(guò)各種手段計(jì)時(shí)，生成一個(gè)計(jì)時(shí)Thread或者自己寫(xiě)一個(gè)Handler等等，只要能均勻的生成進(jìn)度即可。
本文中用到一個(gè)巧妙的定時(shí)器ValueAnimator 大家常說(shuō)的屬性動(dòng)畫(huà)ObjectAnimator就是它的一個(gè)子類，使用它來(lái)作為動(dòng)畫(huà)的引擎再方便不過(guò)了，從字面翻譯"ValueAnimator"那就是“值動(dòng)畫(huà)者”直譯雖然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)畫(huà)無(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ì)呀！拍拍腦門(mén)突然一想，我的動(dòng)畫(huà)不均勻是忘記設(shè)置一個(gè)均勻的插值器了！哎！
animator.setInterpolator(new LinearInterpolator());
補(bǔ)上一個(gè)線性插值器，整個(gè)世界都順暢了
[百度Loading小球Github源碼](https://github.com/Jichensheng/BaiduWave)
###三、結(jié)語(yǔ)
第一次寫(xiě)文章，不免有些疏漏之處，望多多指教！后續(xù)我會(huì)不定期更新新的內(nèi)容，爭(zhēng)取把寫(xiě)文章當(dāng)成自己生活的一部分。
---
### 后記（2017年7月27日15:02:39）
有不少讀者問(wèn)到關(guān)于小球和邊緣鋸齒的問(wèn)題，我分別用如下方式實(shí)現(xiàn)loading小球
> 1、Canvas的clip方式限制波浪邊界（本文提到的方法）
2、使用Xfermode方式限制波浪和圓形的邊界
3、用Xfermode方式限制白色文字,用shader方式限制圓形的邊界
下邊是效果預(yù)覽圖，代碼已經(jīng)提交到[github](https://github.com/Jichensheng/BaiduWave)上了，講解部分盡快補(bǔ)到此文中
