前两天我们这边的头儿给我说，有个 gif 动效很不错，可以考虑用来做项目里的 loading，问我能不能实现，看了下效果确实不错，也还比较有新意，复杂度也不是非常高，所以就花时间给做了，我们先一起看下原 gif 图效果：

源码下载

从效果上看，我们需要考虑以下几个问题： 1.叶子的随机产生； 2.叶子随着一条正余弦曲线移动； 3.叶子在移动的时候旋转，旋转方向随机，正时针或逆时针； 4.叶子遇到进度条，似乎是融合进入； 5.叶子不能超出最左边的弧角； 7.叶子飘出时的角度不是一致，走的曲线的振幅也有差别，否则太有规律性，缺乏美感；

总的看起来，需要注意和麻烦的地方主要是以上几点，当然还有一些细节问题，比如最左边是圆弧等等； 那接下来我们将效果进行分解，然后逐个击破： 整个效果来说，我们需要的图主要是飞动的小叶子和右边旋转的风扇，其他的部分都可以用色值进行绘制，当然我们为了方便，就连底部框一起切了； 先从 gif 图里把飞动的小叶子和右边旋转的风扇、底部框抠出来，小叶子图如下：

我们需要处理的主要有两个部分：

1. 随着进度往前绘制的进度条；
2. 不断飞出来的小叶片；

复制代码

// mProgressWidth为进度条的宽度，根据当前进度算出进度条的位置  
mCurrentProgressPosition = mProgressWidth * mProgress / TOTAL_PROGRESS;  
// 即当前位置在图中所示1范围内  
if (mCurrentProgressPosition < mArcRadius) {  
    Log.i(TAG, "mProgress = " + mProgress + "---mCurrentProgressPosition = "  
            + mCurrentProgressPosition  
            + "--mArcProgressWidth" + mArcRadius);  
    // 1.绘制白色ARC，绘制orange ARC  
    // 2.绘制白色矩形  

    // 1.绘制白色ARC  
    canvas.drawArc(mArcRectF, 90, 180, false, mWhitePaint);  

    // 2.绘制白色矩形  
    mWhiteRectF.left = mArcRightLocation;  
    canvas.drawRect(mWhiteRectF, mWhitePaint);  

    // 3.绘制棕色 ARC  
    // 单边角度  
    int angle = (int) Math.toDegrees(Math.acos((mArcRadius - mCurrentProgressPosition)  
            / (float) mArcRadius));  
    // 起始的位置  
    int startAngle = 180 - angle;  
    // 扫过的角度  
    int sweepAngle = 2 * angle;  
    Log.i(TAG, "startAngle = " + startAngle);  
    canvas.drawArc(mArcRectF, startAngle, sweepAngle, false, mOrangePaint);  
} else {  
    Log.i(TAG, "mProgress = " + mProgress + "---transfer-----mCurrentProgressPosition = "  
            + mCurrentProgressPosition  
            + "--mArcProgressWidth" + mArcRadius);  
    // 1.绘制white RECT  
    // 2.绘制Orange ARC  
    // 3.绘制orange RECT  

    // 1.绘制white RECT  
    mWhiteRectF.left = mCurrentProgressPosition;  
    canvas.drawRect(mWhiteRectF, mWhitePaint);  

    // 2.绘制Orange ARC  
    canvas.drawArc(mArcRectF, 90, 180, false, mOrangePaint);  
    // 3.绘制orange RECT  
    mOrangeRectF.left = mArcRightLocation;  
    mOrangeRectF.right = mCurrentProgressPosition;  
    canvas.drawRect(mOrangeRectF, mOrangePaint);  

}

——————————————————————————————————————————————————————————————————————————————————————————————

源码下载