一个绚丽的Downloading动效分析与实现.docVIP

一个绚丽的Downloading动效分析与实现 一个绚丽的Downloading动效分析与实 现 这个动效用CJJ的话说难度还好，但本人觉得还比较灵动、带感、俏皮、有新意，好了话不多说，咱们先来撸一张高清无码gif图： 咱可以将整个动效简单划分为以下流程： 1. BeforeProgress(显示进度前); 2. InProgress(显示进度中); 3.Failed(失败动画); 4.Done(完成动画); 下面咱们一起对以上流程进行分析与实现； 1. BeforeProgress(显示进度前): 同样，咱们一起撸一下第一部分高清无码gif图： 通过观察，我们可以将以上动画分割为以下几个内容： 1.圆形背景和下载剪头整体缩放； 2.圆形背景逐步镂空（缩放到一定阶段，内部镂空圆不断扩大）; 3.圆形背景变为一条直线，并伴随箭头些许上移； 4.直线上下震荡及下载箭头(Arrow)变承载进度文字的线框形态; 1.1. 圆形背景和下载剪头整体缩放: 这里面，圆形背景和整体的缩放好说，稍显麻烦的是下载箭头，由于后面箭头还需要形变为 承载进度文字的线框，所以丢掉你使用图片的小想法，咱们一起用path勾一个活泼的小箭头： // move