Android 补间动画

补间动画

补间动画(Tween Animation)是指无须定义动画过程中的每一帧，只须要定义动画的开始和结束这两个关键帧，并指定动画变化的时间和方式等，然后交给 Android 系统进行计算，通过在两个关键帧之间插入渐变值来实现平滑过度，从而对 View 的内容完成一系列的图形变换来实现的动画效果。主要有四种基本效果：透明度变化 Alpha、大小变化 Scale、位移变化 Translate 以及 旋转变化 Rotate，四种效果可以动态组合。补间动画实现也可以分为 XML 资源文件和代码两种方式。

插值器 Interpolator

Anroid 系统会在补间动画的开始和结束关键帧之间插入渐变值，它根据的便是 Interpolator。Interpolator 会根据类型的不同，选择不同的算法计算出在补间动画期间所需要动态插入帧的密度和位置，Interpolator 负责控制动画的变化速度，使得前面所说的四种基本动画效果能够以匀速、加速、减速、抛物线等多种速度进行变化。
Interpolator 类其实是一个空接口，继承自 TimeInterpolator，TimeInterpolator 时间插值器运行动画进行非线性运动变换，如加速和减速等，该接口中只有 float getInterpolation(float var1) 这个方法。入参是一个 0.0 ~ 1.0 的值，返回值可以小于 0.0 也可以大于 1.0。

public interface Interpolator extends TimeInterpolator {
}

public interface TimeInterpolator {
    float getInterpolation(float var1);
}

Android SDK 提供了几个 Interpolator 实现类。

插值器类型	功能
AccelerateDecelerateInterpolator	在动画开始与结束的时候速率比较慢，在中间的时候加速
AccelerateInterpolator	在动画开始的地方速率比较慢，然后开始加速
AnticipateInterpolator	动画开始的时候先向后，然后向前滑动
AnticipateOvershootInterpolator	动画开始的时候先向后，然后向前甩一定值后返回最后的值
BounceInterpolator	动画结束的时候弹起
CycleInterpolator	动画循环播放特定的次数，速率的改变遵循正弦曲线
DecelerateInterpolator	在动画开始的地方速率改变比较快，然后开始变慢
LinearInterpolator	动画以常量速率进行改变
OvershootInterpolator	动画向前甩一定值后再回到原来位置
PathInterpolator	通过定义路径坐标，动画可以按照路径坐标来运行，坐标是单反向，如可以从0 ~ 1 ，再弹回 0.6 后再弹到 0.8，直到最后时间结束。

开发也可以通过实现 Interpolator 接自定义插值器。

Android SDK 使用 Animation 类来表示抽的动画类。补间动画四种基本类型。

动画类型	功能
AlphaAnimation	改变透明度的动画，创建动画时需要指定动画开始和结束的透明度，以及动画持续时间，透明度取值范围是 0 到 1,。
ScaleAnimation	缩小放大的动画，创建动画时需要指定动画开始和结束时在 X 轴和 Y 轴的缩放比，以及动画持续时间；同事由于缩放时以不同的点作为中心产生不同的效果，因此也需要通过 pivotX 和 pivotY 指定缩放中心的坐标
TranslateAnimation	改变位置的动画，创建动画时需要指定动画开始和结束时 X、Y 坐标，以及动画的持续时间
RotateAnimation	旋转动画，创建动画时需要指定动画开始和结束时的旋转角度，以及动画持续时间；同事由于旋转时以不同的点作为中心会产生不同的效果，因此也需要通过 pivotX 和 pivotY 指定旋转中心的坐标

AlphaAnimation

XML 方式就是在 res/anim 目录中新建 XML 文件。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">
    <!--toAlpha 1.0表示完全不透明 0.0表示完全透明 -->
    <alpha
        android:duration="200"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

代码中调用方法。

Animation alpha = AnimationUtils.loadAnimation(this,
                R.anim.alpha);
imageView.setAnimation(alpha);

在代码中实现透明度动画，只需创建一个 AlphaAnimation 实例，然后设置动画持续时间即可。
AlphaAnimation 的构造函数只有两个参数，分别是初始的透明度和结束的透明度。

public AlphaAnimation(float fromAlpha, float toAlpha) {
}

AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1); // 透明度从 0 变化到 1
alphaAnimation.setDuration(500); // 持续时间 500 ms
alphaAnimation.setFillAfter(true); // 动画结束后保留结束状态
imageView.setAnimation(alphaAnimation);

ScaleAnimation

XML 代码实现。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
    <scale
        android:duration="2000"
        android:fromXScale="0.2"
        android:fromYScale="0.2"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.5"
        android:toYScale="1.5" />
</set>

ScaleAnimation 可用的构造函数有三个。

public ScaleAnimation(float fromX, float toX, float fromY, float toY) {
}

public ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY) {
}

public ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) {
}

ScaleAnimation 使用方法。

ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 4.0f, 1.0f, 4.0f,Animation.RELATIVE_TO_SELF, 0.0f,
                Animation.RELATIVE_TO_SELF, 0.0f);
scaleAnimation.setDuration(2000);
scaleAnimation.setFillAfter(true);
imageView.setAnimation(scaleAnimation);

参数	含义
fromX	动画开始时的 X 坐标的伸缩尺寸
toX	动画结束时的 X 坐标的伸缩尺寸
fromY	动画开始时的 Y 坐标的伸缩尺寸
toY	动画结束时的 Y 坐标的伸缩尺寸
pivotX/pivotXValue	缩放动画的中心点 X 坐标
pivoY/pivotYValue	缩放动画的中心点 X 坐标
pivotXType	动画在 X 轴的伸缩模式，也就是中心点相对于哪个物件，取值是 Animation.ABSOLUTE，Animation.Animation.ABSOLUTE，Animation.RELATIVE_TO_PARENT
pivotYType	动画在 Y 轴的伸缩模式，也就是中心点相对于哪个物件，取值是 Animation.ABSOLUTE，Animation.Animation.ABSOLUTE，Animation.RELATIVE_TO_PARENT

TranslateAnimation

XML 实现。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="200"
        android:fromXDelta="0"
        android:toYDelta="0"
        android:toXDelta="0"
        android:fromYDelta="1000" />
</set>

TranslateAnimation 可用的构造函数。

public TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) {
}

public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue) {
}

TranslateAnimation 使用。

TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,
                0f, Animation.RELATIVE_TO_SELF, 2f,Animation.RELATIVE_TO_SELF,
                0f, Animation.RELATIVE_TO_SELF, 2f);
translateAnimation.setDuration(3000);
translateAnimation.setFillAfter(true);
imageView.setAnimation(translateAnimation);

参数	含义
fromXType	动画开始时在 X 轴的位移模式，取值是Animation.ABSOLUTE，Animation.Animation.ABSOLUTE，Animation.RELATIVE_TO_PARENT
fromXValue/fromXDelta	动画开始时 View 的 X 坐标
toXType	动画结束时在 X 轴的位移模式
toXValue/toXDelta	动画结束时 View 的 X 坐标
fromYType	动画开始时在 Y 轴的位移模式，取值是Animation.ABSOLUTE，Animation.Animation.ABSOLUTE，Animation.RELATIVE_TO_PARENT
fromYValue/fromYDelta	动画开始时 View 的 Y 坐标
toYType	动画结束时在 Y 轴的位移模式，取值是Animation.ABSOLUTE，Animation.Animation.ABSOLUTE，Animation.RELATIVE_TO_PARENT
toYValue/toYDelta	动画结束时 View 的 Y 坐标

RotateAnimation

XML 实现。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:repeatMode="restart"
        android:startOffset="0"
        android:toDegrees="360" />
</set>

RotateAnimation 可用的构造函数。

public RotateAnimation(float fromDegrees, float toDegrees) {
}

public RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY) {
}

public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) {
}

RotateAnimation 使用。

RotateAnimation rotateAnimation = new RotateAnimation(0, -720, Animation.RELATIVE_TO_SELF,
                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(1000);
rotateAnimation.setFillAfter(true);
imageView.setAnimation(rotateAnimation);

参数	含义
fromDegrees	动画开始时的旋转角度
toDegrees	动画结束时的旋转角度
pivotXType	动画在 X 轴的旋转模式， 即相对于物体的位置类型，取值是Animation.ABSOLUTE，Animation.Animation.ABSOLUTE，Animation.RELATIVE_TO_PARENT
pivotXValue	动画相对于物件的 X 坐标开始位置
pivotYType	动画在 Y 轴的旋转模式， 即相对于物体的位置类型，取值是Animation.ABSOLUTE，Animation.Animation.ABSOLUTE，Animation.RELATIVE_TO_PARENT
pivotYValue	动画相对于物件的 Y 坐标开始位置

自定义补间动画

自定义补间动画，只需要继承 Animation，并重写这个抽象基类中的 applyTransformation 方法。

public class MyAnimation extends Animation {
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);
    }
}