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();
	}

点此查看Android开发笔记的完整目录

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