Android开发笔记（一百四十五）仿应用宝的垃圾清理动画-白红宇的个人博客

发布日期：2021-05-07 19:03:39 浏览次数：28 分类：原创文章

本文共 3437 字，大约阅读时间需要 11 分钟。

除了动画监听器，动画组合也是各类动画常见的用法，比如把几个补间动画组合起来，就形成了集合动画AnimationSet；把几个属性动画组合起来，就形成了属性动画组合AnimatorSet。那么能否把几个矢量动画在时间上并行组合起来，也形成一种矢量动画组合呢？

比如应用宝的垃圾清理动画，它的初始画面由三个深红色的月牙环绕组成，效果如下图所示：

然后在垃圾清理的过程中，这三个月牙一边转，填充色也一边渐变，月牙转圈动画结束之时，其内部的颜色也从深红色变成了亮绿色，效果下图所示：

只看静态截图还有点抽象，还是观看具体的动画方便理解，下面的动图展示了月牙转动之时、颜色也随之改变的完整过程。

我们知道矢量动画AnimatedVectorDrawable只能由xml文件定义，以支付成功动画的xml描述文件为例，根节点是animated-vector，下级节点是target，完整的xml文件内容如下所示：

[html]    
 <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"  
     android:drawable="@drawable/vector_pay_circle_white">  
     <target  
         android:name="circle"  
         android:animation="@anim/anim_pay" />  
 </animated-vector>  

一般animated-vector下面只有一个target节点，那么如果下面挂了好几个target节点会怎么样呢？接下来就来探讨探讨这么做会产生什么反应。

首先对垃圾清理动画进行分解，一方面是月牙的旋转动画，另一方面是月牙填充色的渐变动画。旋转角度和填充颜色其实都属于矢量图形的属性，按照属性动画的做法，只要指定这些属性的起始数值和终止数值，即可让系统自动实现动画的渲染过程。所以垃圾清理动画看起来是由这两个动画组合而成：月牙的旋转动画，以及月牙填充色的渐变动画。
在矢量图形描述中，旋转角度由group节点的rotation参数定义，填充色由path节点的fillColor参数定义，因此接着就要在月牙矢量图形描述中分别定义group节点和path节点。为节约篇幅，下面只给出了第一个月牙图形的矢量定义，第二个和第三个月牙的矢量定义与之类似，仅在pathData的路径数据上有所区别。

[html]    
 <vector xmlns:android="http://schemas.android.com/apk/res/android"  
     android:height="100dp"  
     android:viewportHeight="100"  
     android:viewportWidth="100"  
     android:width="100dp" >  
     <group  
         android:name="clearGroupOne"  
         android:pivotX="50"  
         android:pivotY="50"  
         android:rotation="0" >  
         <path  
             android:name="clearPathOne"  
             android:fillColor="#ff0000"  
             android:pathData="  
             M 10,50  
             A 40 40 60 0 1 50 10  
             A 40 40 60 0 0 25 55  
             A 10 10 60 0 1 10 50"  
             android:strokeAlpha="1"  
             android:strokeColor="@color/transparent"  
             android:strokeLineCap="round"  
             android:strokeWidth="1" />  
     </group>  
     <!--此处省略第二个和第三个月牙的矢量描述-->  
 </vector>  

然后依据前面的分析，构造两个属性动画的行为描述，下面是月牙旋转动画的xml描述（改变rotation属性的数值）：

[html]    
 <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"  
     android:duration="3000"  
     android:interpolator="@android:interpolator/linear"  
     android:propertyName="rotation"  
     android:valueFrom="90"  
     android:valueTo="1080"  
     android:valueType="floatType" />  

下面是月牙填充色渐变动画的xml描述（改变fillColor属性的数值）：

[html]    
 <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"  
     android:duration="3000"  
     android:interpolator="@android:interpolator/linear"  
     android:propertyName="fillColor"  
     android:valueFrom="#aa0000"  
     android:valueTo="#66ff66"  
     android:valueType="colorType" />  

接着在矢量动画的xml描述文件中加入各个动画单位的目标，每个月牙都有旋转和颜色渐变两个动画单位，整个垃圾清理界面有三个月牙，那么总共就需要六个动画单位，于是animated-vector节点下面得补充六个target节点，完整的矢量动画描述如下所示：

[html]    
 <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"  
     android:drawable="@drawable/vector_rubbish_clear">  
     <target  
         android:name="clearGroupOne"  
         android:animation="@anim/anim_clear_group" />  
     <target  
         android:name="clearPathOne"  
         android:animation="@anim/anim_clear_path" />  
     <target  
         android:name="clearGroupTwo"  
         android:animation="@anim/anim_clear_group" />  
     <target  
         android:name="clearPathTwo"  
         android:animation="@anim/anim_clear_path" />  
     <target  
         android:name="clearGroupThree"  
         android:animation="@anim/anim_clear_group" />  
     <target  
         android:name="clearPathThree"  
         android:animation="@anim/anim_clear_path" />  
 </animated-vector>  

最后由代码控制矢量动画的播放，点击播放按钮时执行下列代码，即可看到文章开头的垃圾清理动画效果了。

[java]    
 iv_clear.setImageResource(R.drawable.animated_rubbish_clear);  
 Drawable drawable = iv_clear.getDrawable();  
 if (drawable instanceof AnimatedVectorDrawable) {  
     ((AnimatedVectorDrawable) drawable).start();  
 }  

__________________________________________________________________________
本文现已同步发布到微信公众号“老欧说安卓”，打开微信扫一扫下面的二维码，或者直接搜索公众号“老欧说安卓”添加关注，更快更方便地阅读技术干货。

上一篇：AnimatedVectorDrawableCompat适配5.0以下安卓

下一篇：android自定义View之(四)------一键清除动画

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章