Android自定義動畫系列四，今天來分享第四個(gè)自定義Loading動畫（DoubleCircleBuilder），同樣的先起了一個(gè)名字叫 畫兩個(gè)圈圈 ，還是老規(guī)矩先介紹，后上圖。

實(shí)現(xiàn)效果在最后，GIF有點(diǎn)大，手機(jī)流量請三思。

介紹

首先依舊是聲明，做這些動畫的初衷是為了學(xué)習(xí)和分享，所以希望大家可以指點(diǎn)錯(cuò)誤，讓我更好的進(jìn)步。從這里起，我做一個(gè)系列的加載動畫（截止時(shí)間：我放棄的時(shí)候）。
上一個(gè)動畫鏈接：Android自定義加載動畫-旋轉(zhuǎn)的葉子

正文

今天分享的這個(gè)動畫很簡單，適合用于基本的等待界面，或者視頻加載界面，部分代碼如下：

首先還是初始化：

@Override
    protected void initParams(Context context)
    {
        //最大尺寸
        float outR = getAllSize();
        //小圓尺寸
        float inR = outR * 0.6f;
        //初始化畫筆
        initPaint(inR * 0.4f);
        //旋轉(zhuǎn)角度
        mRotateAngle = 0;
        //圓范圍
        mOuterCircleRectF = new RectF();
        mOuterCircleRectF.set(getViewCenterX() - outR, getViewCenterY() - outR, getViewCenterX() + outR, getViewCenterY() + outR);
        mInnerCircleRectF = new RectF();
        mInnerCircleRectF.set(getViewCenterX() - inR, getViewCenterY() - inR, getViewCenterX() + inR, getViewCenterY() + inR);

    }

    /**
     * 初始化畫筆
     */
    private void initPaint(float lineWidth)
    {
        mStrokePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mStrokePaint.setStyle(Paint.Style.STROKE);
        mStrokePaint.setStrokeWidth(lineWidth);
        mStrokePaint.setColor(Color.WHITE);
        mStrokePaint.setDither(true);
        mStrokePaint.setFilterBitmap(true);
        mStrokePaint.setStrokeCap(Paint.Cap.ROUND);
        mStrokePaint.setStrokeJoin(Paint.Join.ROUND);
    }

之所以起名字叫畫兩個(gè)圈圈，就是因?yàn)椋@個(gè)動畫就是只畫了兩個(gè)圈圈，嘿嘿??。一個(gè)270度的外圓，一個(gè)90度的內(nèi)圓。繪制如下：

    @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.save();
        //外圓
        canvas.drawArc(mOuterCircleRectF, mRotateAngle % 360, OUTER_CIRCLE_ANGLE, false, mStrokePaint);
        //內(nèi)圓
        canvas.drawArc(mInnerCircleRectF, 270 - mRotateAngle % 360, INTER_CIRCLE_ANGLE, false, mStrokePaint);
        canvas.restore();
    }

最后是旋轉(zhuǎn)動畫，修改每次繪制的角度。

    @Override
    protected void computeUpdateValue(@FloatRange(from = 0.0, to = 1.0) float animatedValue)
    {
        mRotateAngle = (int) (360 * animatedValue);
    }

總結(jié)

小伙伴們，要是想看更多細(xì)節(jié)，可以前往文章最下面的Github鏈接，如果大家覺得ok的話，希望能給個(gè)喜歡，最渴望的是在Github上給個(gè)star。謝謝了。

如果大家有什么更好的方案，或者想要實(shí)現(xiàn)的加載效果，可以給我留言或者私信我，我會想辦法實(shí)現(xiàn)出來給大家。謝謝支持。

演示

動畫演示圖

Github：zyao89/ZCustomView

作者：Zyao89；轉(zhuǎn)載請保留此行，謝謝；

個(gè)人博客：https://zyao89.cn