Android动画学习（一）：帧动画和补间动画

前言

在Android开发中会经常使用到动画，本次对Android中的动画做一个简单总结备忘。

Android中的动画主要分为三类：帧动画，补间动画和属性动画，本片内容会对帧动画和补间动画进行简单说明总结。

系列文章：
Android动画学习（一）：帧动画和补间动画
Android动画学习（二）：基本属性动画
Android动画学习（三）：自定义属性动画

一、帧动画

帧动画是将一张张单独的图片以连续的方式播放而形成的视觉动画。实现这种动画主要依靠UI图片资源。

帧动画的实现一般是依靠xml文件来实现，利用xml来实现不仅可以方便的定义资源文件，还能够有利于动画的复用。

示例代码如下，我们首先定义一个名为test_frame_anim2.xml的帧动画：

<animation-list
    android:oneshot="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/arrow_right"
        android:duration="1000" />
    <item
        android:drawable="@drawable/icon_warning"
        android:duration="1000" />
    <item
        android:drawable="@drawable/icon_left_arrow"
        android:duration="1000" />
</animation-list>

当我们调用时可以通过设置ImageView控件的图片resource实现动画的设置，示例代码如下：

    /**
     * 逐帧动画
     */
    private fun setFrameAnimation() {
        imageAnimFrame1?.setImageResource(R.drawable.test_frame_anim2)
        val animationDrawable1 = imageAnimFrame1?.drawable as AnimationDrawable?
        animationDrawable1?.start()
    }

二、补间动画

1. 基本内容

常用的补间动画主要包括四种基本内容：

1. alpha（透明度）
2. scale（缩放）
3. translation（平移）
4. rotation（旋转）

补间动画可以采用上述四种中的一种或多种效果进行组合。

2. 实现

补间动画的实现主要包括有两种实现方式：XML实现和代码实现。

1. xml实现

补间动画的xml文件一般放置在res/anim/文件夹下面，我们在此文件夹下面新定义一个xml动画：test_flash_anim1.xml，代码如下（效果随便写的，可以看下xml参数）：

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toAlpha="1.0" />
    <scale
        android:duration="1000"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
    <translate
        android:duration="3000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="50%"
        android:toYDelta="50%" />

    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="180" />
</set>

然后调用如下代码即可以调用xml动画：

    private fun setFlashXMLAnim(view: View?) {
        val animation: Animation =
            AnimationUtils.loadAnimation(DemoApplication.mContext, R.anim.test_flash_anim1)
        view?.startAnimation(animation)
    }

对xml中部分属性做下简单说明：

1. alpha

标签	说明
duration	时长，单位ms
fromAlpha	起始透明度，范围0-1
toAlpha	结束透明度，范围0-1
interpolator	动画插值器，控制动画的速度

2. scale

标签	说明
fromXScale	起始X比例大小，当值为1.0时表示原大小
fromYScale	起始Y比例大小，当值为1.0时表示原大小
toXScale	结束X比例大小，当值为1.0时表示原大小
toYScale	结束Y比例大小，当值为1.0时表示原大小
pivotX	缩放起点X轴坐标，三种取值：数值，百分比，百分数P。起始点都是以左上角为标准。数值单位为px；百分比为当前view的百分比大小；百分数p为父控件宽度的百分比大小。
pivotY	缩放起始点Y轴坐标，取值同pivotX。
duration	动画时长，单位ms。

3. translate

标签	说明
fromXDelta	起始X轴位置
fromYDelta	起始Y轴位置
toXDelta	结束X轴位置
toYDelta	结束Y轴位置
duration	动画时长，单位ms

translate的位置标签的取值支持三种取值方式：数值，百分数，百分数P，和scale标签相似。

1. 数值单位为px.
2. 百分比表示为自身View大小的百分比
3. 百分数P表示为父View大小的百分比

4. rotate

标签	说明
fromDegrees	起始角度，单位度。
toDegrees	结束角度，单位度。
pivotX	旋转中心的X轴位置，同样有数值，百分比，百分数P三种取值
pivotY	旋转中心Y轴位置，取值同pivotX。
duration	动画时长，单位ms。
fillAfter	动画执行完后是否保持最后状态，取true保持

5. set

set标签是可以将多个动画组合。

2. 代码实现

代码实现补间动画主要是依靠类Animation。这个类具有多个子类：AlphaAnimation、ScaleAnimation、TranslateAnimation、RotateAnimation。我们可以创建这几个子类对象实现对应的补间动画，以透明度动画为例，代码如下：

    private fun setFlashAlphaAnim(view: View?) {
        var animation: AlphaAnimation = AlphaAnimation(0f, 1.0f)
        animation.duration = 1000
        view?.startAnimation(animation)
    }

除此之外，补间动画还有一些其他常见的方法：

方法	说明
fillAfter	设置在动画执行结束后的状态，设置为false则返回动画初始状态，设置为true保持动画执行结束之后的状态
repeatMode	动画重复模式，常见的有REVERSE和RESTART两种。REVERSE表示反向执行动画，RESTART表示重新执行动画。
repeatCount	动画重复次数

备注

在Android Studio编辑时能够看到当前的项目工程有着两个动画文件夹：anim和animator,这两个动画文件夹是有所区别的：

1. anim文件夹一般用来存放补间动画或者帧动画。
2. animator文件夹下一般用来存放属性动画。