一个绚丽的downloading动效分析与实现！

闲逛之余，看到一个不错的downloading动效，这个动效用CJJ的话说难度还好，但本人觉得还比较灵动、带感、俏皮、有新意，好了话不多说，咱们先来撸一张高清无码gif图：

撸完，咱可以将整个动效简单划分为以下流程：

1.BeforeProgress(显示进度前);
2.InProgress(显示进度中);
3.Failed(失败动画);
4.Done(完成动画);

下面咱们一起对以上流程进行分析与实现；

1. BeforeProgress(显示进度前):

同样，咱们一起撸一下第一部分高清无码gif图：

通过观察，我们可以将以上动画分割为以下几个内容：
1.圆形背景和下载剪头整体缩放；
2.圆形背景逐步镂空（缩放到一定阶段，内部镂空圆不断扩大）;
3.圆形背景变为一条直线，并伴随箭头些许上移；
4.直线上下震荡及下载箭头(Arrow)变承载进度文字的线框形态;

1.1. 圆形背景和下载剪头整体缩放:

这里面，圆形背景和整体的缩放好说，稍显麻烦的是下载箭头，由于后面箭头还需要形变为承载进度文字的线框，所以丢掉你使用图片的小想法，咱们一起用path勾一个活泼的小箭头：

Paste_Image.png

箭头OK了，圆形背景和整体的缩放就不再细说，只需要canvas.drawCircle()和使用ValueAnimator动态改变canvas缩放比例即可，so easy！

后面箭头需要形变为承载进度文字的线框，通过观察，可以看到线框的4个角是圆角。由于使用path勾勒，实现圆角线框大致有以下几种方案：

1.使用path的quadTo()以二次贝塞尔曲线连接；
2.使用path的arcTo()以圆弧形式连接；
3.使用path中addArc()添加一段圆；
4.使用paint的setPathEffect设置PathEffect为ConnerPathEffect；
本人最终采用第四种方式进行实现；

1.2.圆形背景逐步镂空（缩放到一定阶段，内部镂空圆不断扩大）:

撸完上图，我们可看到，圆形背景由实心圆变换至一个圆环，最终消失，此处我们可以想到如下方案：

1.直接采用背景的颜色，在里面画实心圆（需要提前知道背景颜色并且背景只能为纯色）;
2.外面深色的圆直接是圆环，然后通过调整圆的半径及paint的strokeWidth实现；
3.直接采用混合模式(Xfermode)，圆形背景中混合掉内圆部分；
第一种方案太挫，帅气逼人的GAStudio哥肯定不会考虑，本文采用混合模式方案，关键代码如下：

Paste_Image.png

1.3.圆形背景变为一条直线，并伴随箭头些许上移:

这个部分相比前面两步稍显复杂，需要将圆环如丝般顺滑的变换成直线，并随之上线震荡，该过程拆解图如下：

对于这个过程，GAStudio哥采用两条三阶贝塞尔曲线对初期的圆环、中间部分的曲线、最终的直线进行模拟；

为了便于理解，抽象出四个核心状态，过程图解如下：

1.完整圆形状态：

2.延展开来状态：

3.横向铺开状态：

4.直线状态：

更新path核心逻辑如下：

Paste_Image.png

整个过程路径及控制点变化如下：

至此，箭头上移的效果，只需根据绳子中心点的位置，平移下载箭头位置即可；

1.4.直线上下震荡及下载箭头(Arrow)变承载进度文字的线框形态：

这个过程有以下三点需要考虑：

1.4.1.直线震荡:
该效果仅需持续上下移动二阶贝塞尔曲线的控制点即可，不再多言；

1.4.2.箭头沿曲线移动：
移动的路线可以采用一个三阶贝塞尔曲线进行模拟，再使用PathMeasure获取过程中的实时位置(x、y)，关键代码如下：

Paste_Image.png

1.4.3.移动过程中的下载箭头形态变换：
咱们用rectWidth、rectHeight分别指代下载箭头底部的矩形部分的宽高，triWidth、triHeight分别指代Arrow头部的三角形部分的宽高，angle指代下载箭头的旋转角度；

只需用ValueAnimator创建一个过程将以上数值进行如下变换：

rectWidth 到 2rectWidth；
rectHeight 到 1.4rectHeight 再到 rectHeight；
triWidth 到 0.65triWidth；
triHeight 到 0.65*triHeight；
angle 由 0 -> -30 -> 20 -> -10 -> 0度；

OK，到这里，第一部分就可以告一段落，咱们继续看后面的部分；

2. InProgress(显示进度中) :