封面

前言

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

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

好了应媚，開始正文！

一猜极、準(zhǔn)備工作

1中姜、效果圖

loading小球

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)起來骨宠。波浪線看起來有點(diǎn)像是正弦或者余弦函數(shù)，但是Android的Path并沒有提供繪制正余弦圖形的函數(shù)相满，但是提供了一個(gè)功能更強(qiáng)大的曲線——貝塞爾曲線层亿，貝塞爾曲線分為二階、三階及多階立美，本案例里使用的是二次貝塞爾曲線匿又，如下圖所示，二階貝塞爾曲線需要三個(gè)點(diǎn)才可以確定

二階貝塞爾曲線

我們來看一下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);
    }

由注解可以看出來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è)開始點(diǎn)呀裕偿！不要著急，開始點(diǎn)是Path路徑的上一次結(jié)束的點(diǎn)痛单，如果你的Path沒有繪制過路徑嘿棘，那么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)起來呢房午，想動(dòng)起來肯定需要波浪在水平方向移動(dòng)，那么我們需要畫一個(gè)很長(zhǎng)很長(zhǎng)的波浪讓他移動(dòng)丹允，這樣就實(shí)現(xiàn)了上下起伏效果郭厌，但是這樣需要畫無數(shù)多條貝塞爾曲線，肯定不行雕蔽，這時(shí)就用到萬能的數(shù)學(xué)理論——周期函數(shù)了沪曙，如果我們繪制兩個(gè)周期的貝塞爾曲線，每次只讓它顯示一個(gè)周期萎羔，然后等第二周期顯示結(jié)束的時(shí)候再?gòu)念^開始液走，這樣就造成了無限周期的假象，如下圖
　　初始位置為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正好有畫布裁剪功能涌攻，通過裁剪畫布就能控制繪制區(qū)域，畫布的裁剪可以用Canvas.clipPath(Path path)實(shí)現(xiàn)频伤，傳入一個(gè)閉合的Path既可以隨心所欲裁剪畫布恳谎，裁剪示意圖如下

裁剪文字

利用波浪形閉合路徑講畫布裁剪成波浪形，那么在此接下來的Canvas繪制操的內(nèi)容只能在這個(gè)波浪形區(qū)域里顯示，這樣就解決了文字的部分區(qū)域顯示問題因痛。那么接下來我們只用在相同位置繪制相同字體婚苹、字號(hào)不同色的文字即可實(shí)現(xiàn)一個(gè)文字顯示兩種顏色了（注意：實(shí)際操作的時(shí)候，被裁剪的文字要蓋在未被裁減的文字的上邊鸵膏，即先在畫布裁剪之前繪制藍(lán)色的“貼”字膊升，然后再裁剪畫布再在裁剪后的畫布上繪制白色的“貼”）

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

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

好了赞咙，最主要的步驟都分析完了，上一張圖更直觀地展示一下繪制流程

整體分析圖

圖中可以看出波浪形的閉合Path有兩個(gè)作用糟港，一個(gè)是負(fù)責(zé)裁剪畫布攀操，一個(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>

接下來開始自定義View
　　復(fù)寫三個(gè)構(gòu)造函數(shù)，將單參數(shù)和雙參數(shù)的構(gòu)造函數(shù)的super方法都改為this鹿驼，保證無論調(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);
    }
}

接下來是初始化函數(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();
    }

接下來是生成波浪線的方法闰非，示意圖如下：

波浪生成原理

　　將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)整，接下來就用前邊講到的rQuadTo( )來生成閉合的波浪圖形虎敦，其中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;
    }

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

閉合的波浪圖形

接下來就是重頭戲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)色的文字 ——>將畫布裁剪成波浪形 ——>在波浪形畫布上繪制圓 ——>在波浪形畫布上繪制文字，這里一定要注意繪制順序胚迫，先繪制的在下部喷户，后繪制的在上部。
　　細(xì)心的朋友一定看到了一個(gè)函數(shù)drawCenterText(canvas, textPaint, text)沒錯(cuò)访锻，這個(gè)函數(shù)就是講文字繪于控件正中心的方法褪尝。有的讀者可能一直在使用Canvas.drawText( String text, float x, float y, Paint paint) 這個(gè)方法，但是參數(shù)中的（x,y)到底是哪個(gè)坐標(biāo)呢期犬，是文字左上角的點(diǎn)的坐標(biāo)嗎河哑？不是的，接下來我們用代碼驗(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é)果截圖做了處理棉安，方便大家看

文字的各個(gè)邊界

    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)畫既然要?jiǎng)邮羌猓隙ň拖衿囈粯有枰粋€(gè)"引擎"意系，在上面說到的繪制波浪路徑的函數(shù)中我們忽略了getActionPath(float percent)的參數(shù)percent，這個(gè)參數(shù)即是當(dāng)前動(dòng)畫的進(jìn)度饺汹，那么我們?nèi)绾蝸碇圃爝@個(gè)進(jìn)度呢蛔添？需要怎樣把這個(gè)動(dòng)畫“引擎”點(diǎn)燃呢。我們可以通過各種手段計(jì)時(shí)，生成一個(gè)計(jì)時(shí)Thread或者自己寫一個(gè)Handler等等迎瞧，只要能均勻的生成進(jìn)度即可夸溶。
　　本文中用到一個(gè)巧妙的定時(shí)器ValueAnimator 大家常說的屬性動(dòng)畫ObjectAnimator就是它的一個(gè)子類，使用它來作為動(dòng)畫的引擎再方便不過了凶硅，從字面翻譯"ValueAnimator"那就是“值動(dòng)畫者”直譯雖然low但是恰恰更好理解缝裁，就是讓數(shù)值動(dòng)起來，從什么值動(dòng)到什么值呢足绅？
ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
這句話就是定義一個(gè)值從0變化到1的一個(gè)animator捷绑，我們的percent值就是從0變化到1的中間過程值，那么怎么得到這個(gè)過程值呢氢妈？——監(jiān)聽器粹污！對(duì)！

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

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

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

好了琅捏，引擎設(shè)置好了生百，發(fā)動(dòng)

animator.start();```  

上效果
![鬼畜版](http://upload-images.jianshu.io/upload_images/2198310-0a96a326b00ffd2f?imageMogr2/auto-orient/strip)
WTF！這是什么鬼柄延，為什么鬼畜地慢幾拍蚀浆？
打印出來橫坐標(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è)世界都順暢了
![感謝女朋的默默支持](http://upload-images.jianshu.io/upload_images/2198310-aed11f4c0a379621?imageMogr2/auto-orient/strip) 

[百度Loading小球Github源碼](https://github.com/Jichensheng/BaiduWave)
###三摆昧、結(jié)語
第一次寫文章，不免有些疏漏之處蜒程，望多多指教绅你！后續(xù)我會(huì)不定期更新新的內(nèi)容，爭(zhēng)取把寫文章當(dāng)成自己生活的一部分昭躺。  
 
---
### 后記（2017年7月27日15:02:39）
 有不少讀者問到關(guān)于小球和邊緣鋸齒的問題忌锯，我分別用如下方式實(shí)現(xiàn)loading小球  
> 1、Canvas的clip方式限制波浪邊界（本文提到的方法）
2领炫、使用Xfermode方式限制波浪和圓形的邊界
3偶垮、用Xfermode方式限制白色文字,用shader方式限制圓形的邊界    

下邊是效果預(yù)覽圖，代碼已經(jīng)提交到[github](https://github.com/Jichensheng/BaiduWave)上了，講解部分盡快補(bǔ)到此文中

![三種方式對(duì)比](http://upload-images.jianshu.io/upload_images/2198310-4f372d9dd92b1a93.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)