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

GAStudio / 文 发表于2017-01-05 09:27 次阅读 酷炫,loading,android动画


闲逛之余,看到一个不错的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


Paste_Image.png


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(显示进度中) :


GAStudio哥本次在实现过程中,没有实现在移动的过程中的线框的摇摆,有兴趣的同学可以自己修改实现,剩余部分主要讲下拉绳的变动:

2.1. 拉绳的变动:


观察上图,可以将拉绳下拉的顶点移动的轨迹近似看成一条折线, 先计算出顶点的位置,再分别绘制左、右两边的直线,关键代码如下:


Paste_Image.png

3. Failed(失败动画):


撸完以上gif,我们可以把这部分效果分为如下几点:

1.线框内的文字变为Failed并且晃动;
2.绳子上下抖动;
3.绳子左侧的白色部分爆炸消失;
4.线框回到最初位置,变且变为下载箭头;
5.圆形背景逐渐放大出现;
6.圆形背景和下载箭头整体缩放;

在这里,我们一起看下爆炸效果的实现,其他部分相对简单,不再赘述;

关于爆炸效果,我们可以很逼真的模拟,绘制出各式各样的圆点来模拟,但是由于点的个数多,大小不一,采用该方式费事费力,并且由于效果速度快,转瞬即逝,我们可以采用一种简单而效果看起来差不多的方式,就是只画几个形状,然后平铺到整个绳子;

该处主要使用paint的setPathEffect方法将PathEffect设置为PathDashPathEffect,关键代码如下:


Paste_Image.png

4.Done(完成动画):


撸完以上gif, 我们可以将该部分概括为以下部分:

1.线框绕Y轴旋转,并由100%变换为done;
2.线框随进度条收缩到最中心;
3.线框在中心点晃动;
4.线框变换为下载箭头,圆形背景复出;
5.圆形背景和下载箭头整体缩放,伴随下载箭头上下晃动;

该部分咱们一起看下第一条的实现,即Canvas里如何实现伪三维变换;

Canvas中只有rotate函数,也就是在二维平面内进行旋转,不能实现如上的绕Y轴旋转,类似效果需要借助Camera来实现,关键代码如下:


Paste_Image.png

至此,该效果的核心逻辑咱们已经分析完毕,实现效果如下:

成功部分:


失败部分:


你以为到这里就结束了吗?No-No-No,作为一个负责任的开发者,最后咱们加上合理的自定义属性,以方便使用者自行定义:


Paste_Image.png

最后,附上Github地址,喜欢的同学欢迎star :



GADownloading源码地址:
https://github.com/Ajian-studio/GADownloading
具体逻辑请参见源码
欢迎加入GAStudio交流QQ群: 277582728;


收藏 赞 (3) 踩 (2)