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

本文源码下载地址：

百度网盘下载： http://pan.baidu.com/s/1sjP0hCL

------------------------------------------分割线------------------------------------------

------------------------------------------分割线------------------------------------------

从效果上看，我们需要考虑以下几个问题：

1.叶子的随机产生；

2.叶子随着一条正余弦曲线移动；

3.叶子在移动的时候旋转，旋转方向随机，正时针或逆时针；

4.叶子遇到进度条，似乎是融合进入；

5.叶子不能超出最左边的弧角；

7.叶子飘出时的角度不是一致，走的曲线的振幅也有差别，否则太有规律性，缺乏美感；

总的看起来，需要注意和麻烦的地方主要是以上几点，当然还有一些细节问题，比如最左边是圆弧等等；

那接下来我们将效果进行分解，然后逐个击破：

整个效果来说，我们需要的图主要是飞动的小叶子和右边旋转的风扇，其他的部分都可以用色值进行绘制，当然我们为了方便，就连底部框一起切了；

先从gif 图里把飞动的小叶子和右边旋转的风扇、底部框抠出来，小叶子图如下：

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

1. 随着进度往前绘制的进度条；

2. 不断飞出来的小叶片；

我们先处理第一部分 － 随着进度往前绘制的进度条：

进度条的位置根据外层传入的 progress 进行计算，可以分为图中 1、2、3 三个阶段：

1. 当progress 较小，算出的当前距离还在弧形以内时，需要绘制如图所示 1 区域的弧形，其余部分用白色填充；

2. 当 progress 算出的距离到2时，需要绘制棕色半圆弧形，其余部分用白色矩形填充；

3. 当 progress 算出的距离到3 时，需要绘制棕色半圆弧形，棕色矩形，白色矩形；

4. 当 progress 算出的距离到头时，需要绘制棕色半圆弧形，棕色矩形；（可以合并到3中）

首先根据进度条的宽度和当前进度、总进度算出当前的位置：

? ? ? ? //mProgressWidth为进度条的宽度，根据当前进度算出进度条的位置
? ? ? ? mCurrentProgressPosition = mProgressWidth * mProgress / TOTAL_PROGRESS;

然后按照上面的逻辑进行绘制，其中需要计算上图中的红色弧角角度，计算方法如下：

? ? // 单边角度
? ? int angle = (int) Math.toDegrees(Math.acos((mArcRadius - mCurrentProgressPosition)/ (float) mArcRadius));

Math.acos()? －反余弦函数；

Math.toDegrees() － 弧度转化为角度，Math.toRadians 角度转化为弧度

所以圆弧的起始点为：

int startAngle = 180 - angle;

圆弧划过的角度为：

2 * angle

这一块的代码如下：

? ? ? ? // 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);

? ? ? ? }

接下来再来看叶子部分：

首先根据效果情况基本确定出 曲线函数，标准函数方程为：y = A(wx+Q)+h，其中w影响周期，A影响振幅 ，周期T＝ 2 * Math.PI/w;

根据效果可以看出，周期大致为总进度长度，所以确定w＝(float) ((float) 2 * Math.PI /mProgressWidth)；