Android 动画 - 帧动画 & 补间动画

系列文章传送门:

Android 动画 - 帧动画 & 补间动画
Android 动画 - 插值器
Android 动画 - 属性动画

---

在移动开发中，动画可以丰富页面的 UI 效果，一个动画包含以下几个元素

• 控件： 想实现动画的 View 等
• 时长：动画的时长
• 起始值，结束值：动画从开始和结束的值（比如移动，就是坐标值）
• 插值器：定义了动画变化的速率

动画包含三大类型：帧动画（Frame），补间动画（Tween），属性动画（Property）

帧动画 (Frame）

顺序播放一组预先定义好的图。

• 首先在 res/drawable/目录下定义xml，根节点为animation-list，设置动画播放的帧资源
• 使用 AnimationDrawable 加载定义好的资源

<?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/wifi1" android:duration="500"/>
    <item android:drawable="@drawable/wifi2" android:duration="500"/>
    <item android:drawable="@drawable/wifi3" android:duration="500"/>
    <item android:drawable="@drawable/wifi4" android:duration="500"/>
    <item android:drawable="@drawable/wifi5" android:duration="500"/>
</animation-list>

• oneshot 是否只展示一遍，设置为false会不停的循环播放动画
• 根标签下，通过<item>标签对动画中的每一个图片进行声明
  • drawable 要播放的图片
  • duration 展示该图片的时间长度

使用AnimationDrawable 播放动画

view.setBackground(R.drawable.frame_animation);
AnimationDrawable animation = (AnimationDrawable)view.getBackground();
animation.start();

补间动画（Tween ）

补间动画也称作 View 动画，只要定义 View，设置它开始和结束的位置，中间的 View 会由系统自动补齐，不需要准备每一帧动画。
View 动画主要支持四种效果：平移、缩放、旋转、透明度。实现这几种动画的类，都是 Animation 的子类。
使用这种动画可以通过在 xml 中实现，也可以在 类文件中定义。

TranslateAnimation

平移动画，对应标签为 <translate>

• android:fromXDelta 起始 x 坐标
• android:toXDelta 结束 x 坐标
• android:fromYDelta 起始 y 坐标
• android:toYDelta 结束 y 坐标

数值的表示方式如下：
数字：如10，表示当前坐标位置
百分比：如10%，表示当前 View 的坐标 + View 控件长度 10%
百分数p：如10%p，表示当前View的坐标 + 父控件长度 50%

范例：

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

在 java / kotlin 中使用该文件

Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_translate);
view.startAnimation(animation);

其中 duration 是动画的时长，interpolator 是动画的插值器，来定义动画变化的速率，每一种动画都具有这两个属性，还有一些其他的公共属性可配置，可以慢慢尝试。

类实现，等同于上面的配置（后面的几种动画实现方式是一样的）

// view 在 1s 间从(0, 0) 移动到 (100, 100)
TranslateAnimation animation = new TranslateAnimation(0, 0, 100, 100);
animation .setDuration(1000);
animation .setInterpolator(new DecelerateInterpolator());
view.startAnimation(animation);

• TranslateAnimation 还有一个重载的构造函数

/**
 * @param fromXType 动画开始前的X坐标类型。取值范围为 ABSOLUTE（绝对位置）、RELATIVE_TO_SELF（以自身宽或高为参考）、RELATIVE_TO_PARENT（以父控件宽或高为参考）
 * @param fromXValue 动画开始前的X坐标值。当对应的 Type 为ABSOLUTE时，表示绝对位置；否则表示相对位置，1.0表示100%
 * @param toXType 动画结束后的 X 坐标类型
 * @param toXValue 动画结束后的 X 坐标值
 * @param fromYType 动画开始前的 Y 坐标类型
 * @param fromYValue 动画开始前的 Y 坐标值
 * @param toYType 动画结束后的 Y 坐标类型
 * @param toYValue 动画结束后的 Y 坐标值
*/
public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
            int fromYType, float fromYValue, int toYType, float toYValue)

ScaleAnimation

缩放动画，对应标签 <scale>

• fromXScale、 fromYScale 起始缩放值
• toXScale、toYScale 目标缩放值
• pivotX、pivotY 缩放的中心位置

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="2.0"
    android:toYScale="2.0"/>

• 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)

/**
 * @param fromX X坐标初始值
 * @param toX X坐标目标值
 * @param fromY Y坐标初始值
 * @param toY Y坐标目标值
 * @param pivotXType 缩放中心点的X坐标类型。取值范围有三种
 *        Animation.ABSOLUTE（绝对坐标）
 *        Animation.RELATIVE_TO_SELF（相对于自身View)
 *        Animation.RELATIVE_TO_PARENT（相对于父控件的坐标）
 * @param pivotXValue 缩放中心点的X坐标值当对应的 Type 为ABSOLUTE时，表示绝对位置；否则表示相对位置，1.0表示100%
 * @param pivotYType 缩放中心点的Y坐标类型
 * @param pivotYValue 缩放中心点的Y坐标
*/
public ScaleAnimation(float fromX, float toX, float fromY, float toY,  
                      int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

// 以view中心为缩放点，放大两倍
ScaleAnimation animation = new ScaleAnimation(
        1.0f, 2.0f, 1.0f, 2.0f,
        Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f
);
animation.setDuration(1000);
view.startAnimation(animation);

RotateAnimation

旋转动画，对应标签 <rotate>

• fromDegree 旋转的起始角度
• toDegree 旋转的结束角度

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromDegree="0"
      android:toDegree="90"
      android:pivotX = "50%"
      android:pivotY="50%"
      android:duration = "3000"
/>

/**
 * @param fromDegrees 旋转的起始角度
 * @param toDegrees 旋转的结束角度
 * 默认旋转中心点为 （0, 0）
 */
public RotateAnimation(float fromDegrees, float toDegrees) 
 
public RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
    
/**
 * @param fromDegrees 旋转的起始角度
 * @param toDegrees 旋转的结束角度
 * @param pivotXType 
 * @param pivotXValue
 * @param pivotYType
 * @param pivotYValue
 */
public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
        int pivotYType, float pivotYValue) {

AlphaAnimation

透明度动画，对应标签<alpha>

/**
 * @param fromAlpha 动画开始透明度 0~1
 * @param toAlpha 动画结束透明度
 */
public AlphaAnimation(float fromAlpha, float toAlpha) 

AnimationSet

AnimationSet 也继承于 Animation，可以同时处理多组动画，比如在平移的时候旋转等。

构造参数有一个参数，表示所添加的动画是否都共用一个插值器

/**
 * @param shareInterpolator 
 */
public AnimationSet(boolean shareInterpolator) {

常用的方法如下

// 添加动画
animationSet.addAnimation(new TranslateAnimation(0, 0, 100, 100));
// 设置插值器 默认 @android:anim/accelerate_decelerate_interpolator--> android:interpolator="`@android:anim/linear_interpolator`"
animationSet.setInterpolator(new LinearInterpolator());
// 设置动画持续时长，默认 0 --> android:duration="3000"
animationSet.setDuration(3000);
//设置动画结束之后是否保持动画的目标状态，默认 false --> android:fillAfter="true"
animationSet.setFillAfter(true);
//设置动画结束之后是否保持动画开始时的状态，默认 ture --> android:fillBefore="false"
animationSet.setFillBefore(false);
// 设置重复模式，RESTART(1) 顺序播放，REVERSE(2) 重复时逆向播放 android:repeatMode
animationSet.setRepeatMode(AnimationSet.REPEAT);
//设置重复次数，默认 0 --> android:repeatCount=-1
animationSet.setRepeatCount(AnimationSet.INFINITE);
//设置动画延时时间，默认 0 --> android:startOffset="2000"
animationSet.setStartOffset(2000);
//取消动画
animationSet.cancel();
//重置动画
animationSet.reset();

为 View 设置动画

//开始动画
view.startAnimation(animationSet);