一个绚丽的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 to bottom center mArrowPath.moveTo(halfArrowWidth, 0); // rect bottom left edge mArrowPath.lineTo(rectPaddingLeft, 0); // rect left edge mArrowPath.lineTo(rectPaddingLeft, rectHeight); // tri bottom left edge mArrowPath.lineTo(triPaddingLeft, rectHeight); // tri left edge mArrowPath.lineTo(halfArrowWidth, arrowHeight); // tri right edge mArrowPath.lineTo(arrowWidth - triPaddingLeft, rectHeight); // tri bottom right edge mArrowPath.lineTo(arrowWidth - rectPaddingLeft, rectHeight); // rect right edge mArrowPath.lineTo(arrowWidth - rectPaddingLeft, 0); // rect right bottom edge mArrowPath.lineTo(halfArrowWidth, 0); 箭头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. 外面深色的圆直接是圆环，然后通过调整圆的半径及paint的strokeWidth实现； 3.直接采用混合模式(Xfermode)，圆形背景中混合掉内圆部分； 第一种方案太挫，帅气逼人的GAStudio哥肯定不会考虑，本文采用混合模式方案，关键代码如下： int layoutCont = canvas.saveLayer(mCircleRectF, mDefaultPaint, Canvas.ALL_SAVE_FLAG); mDefaultPaint.setColor(mLoadingCircleBackColor);