Android自定義動畫系列三，今天來分享第三個自定義Loading動畫，同樣的先起了一個名字叫 旋轉的葉子 ，還是老規矩先介紹，后上圖。

實現效果在最后，GIF有點大，手機流量請三思。

介紹

首先依舊是聲明，做這些動畫的初衷是為了學習和分享，所以希望大家可以指點錯誤，讓我更好的進步。從這里起，我做一個系列的加載動畫（截止時間：我放棄的時候）。
上一個動畫鏈接：Android自定義動畫-StarLoadingView

正文

今天這個動畫是我做上個蹦跶的星星時，無意中繪制出來的圖形，感覺挺好看的，就把它做了出來，部分代碼如下：

先是初始化，參數定義如下注釋

    @Override
    protected void initParams(Context context)
    {
        initPaint();

         //最外層半徑
        mStarOutR = getAllSize();
        //外層貝塞爾曲線中間值
        mStarOutMidR = mStarOutR * 0.9f;
        //內層半徑
        mStarInR = mStarOutR * 0.7f;
        //內層貝塞爾曲線中間值
        mStarInMidR = mStarOutR * 0.3f;

        //中心圓半徑
        mCenterCircleR = dip2px(context, 3);
        //旋轉角度
        mRotateAngle = 0;
    }

    /**
     * 初始化畫筆
     */
    private void initPaint()
    {
        mFullPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mFullPaint.setStyle(Paint.Style.FILL);
        mFullPaint.setStrokeWidth(2);
        mFullPaint.setColor(Color.WHITE);
        mFullPaint.setDither(true);
        mFullPaint.setFilterBitmap(true);
    }
    

    @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.save();
        //旋轉
        canvas.rotate(mRotateAngle, getViewCenterX(), getViewCenterY());
        //路徑
        Path starPath = createStarPath(5, -18);
        //路徑加入中心圓
        starPath.addCircle(getViewCenterX(), getViewCenterY(), mCenterCircleR, Path.Direction.CW);
        //這個很關鍵，選擇路徑填充方式
        starPath.setFillType(Path.FillType.EVEN_ODD);
        //繪制
        canvas.drawPath(starPath, mFullPaint);
        canvas.restore();
    }
    

以下是繪制的方法，和動畫三個階段的切換，很關鍵。這次弄了個動畫階段來豐富動畫內容，感覺還是不錯的。??

    /**
     * 繪制五葉草
     *
     * @param num        角數量
     * @param startAngle 初始角度
     * @return
     */
    private Path createStarPath(int num, int startAngle)
    {
        final Path path = new Path();
        int angle = 360 / num;
        int roundSize = 5;//圓角弧度
        int offsetAngle = angle / 2;
        path.moveTo(getViewCenterX() + mStarOutMidR * cos(startAngle - roundSize), getViewCenterY() + mStarOutMidR * sin(startAngle - roundSize));
        for (int i = 0; i < num; i++)
        {
            int value = angle * i + startAngle;
            path.lineTo(getViewCenterX() + mStarOutMidR * cos(value - roundSize), getViewCenterY() + mStarOutMidR * sin(value - roundSize));
            //圓角
            path.quadTo(getViewCenterX() + mStarOutR * cos(value), getViewCenterY() + mStarOutR * sin(value), getViewCenterX() + mStarOutMidR * cos(value + roundSize), getViewCenterY() + mStarOutMidR * sin(value + roundSize));
            path.lineTo(getViewCenterX() + mStarInR * cos(value + offsetAngle - roundSize), getViewCenterY() + mStarInR * sin(value + offsetAngle - roundSize));
            //內圓角
            path.quadTo(getViewCenterX() + mStarInMidR * cos(value + offsetAngle), getViewCenterY() + mStarInMidR * sin(value + offsetAngle), getViewCenterX() + mStarInR * cos(value + offsetAngle + roundSize), getViewCenterY() + mStarInR * sin(value + offsetAngle + roundSize));
        }
        path.close();
        return path;
    }

    @Override
    protected void computeUpdateValue(@FloatRange(from = 0.0, to = 1.0) float animatedValue)
    {
        switch (mCurrAnimatorState)//以下分為三個階段
        {
            case 0://第一階段，旋轉、放大
                mStarOutMidR = getAllSize() * animatedValue;
                mRotateAngle = (int) (360 * animatedValue);
                break;
            case 1://第二階段，逆時針旋轉
                mRotateAngle = (int) (360 * (1 - animatedValue));
                break;
            case 2://第三階段，縮小
                mStarOutMidR = getAllSize() * (1 - animatedValue);
                break;
        }
    }

    @Override
    public void onAnimationRepeat(Animator animation)
    {
        if (++mCurrAnimatorState > FINAL_STATE)
        {//還原到第一階段
            mCurrAnimatorState = 0;
        }
    }

總結

小伙伴們，動畫應該還是可以的吧，要是想看更多細節，可以前往文章最下面的Github鏈接，如果大家覺得ok的話，希望能給個喜歡，最渴望的是在Github上給個star。謝謝了。

演示

動畫演示圖

Github：zyao89/ZCustomView

作者：Zyao89；轉載請保留此行，謝謝；

個人博客：https://zyao89.cn