Android开发笔记（一百四十五）仿应用宝的垃圾清理动画
除了动画监听器，动画组合也是各类动画常见的用法，比如把几个补间动画组合起来，就形成了集合动画AnimationSet；把几个属性动画组合起来，就形成了属性动画组合AnimatorSet。那么能否把几个矢量动画在时间上并行组合起来，也形成一种矢量动画组合呢？ 比如应用宝的垃圾清理动画，它的初始画面由三个深红色的月牙环绕组成，效果如下图所示：
然后在垃圾清理的过程中，这三个月牙一边转，填充色也一边渐变，月牙转圈动画结束之时，其内部的颜色也从深红色变成了亮绿色，效果下图所示：
只看静态截图还有点抽象，还是观看具体的动画方便理解，下面的动图展示了月牙转动之时、颜色也随之改变的完整过程。
我们知道矢量动画AnimatedVectorDrawable只能由xml文件定义，以支付成功动画的xml描述文件为例，根节点是animated-vector，下级节点是target，完整的xml文件内容如下所示：
<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的路径数据上有所区别。
<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属性的数值）：
<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属性的数值）：
<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节点，完整的矢量动画描述如下所示：
<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>最后由代码控制矢量动画的播放，点击播放按钮时执行下列代码，即可看到文章开头的垃圾清理动画效果了。
iv_clear.setImageResource(R.drawable.animated_rubbish_clear);
Drawable drawable = iv_clear.getDrawable();
if (drawable instanceof AnimatedVectorDrawable) {
((AnimatedVectorDrawable) drawable).start();
}