Android动画之为Drawable图片添加动画

一、前言

    在某些情况下，我们需要为图片添加动画效果，比如在用户操作之后，将图标转换成另一张图标。Android 提供了多张方案为 Drawable 添加动画。首先就是使用 AnimationDrawable ，这种方案通过指定多张静态的 Drawable 图片文件组合在一起构成动画（每个时刻只显示一张图片）。另一种就是使用 AnimatedVectorDrawable，这种方案是通过改变矢量图片的属性实现动画。

二、使用 AnimationDrawable

    AnimationDrawable 是通过加载多张 Drawable 图片资源组合而成的动画，这是一种传统动画，通过按顺序播放图片序列来实现动画效果，就像胶片电影一样。AnimationDrawable 是一种可以用作视图背景的动画资源。

    构建 AnimationDrawable 有两种方法，一种是通过 AnimationDrawable 类 API 在代码中实现。另一种简单的方式就是在 XML 资源中定义。XML 中定义的 AnimationDrawable 资源放在 res/drawable 目录下，通过 @drawable/id 方式引用，可以直接设置为视图的背景。

2.1 在 XML 中定义 AnimationDrawable

    AnimationDrawable XML 资源，是以 <animation-list> 为根节点，<animation-list> 节点中使用 android:oneshot 属性声明动画是否为一次性（true：只播放一次，停在结尾状态；false：循环播放动画）。每一个图片使用一个 <item> 节点声明， <item> 节点中使用 andriod:duration 属性声明当前图片停留时间（单位：毫秒）。

• 示例

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/ic_dialog_loading_00" android:duration="50" />
    <item android:drawable="@drawable/ic_dialog_loading_01" android:duration="50" />
    <item android:drawable="@drawable/ic_dialog_loading_02" android:duration="50" />
    <item android:drawable="@drawable/ic_dialog_loading_03" android:duration="50" />
    <item android:drawable="@drawable/ic_dialog_loading_04" android:duration="50" />
    <item android:drawable="@drawable/ic_dialog_loading_05" android:duration="50" />
    <item android:drawable="@drawable/ic_dialog_loading_06" android:duration="50" />
    <item android:drawable="@drawable/ic_dialog_loading_07" android:duration="50" />
    <item android:drawable="@drawable/ic_dialog_loading_08" android:duration="50" />
    <item android:drawable="@drawable/ic_dialog_loading_09" android:duration="50" />
    <item android:drawable="@drawable/ic_dialog_loading_10" android:duration="50" />
    <item android:drawable="@drawable/ic_dialog_loading_11" android:duration="50" />
</animation-list>

findViewById<ImageView>(R.id.iv_loading).apply {
    var animationDrawable = ResourcesCompat.getDrawable(resources, R.drawable.loading_animation, null) as AnimationDrawable
    setImageDrawable(animationDrawable)
    animationDrawable.start()
}

• 效果
  

注意事项：AnimationDrawable 必须调用 start() 方法开始动画，否则将会显示第一帧的静态图片。

三、使用 AnimatedVectorDrawable

    VectorDrawable（矢量图像）是一种在缩放过程中不会出现马赛克和模糊的图像。AnimatedVectorDrawable 类（以及support包兼容类 AnimatedVectorDrawableCompat）提供了对矢量图像属性添加动画的支持。例如，旋转图像或者通过更改路径数据改变图像形状等。

    定义一个矢量动画资源，需要分三个步骤（定义三个 XML 资源）：

• 第一步：定义一个矢量图 XML 资源
      矢量图 XML 资源以 <vector> 为根节点，内部可包含 <group> 和 <path> 节点。<path> 节点定义需要绘制路径，<group> 节点可包含多个 <path> 或者子 <group>。在定义矢量图时，在需要添加动画的 <group> 和 <path> 节点中添加 android:name 属性，指定唯一标识，以便在定义动画时引用该矢量图（不需要添加动画的可以不指定标识）。矢量图 XML 资源放在 res/drawable/ 目录下。

示例： res/drawable/vectordrawable.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

• 第二步：定义一个矢量动画 XML 资源
      矢量动画 XML 资源以 <animated-vector> 为根节点，根节点上使用 android:drawable 属性指定需要添加动画的矢量图 XML 资源。然后使用 <target> 节点定义动画，<target> 节点通过 android:name 属性指定需要添加动画的矢量图对象（矢量图 XML 中定义的 <group> 或 <path> 节点），android:animation 属性指定添加的动画（定义好的属性动画）。矢量动画 XML 资源文件存放在 res/drawable 目录下。

示例：res/drawable/animatorvectordrawable.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@animator/rotation" />
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>

• 第三步：定义动画效果的属性动画 XML 资源
      定义一个或者多个属性动画 XML 资源（更多关于属性动画的内容请参考：Android 属性动画（一）新手入门），属性动在 矢量动画 XML 中的 <target> 节点通过 android:animation 属性引用，属性动画 XML 资源文件放在 res/animator 目录下。

示例： res/animator/rotation

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" >

</objectAnimator>

示例： res/animator/path_morph

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:propertyName="pathData"
    android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
    android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
    android:valueType="pathType">

</objectAnimator>

• 效果
  

适量动画主要是通过改变属性来实现动画的。上面的示例中，包含两个动画，一个是物体围绕中心点旋转，一个是矢量图变形。关于矢量图的更多内容，请参考：矢量图像资源详解（Vector drawables）