android动画笔记

动画

插值器

估值器

动画分类

View动画（补间动画）、帧动画、属性动画View动画（补间动画）包括：平移、旋转、缩放、透明度，View动画是一种渐近式动画

  • 帧动画：图片切换动画
  • 属性动画：通过动态改变对象的属性达到动画效果
  • 设置动画方式：xml方式、java代码方式
  • xml存放位置：View动画（补间动画（res/anim）// 属性动画（res/animator）//帧动画(res/drawable)

一、补间动画

Animation的属性

JAVA方法XML属性解释
setDetachWallpaper(boolean) android:detachWallpaper 是否在壁纸上运行
setDuration(long) android:duration 设置动画持续时间，单位为毫秒
setFillAfter(boolean) android:fillAfter 控件动画结束时控件是否保持动画最后状态
setFillBefore(boolean) android:fillBefore 控件动画结束时控件是否还原到开始动画前的状态
setFillEnable(boolean) android:fillEnable(boolean) 与android:fillBefore效果相同
setInterpolator(boolean) android:interpolator 设置插值器（指定的动画效果，如：回弹等）
setRepeatCount(int) android:repeatCount 重复次数
setRepeatMode(int) android:repeatMode 重复类型：reverse倒序回放、restart从头播放
setStartOffset(long) android:startOffset 调用start函数后等待开行运行的时间，单位为毫秒
setZadjustment(int) android:zAdjustment 表示被设置动画的内容运行时在Z轴的位置(top/bottom/normal)，默认为normal

由于Animation类是其抽象父类，那么我们在使用补间动画无论是哪一种都已经具备了以上属性。 
下面是每一种补间动画的特有属性：

Alpha属性

JAVA方法XML属性解释
AlphaAnimation(float fromAlpha,…) android:fromAlpha 动画开始的透明度（0.0到1.0，0.0是全透明，1.0是不透明）
AlphaAnimation(…, float toAlpha) androdi:toAlpha 动画结束的透明度（同上）

Rotate属性

JAVA方法XML属性解释
RotateAnimation(float fromDegrees, …) android:fromDegress 旋转开始角度，正代表顺时针度数，负代表逆时针度数
RotateAnimation(…, float toDegress) android:toDegress 旋转结束角度（同上）
RotateAnimation(…, …, float pivotX, …) android:pivotX 缩放起点X坐标（数值、百分数、百分数p，譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）
RotateAnimation(…, …, …, pivotY) android:pivotY 缩放起点Y坐标（同上）

Scale属性

JAVA方法XML属性解释
ScaleAnimation(float fromX, …) android:fromXScale 初始X轴缩放比例，1.0表示无变化
ScaleAnimation(…, float toX) android:toXScale 结束X轴缩放比例
ScaleAnimation(…, …, float fromY, …) androd:fromYScale 初始Y轴缩放比例
ScaleAnimation(…, …, …, float toY) android:toYScale 结束Y轴缩放比例
ScaleAnimation(…, float pivotX, …) android:pivotX 缩放起点X轴坐标（同上）
ScaleAnimation(…, float pivotY) android:pivotY 缩放起点Y轴坐标（同上）

Translate属性

JAVA方法XML属性解释
TranslateAnimation(float fromXDelta, …) android:fromXDelta 平移起始点X轴坐标
TranslateAnimation(…, float toXDelta) android:toXDelta 平移结束点X轴坐标
TranslateAnimation(…, float fromYDelta, …) android:fromYDelta 平移起始点Y轴坐标
TranslateAnimation(…, float toYDelta) android:toYDelta 平移结束点Y轴坐标

AnimationSet属性

AnimationSet类比较特殊，因为该类是以上4类的组合容器管理类，没有自己特有的属性，它的属性继承自它的父类：Animation。 
我们在使用的时候需要注意，当我们在对set标签设置属性的时候，那么其标签下的所有控件都会产生影响。

补间动画的使用

我们可以在代码以及XML中使用补间动画，Android官方文档中推荐我们使用XML文件定义补间动画，因为它更可读，可重复使用，并且支持swappable than hard-coding的动画。

4. 具体使用

  • 补间动画的使用方式分为两种：在XML 代码 / Java 代码里设置
  1. 前者优点：动画描述的可读性更好
  2. 后者优点：动画效果可动态创建
  • 下面我将详细平移、缩放、旋转 & 透明度动画的使用步骤

4.1 平移动画（Translate）

设置方法1：在XML 代码中设置

  • 步骤1：在 res/anim的文件夹里创建动画效果.xml文件

此处路径为res/anim/view_animation.xml

  • 步骤2：根据 不同动画效果的语法 设置 不同动画参数，从而实现动画效果。平移动画效果设置具体如下：

view_animation.xml

<?xml version="1.0" encoding="utf-8"?>
// 采用<translate /> 标签表示平移动画
<translate xmlns:android="http://schemas.android.com/apk/res/android"

    // 以下参数是4种动画效果的公共属性,即都有的属性
    android:duration="3000" // 动画持续时间（ms），必须设置，动画才有效果
    android:startOffset ="1000" // 动画延迟开始时间（ms）
    android:fillBefore = “true” // 动画播放完后，视图是否会停留在动画开始的状态，默认为true
    android:fillAfter = “false” // 动画播放完后，视图是否会停留在动画结束的状态，优先于fillBefore值，默认为false
    android:fillEnabled= “true” // 是否应用fillBefore值，对fillAfter值无影响，默认为true
    android:repeatMode= “restart” // 选择重复播放动画模式，restart代表正序重放，reverse代表倒序回放，默认为restart|
    android:repeatCount = “0” // 重放次数（所以动画的播放次数=重放次数+1），为infinite时无限重复
    android:interpolator = @[package:]anim/interpolator_resource // 插值器，即影响动画的播放速度,下面会详细讲
    
    // 以下参数是平移动画特有的属性
    android:fromXDelta="0" // 视图在水平方向x 移动的起始值
    android:toXDelta="500" // 视图在水平方向x 移动的结束值

    android:fromYDelta="0" // 视图在竖直方向y 移动的起始值
    android:toYDelta="500" // 视图在竖直方向y 移动的结束值

    />
  • 步骤3：在Java代码中创建Animation对象并播放动画

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button mButton = (Button) findViewById(R.id.Button);
        // 步骤1:创建 需要设置动画的 视图View
        Animation translateAnimation = AnimationUtils.loadAnimation(this, R.anim.view_animation);
        // 步骤2:创建 动画对象 并传入设置的动画效果xml文件
        mButton.startAnimation(translateAnimation);
        // 步骤3:播放动画
  • 效果图
 
效果图

设置方法2：在 Java 代码中设置

        Button mButton = (Button) findViewById(R.id.Button);
        // 步骤1:创建 需要设置动画的 视图View

        Animation translateAnimation = new TranslateAnimation(0，500，0，500);
        // 步骤2：创建平移动画的对象：平移动画对应的Animation子类为TranslateAnimation
        // 参数分别是：
        // 1. fromXDelta ：视图在水平方向x 移动的起始值
        // 2. toXDelta ：视图在水平方向x 移动的结束值
        // 3. fromYDelta ：视图在竖直方向y 移动的起始值
        // 4. toYDelta：视图在竖直方向y 移动的结束值

        translateAnimation.setDuration(3000);
        // 固定属性的设置都是在其属性前加“set”，如setDuration（）
        mButton.startAnimation(translateAnimation);
        // 步骤3:播放动画
  • 效果图
    与第一种设置方式是一样的。

4.2 缩放动画（Scale）

设置方法1：在XML 代码中设置

  • 步骤1：在 res/anim的文件夹里创建动画效果 .xml 文件

此处为res/anim/view_animation.xml

  • 步骤2：根据 不同动画效果的语法 设置 不同动画参数，从而实现动画效果。缩放动画效果设置具体如下：

view_animation.xml

<?xml version="1.0" encoding="utf-8"?>
// 采用<scale/> 标签表示是缩放动画
<scale  xmlns:android="http://schemas.android.com/apk/res/android"

    // 以下参数是4种动画效果的公共属性,即都有的属性
    android:duration="3000" // 动画持续时间（ms），必须设置，动画才有效果
    android:startOffset ="1000" // 动画延迟开始时间（ms）
    android:fillBefore = “true” // 动画播放完后，视图是否会停留在动画开始的状态，默认为true
    android:fillAfter = “false” // 动画播放完后，视图是否会停留在动画结束的状态，优先于fillBefore值，默认为false
    android:fillEnabled= “true” // 是否应用fillBefore值，对fillAfter值无影响，默认为true
    android:repeatMode= “restart” // 选择重复播放动画模式，restart代表正序重放，reverse代表倒序回放，默认为restart|
    android:repeatCount = “0” // 重放次数（所以动画的播放次数=重放次数+1），为infinite时无限重复
    android:interpolator = @[package:]anim/interpolator_resource // 插值器，即影响动画的播放速度,下面会详细讲
    
    // 以下参数是缩放动画特有的属性
    android:fromXScale="0.0" 
    // 动画在水平方向X的起始缩放倍数
    // 0.0表示收缩到没有；1.0表示正常无伸缩
    // 值小于1.0表示收缩；值大于1.0表示放大

    android:toXScale="2"  //动画在水平方向X的结束缩放倍数

    android:fromYScale="0.0" //动画开始前在竖直方向Y的起始缩放倍数
    android:toYScale="2" //动画在竖直方向Y的结束缩放倍数

    android:pivotX="50%" // 缩放轴点的x坐标
    android:pivotY="50%" // 缩放轴点的y坐标
    // 轴点 = 视图缩放的中心点

    // pivotX pivotY,可取值为数字，百分比，或者百分比p
    // 设置为数字时（如50），轴点为View的左上角的原点在x方向和y方向加上50px的点。在Java代码里面设置这个参数的对应参数是Animation.ABSOLUTE。
    // 设置为百分比时（如50%），轴点为View的左上角的原点在x方向加上自身宽度50%和y方向自身高度50%的点。在Java代码里面设置这个参数的对应参数是Animation.RELATIVE_TO_SELF。
    // 设置为百分比p时（如50%p），轴点为View的左上角的原点在x方向加上父控件宽度50%和y方向父控件高度50%的点。在Java代码里面设置这个参数的对应参数是Animation.RELATIVE_TO_PARENT

    // 两个50%表示动画从自身中间开始，具体如下图

    />
 
示意图
  • 步骤3：在Java代码中创建Animation对象并播放动画

MainActivity.java


        Button mButton = (Button) findViewById(R.id.Button);
        // 步骤1:创建 需要设置动画的 视图View
        Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.view_animation);
        // 步骤2:创建 动画对象 并传入设置的动画效果xml文件
        mButton.startAnimation(scaleAnimation);
        // 步骤3:播放动画

  • 效果图
    下面展示轴点为（50%,50%） & 轴点为（20%,30%）的情况


     
    轴点为（50%,50%）
 
轴点为（20%,30%）

设置方法2：在 Java 代码中设置

        Button mButton = (Button) findViewById(R.id.Button);
        // 步骤1:创建 需要设置动画的 视图View

          Animation rotateAnimation = new ScaleAnimation(0,2,0,2,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        // 步骤2：创建缩放动画的对象 & 设置动画效果：缩放动画对应的Animation子类为RotateAnimation
        // 参数说明:
        // 1. fromX ：动画在水平方向X的结束缩放倍数
        // 2. toX ：动画在水平方向X的结束缩放倍数
        // 3. fromY ：动画开始前在竖直方向Y的起始缩放倍数
        // 4. toY：动画在竖直方向Y的结束缩放倍数
        // 5. pivotXType:缩放轴点的x坐标的模式
        // 6. pivotXValue:缩放轴点x坐标的相对值
        // 7. pivotYType:缩放轴点的y坐标的模式
        // 8. pivotYValue:缩放轴点y坐标的相对值

        // pivotXType = Animation.ABSOLUTE:缩放轴点的x坐标 =  View左上角的原点 在x方向 加上 pivotXValue数值的点(y方向同理)
        // pivotXType = Animation.RELATIVE_TO_SELF:缩放轴点的x坐标 = View左上角的原点 在x方向 加上 自身宽度乘上pivotXValue数值的值(y方向同理)
        // pivotXType = Animation.RELATIVE_TO_PARENT:缩放轴点的x坐标 = View左上角的原点 在x方向 加上 父控件宽度乘上pivotXValue数值的值 (y方向同理)


        scaleAnimation.setDuration(3000);
        // 固定属性的设置都是在其属性前加“set”，如setDuration（）

        mButton.startAnimation(scaleAnimation);
        // 步骤3：播放动画
  • 效果图
    与第一种设置方式是一样的。

4.3 旋转动画（Rotate）

设置方法1：在XML 代码中设置

  • 步骤1：在路径 res/anim的文件夹里创建动画效果 .xml 文件

此处为res/anim/view_animation.xml

  • 步骤2：根据 不同动画效果的语法 设置 不同动画参数，从而实现动画效果。旋转动画效果设置具体如下：

view_animation.xml

<?xml version="1.0" encoding="utf-8"?>
// 采用<rotate/> 标签表示是旋转动画
<rotate xmlns:android="http://schemas.android.com/apk/res/android"

    // 以下参数是4种动画效果的公共属性,即都有的属性
    android:duration="3000" // 动画持续时间（ms），必须设置，动画才有效果
    android:startOffset ="1000" // 动画延迟开始时间（ms）
    android:fillBefore = “true” // 动画播放完后，视图是否会停留在动画开始的状态，默认为true
    android:fillAfter = “false” // 动画播放完后，视图是否会停留在动画结束的状态，优先于fillBefore值，默认为false
    android:fillEnabled= “true” // 是否应用fillBefore值，对fillAfter值无影响，默认为true
    android:repeatMode= “restart” // 选择重复播放动画模式，restart代表正序重放，reverse代表倒序回放，默认为restart|
    android:repeatCount = “0” // 重放次数（所以动画的播放次数=重放次数+1），为infinite时无限重复
    android:interpolator = @[package:]anim/interpolator_resource // 插值器，即影响动画的播放速度,下面会详细讲
    
    // 以下参数是旋转动画特有的属性
    android:duration="1000"
    android:fromDegrees="0" // 动画开始时 视图的旋转角度(正数 = 顺时针，负数 = 逆时针)
    android:toDegrees="270" // 动画结束时 视图的旋转角度(正数 = 顺时针，负数 = 逆时针)
    android:pivotX="50%" // 旋转轴点的x坐标
    android:pivotY="0" // 旋转轴点的y坐标
    // 轴点 = 视图缩放的中心点

// pivotX pivotY,可取值为数字，百分比，或者百分比p
    // 设置为数字时（如50），轴点为View的左上角的原点在x方向和y方向加上50px的点。在Java代码里面设置这个参数的对应参数是Animation.ABSOLUTE。
    // 设置为百分比时（如50%），轴点为View的左上角的原点在x方向加上自身宽度50%和y方向自身高度50%的点。在Java代码里面设置这个参数的对应参数是Animation.RELATIVE_TO_SELF。
    // 设置为百分比p时（如50%p），轴点为View的左上角的原点在x方向加上父控件宽度50%和y方向父控件高度50%的点。在Java代码里面设置这个参数的对应参数是Animation.RELATIVE_TO_PARENT
    // 两个50%表示动画从自身中间开始，具体如下图

    />
 
旋转轴点示意图
  • 步骤3：在Java代码中创建Animation对象并播放动画

MainActivity.java


        Button mButton = (Button) findViewById(R.id.Button);
        // 步骤1:创建 需要设置动画的 视图View
        Animation scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.view_animation);
        // 步骤2:创建 动画对象 并传入设置的动画效果xml文件
        mButton.startAnimation(scaleAnimation);
        // 步骤3:播放动画

  • 效果图


     
    轴点为（50%,50%）

设置方法2：在 Java 代码中设置

        Button mButton = (Button) findViewById(R.id.Button);
        // 步骤1:创建 需要设置动画的 视图View

          Animation rotateAnimation = new RotateAnimation(0,270,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        // 步骤2：创建旋转动画的对象 & 设置动画效果：旋转动画对应的Animation子类为RotateAnimation
        // 参数说明:
        // 1. fromDegrees ：动画开始时 视图的旋转角度(正数 = 顺时针，负数 = 逆时针)
        // 2. toDegrees ：动画结束时 视图的旋转角度(正数 = 顺时针，负数 = 逆时针)
        // 3. pivotXType：旋转轴点的x坐标的模式
        // 4. pivotXValue：旋转轴点x坐标的相对值
        // 5. pivotYType：旋转轴点的y坐标的模式
        // 6. pivotYValue：旋转轴点y坐标的相对值

        // pivotXType = Animation.ABSOLUTE:旋转轴点的x坐标 =  View左上角的原点 在x方向 加上 pivotXValue数值的点(y方向同理)
        // pivotXType = Animation.RELATIVE_TO_SELF:旋转轴点的x坐标 = View左上角的原点 在x方向 加上 自身宽度乘上pivotXValue数值的值(y方向同理)
        // pivotXType = Animation.RELATIVE_TO_PARENT:旋转轴点的x坐标 = View左上角的原点 在x方向 加上 父控件宽度乘上pivotXValue数值的值 (y方向同理)


        rotateAnimation.setDuration(3000);
        // 固定属性的设置都是在其属性前加“set”，如setDuration（）

        mButton.startAnimation(rotateAnimation);
        // 步骤3：播放动画
  • 效果图
    与第一种设置方式是一样的。

4.4 透明度动画（Alpha）

设置方法1：在XML 代码中设置

  • 步骤1：在路径 res/anim的文件夹里创建动画效果 .xml 文件

此处为res/anim/view_animation.xml

  • 步骤2：根据 不同动画效果的语法 设置 不同动画参数，从而实现动画效果。旋转动画效果设置具体如下：

view_animation.xml

<?xml version="1.0" encoding="utf-8"?>
// 采用<alpha/> 标签表示是透明度动画
<alpha xmlns:android="http://schemas.android.com/apk/res/android"

    // 以下参数是4种动画效果的公共属性,即都有的属性
    android:duration="3000" // 动画持续时间（ms），必须设置，动画才有效果
    android:startOffset ="1000" // 动画延迟开始时间（ms）
    android:fillBefore = “true” // 动画播放完后，视图是否会停留在动画开始的状态，默认为true
    android:fillAfter = “false” // 动画播放完后，视图是否会停留在动画结束的状态，优先于fillBefore值，默认为false
    android:fillEnabled= “true” // 是否应用fillBefore值，对fillAfter值无影响，默认为true
    android:repeatMode= “restart” // 选择重复播放动画模式，restart代表正序重放，reverse代表倒序回放，默认为restart|
    android:repeatCount = “0” // 重放次数（所以动画的播放次数=重放次数+1），为infinite时无限重复
    android:interpolator = @[package:]anim/interpolator_resource // 插值器，即影响动画的播放速度,下面会详细讲
    
    // 以下参数是透明度动画特有的属性
    android:fromAlpha="1.0" // 动画开始时视图的透明度(取值范围: -1 ~ 1)
    android:toAlpha="0.0"// 动画结束时视图的透明度(取值范围: -1 ~ 1)

    />
  • 步骤3：在Java代码中创建Animation对象并播放动画

MainActivity.java

        Button mButton = (Button) findViewById(R.id.Button);
        // 步骤1:创建 需要设置动画的 视图View
        Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.view_animation);
        // 步骤2:创建 动画对象 并传入设置的动画效果xml文件
        mButton.startAnimation(alphaAnimation);
        // 步骤3:播放动画
  • 效果图
 
透明度从1-0，即从有 到 无

设置方法2：在 Java 代码中设置

        Button mButton = (Button) findViewById(R.id.Button);
        // 步骤1:创建 需要设置动画的 视图View

      Animation alphaAnimation = new AlphaAnimation(1,0);
        // 步骤2：创建透明度动画的对象 & 设置动画效果：透明度动画对应的Animation子类为AlphaAnimation
        // 参数说明:
        // 1. fromAlpha:动画开始时视图的透明度(取值范围: -1 ~ 1)
        // 2. toAlpha:动画结束时视图的透明度(取值范围: -1 ~ 1)


        alphaAnimation.setDuration(3000);
        // 固定属性的设置都是在其属性前加“set”，如setDuration（）

        mButton.startAnimation(alphaAnimation);
        // 步骤3：播放动画
  • 效果图
    与第一种设置方式是一样的。

4.5 组合动画

  • 上面讲的都是单个动画效果；而实际中很多需求都需要同时使用平移、缩放、旋转 & 透明度4种动画，即组合动画
  • 使用组合动画需要用到标签 < Set/>

Set 对于 Animation，就类似 View 对于 ViewGroup

  • 组合动画同样有XML 代码 / Java 代码两种设置方法,下面会详细说明

4.5.1 在XML 代码中设置

  • 步骤1：在路径 res/anim 的文件夹里创建动画效果 .xml 文件

此处为res/anim/view_animation.xml

  • 步骤2：组合动画的设置方法 同 单个动画设置。具体如下：

view_animation.xml

<?xml version="1.0" encoding="utf-8"?>
// 采用< Set/>标签
<set xmlns:android="http://schemas.android.com/apk/res/android">

// 组合动画同样具备公共属性
    android:duration="3000" // 动画持续时间（ms），必须设置，动画才有效果
    android:startOffset ="1000" // 动画延迟开始时间（ms）
    android:fillBefore = “true” // 动画播放完后，视图是否会停留在动画开始的状态，默认为true
    android:fillAfter = “false” // 动画播放完后，视图是否会停留在动画结束的状态，优先于fillBefore值，默认为false
    android:fillEnabled= “true” // 是否应用fillBefore值，对fillAfter值无影响，默认为true
    android:repeatMode= “restart” // 选择重复播放动画模式，restart代表正序重放，reverse代表倒序回放，默认为restart|
    android:repeatCount = “0” // 重放次数（所以动画的播放次数=重放次数+1），为infinite时无限重复
    android:interpolator = @[package:]anim/interpolator_resource // 插值器，即影响动画的播放速度,下面会详细讲
    
// 组合动画独特的属性
    android:shareinterpolator = “true”
    // 表示组合动画中的动画是否和集合共享同一个差值器
    // 如果集合不指定插值器，那么子动画需要单独设置

// 组合动画播放时是全部动画同时开始
// 如果想不同动画不同时间开始就要使用android:startOffset属性来延迟单个动画播放时间

// 设置旋转动画，语法同单个动画
    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatMode="restart"
        android:repeatCount="infinite"
        />

// 设置平移动画，语法同单个动画
    <translate
        android:duration="10000"
        android:startOffset = “1000”// 延迟该动画播放时间
        android:fromXDelta="-50%p"
        android:fromYDelta="0"
        android:toXDelta="50%p"
        android:toYDelta="0" />

// 设置透明度动画，语法同单个动画
    <alpha
        android:startOffset="7000"
        android:duration="3000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />


// 设置缩放动画，语法同单个动画
    <scale
        android:startOffset="4000"
        android:duration="1000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.5"
        android:toYScale="0.5" />
// 特别注意：
// 1. 在组合动画里scale缩放动画设置的repeatCount（重复播放）和fillBefore（播放完后，视图是否会停留在动画开始的状态）是无效的。
// 2. 所以如果需要重复播放或者回到原位的话需要在set标签里设置
// 3. 但是由于此处rotate旋转动画里已设置repeatCount为infinite，所以动画不会结束，也就看不到重播和回复原位

</set>
  • 步骤3：在Java代码中创建Animation对象并播放动画

MainActivity.java

Button mButton = (Button) findViewById(R.id.Button);
        // 步骤1:创建 需要设置动画的 视图View
        Animation translateAnimation = AnimationUtils.loadAnimation(this, R.anim.view_animation);
        // 步骤2:创建 动画对象 并传入设置的动画效果xml文件
        mButton.startAnimation(translateAnimation);
        // 步骤3:播放动画
  • 效果图
 
组合动画

4.5.2 在 Java 代码中设置


Button mButton = (Button) findViewById(R.id.Button);
        // 创建 需要设置动画的 视图View

        // 组合动画设置
        AnimationSet setAnimation = new AnimationSet(true);
        // 步骤1:创建组合动画对象(设置为true)


        // 步骤2:设置组合动画的属性
        // 特别说明以下情况
        // 因为在下面的旋转动画设置了无限循环(RepeatCount = INFINITE)
        // 所以动画不会结束，而是无限循环
        // 所以组合动画的下面两行设置是无效的
        setAnimation.setRepeatMode(Animation.RESTART);
        setAnimation.setRepeatCount(1);// 设置了循环一次,但无效

        // 步骤3:逐个创建子动画(方式同单个动画创建方式,此处不作过多描述)

        // 子动画1:旋转动画
        Animation rotate = new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        rotate.setDuration(1000);
        rotate.setRepeatMode(Animation.RESTART);
        rotate.setRepeatCount(Animation.INFINITE);

        // 子动画2:平移动画
        Animation translate = new TranslateAnimation(TranslateAnimation.RELATIVE_TO_PARENT,-0.5f,
                TranslateAnimation.RELATIVE_TO_PARENT,0.5f,
                TranslateAnimation.RELATIVE_TO_SELF,0
                ,TranslateAnimation.RELATIVE_TO_SELF,0);
        translate.setDuration(10000);

        // 子动画3:透明度动画
        Animation alpha = new AlphaAnimation(1,0);
        alpha.setDuration(3000);
        alpha.setStartOffset(7000);

        // 子动画4:缩放动画
        Animation scale1 = new ScaleAnimation(1,0.5f,1,0.5f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        scale1.setDuration(1000);
        scale1.setStartOffset(4000);

        // 步骤4:将创建的子动画添加到组合动画里
        setAnimation.addAnimation(alpha);
        setAnimation.addAnimation(rotate);
        setAnimation.addAnimation(translate);
        setAnimation.addAnimation(scale1);

        mButton.startAnimation(setAnimation);
        // 步骤5:播放动画
  • 效果图
    与第一种设置方式是一样的。

5. 监听动画

  • Animation类通过监听动画开始 / 结束 / 重复时刻来进行一系列操作，如跳转页面等等
  • 通过在 Java 代码里setAnimationListener()方法设置
      Animation.addListener(new AnimatorListener() {
          @Override
          public void onAnimationStart(Animation animation) {
              //动画开始时执行
          }
      
           @Override
          public void onAnimationRepeat(Animation animation) {
              //动画重复时执行
          }

         @Override
          public void onAnimationCancel()(Animation animation) {
              //动画取消时执行
          }
    
          @Override
          public void onAnimationEnd(Animation animation) {
              //动画结束时执行
          }
      });

特别注意

若采取上述方法监听动画，每次监听都必须重写4个方法。

  • 背景：有些时候我们并不需要监听动画的所有时刻
  • 问题：但上述方式是必须需要重写4个时刻的方法，这显示太累赘
  • 解决方案：采用动画适配器AnimatorListenerAdapter，解决
    实现接口繁琐 的问题
  • 具体如下：
anim.addListener(new AnimatorListenerAdapter() {  
// 向addListener()方法中传入适配器对象AnimatorListenerAdapter()
// 由于AnimatorListenerAdapter中已经实现好每个接口
// 所以这里不实现全部方法也不会报错
    @Override  
    public void onAnimationStart(Animator animation) {  
    // 如想只想监听动画开始时刻，就只需要单独重写该方法就可以
    }  
});

7. 应用场景

7.1 标准的动画效果

  • 补间动画常用于视图View的一些标准动画效果：平移、旋转、缩放 & 透明度；
  • 除了常规的动画使用，补间动画还有一些特殊的应用场景。

7.2 特殊的应用场景

  • Activity 的切换效果
  • Fragement 的切换效果
  • 视图组（ViewGroup）中子元素的出场效果

7.2.1 Activity 的切换效果

即 Activity 启动 / 退出时的动画效果。

a.启动动画

Intent intent = new Intent (this,Acvtivity.class);
startActivity(intent);
overridePendingTransition(R.anim.enter_anim,R.anim.exit_anim);
// 采用overridePendingTransition（int enterAnim, int exitAnim）进行设置
// enterAnim：从Activity a跳转到Activity b，进入b时的动画效果资源ID
// exitAnim：从Activity a跳转到Activity b，离开a时的动画效果资源Id

// 特别注意
// overridePendingTransition（）必须要在startActivity(intent)后被调用才能生效

b.退出动画

@Override
public void finish(){
    super.finish();
    
    overridePendingTransition(R.anim.enter_anim,R.anim.exit_anim);
// 采用overridePendingTransition（int enterAnim, int exitAnim）进行设置
// enterAnim：从Activity a跳转到Activity b，进入b时的动画效果资源ID
// exitAnim：从Activity a跳转到Activity b，离开a时的动画效果资源Id

// 特别注意
// overridePendingTransition（）必须要在finish()后被调用才能生效

}

对于参数 enterAnim & exitAnim 的资源ID，系统有自带的效果android.R.anim.xxx，如下设置：

Intent intent = new Intent(MainActivity.this, SecActivity.class);
                startActivity(intent);
                // 淡入淡出的动画效果      
                overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out);

               // 从左向右滑动的效果
               overridePendingTransition(android.R.anim.slide_in_left, android.R.anim.slide_out_right);
 
淡入淡出.gif
 
向左向右滑动.gif

除了使用系统自带的切换效果，还可以自定义Activity的切换效果：

此处就用到补间动画了

a. 自定义 淡入淡出 效果

淡入淡出 效果是采用透明度动画（Alpha）。

fade_in.xml（淡入）

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android" >  
  
    <alpha  
        android:duration="1500"  
        android:fromAlpha="0.0"  
        android:toAlpha="1.0" />  
  
</set>

fade_out.xml（淡出）

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android" >  
  
    <alpha  
        android:duration="1500"  
        android:fromAlpha="1.0"  
        android:toAlpha="0.0" />  
  
</set>

在Java代码中设置

Intent intent = new Intent(MainActivity.this, SecActivity.class);
                startActivity(intent);
                // 自定义的淡入淡出动画效果      
                overridePendingTransition(R.anim.fade_in, R.anim.fade_out);

b. 自定义 左右滑动 效果

  • 左右滑动 效果是采用平移动画（Translate）
  • 先了解 Activity 的位置信息，如下图
 
位置信息

从上图可以看出：

  • 以屏幕底边为X轴，屏幕左边为Y轴；
  • 当Activity在X轴 = -100%p时，刚好完全超出屏幕到左边（位置1）
  • 当Activity在X轴 = 0%p时，刚好完全在屏幕内(位置2）
  • 当Activity在X轴 = 100%p时，刚好完全超出屏幕到右边（位置3）

下面自定义一个动画效果：从右滑到左
out_to_left.xml

从中间滑到左边，即从位置2 - 位置1

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <translate
        android:duration="500"
        android:fromXDelta="0%p"
        android:toXDelta="-100%p"

         />

</set>

in_from_right.xml

从右边滑到中间，即从位置3 - 位置2

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <translate
        android:duration="500"
        android:fromXDelta="100%p"
        android:toXDelta="0%p"

        />

</set>

在Java代码中设置效果

Intent intent = new Intent(MainActivity.this, SecActivity.class);
                startActivity(intent)

               // 自定义 从右向左滑动的效果
               overridePendingTransition(R.anim.in_from_right, R.anim.out_to_left);

效果图

 
自定义滑动.gif
  • 关于 缩放和旋转动画 作为Activity的动画效果也是类似的
  • 通过 想象力 能组合 上述4种基本动画 进行动画效果展示

即这种切换效果还能使用补间动画的组合动画

  • 此处仅列出较为简单的切换效果，如想实现更多酷炫的切换动画，请看文章

7.2.2 Fragment动画切换效果

系统自带的动画切换效果

FragmentTransaction fragmentTransaction = mFragmentManager
                .beginTransaction();

fragmentTransaction.setTransition(int transit)；
// 通过setTransition(int transit)进行设置
// transit参数说明
// 1. FragmentTransaction.TRANSIT_NONE：无动画
// 2. FragmentTransaction.TRANSIT_FRAGMENT_OPEN：标准的打开动画效果
// 3. FragmentTransaction.TRANSIT_FRAGMENT_CLOSE：标准的关闭动画效果

// 标准动画设置好后，在Fragment添加和移除的时候都会有。

自定义动画效果

// 采用`FragmentTransavtion`的 `setCustomAnimations（）`进行设置

FragmentTransaction fragmentTransaction = mFragmentManager
                .beginTransaction();

fragmentTransaction.setCustomAnimations(
                R.anim.in_from_right,
                R.anim.out_to_left);

// 此处的自定义动画效果同Activity，此处不再过多描述


7.2.3 视图组（ViewGroup）中子元素的出场效果

  • 视图组（ViewGroup）中子元素可以具备出场时的补间动画效果
  • 常用需求场景：为ListView的 item 设置出场动画
  • 使用步骤：

步骤1：设置子元素的出场动画

res/anim/view_animation.xml

<?xml version="1.0" encoding="utf-8"?>
// 此处采用了组合动画
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    android:duration="3000"

    <alpha
        android:duration="1500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

    <translate
        android:fromXDelta="500"
        android:toXDelta="0"
         />

</set>

步骤2：设置 视图组（ViewGroup）的动画文件

res/ anim /anim_layout.xml

<?xml version="1.0" encoding="utf-8"?>
// 采用LayoutAnimation标签
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:delay="0.5"
    // 子元素开始动画的时间延迟
    // 如子元素入场动画的时间总长设置为300ms
    // 那么 delay = "0.5" 表示每个子元素都会延迟150ms才会播放动画效果
    // 第一个子元素延迟150ms播放入场效果；第二个延迟300ms，以此类推

    android:animationOrder="normal"
    // 表示子元素动画的顺序
    // 可设置属性为：
    // 1. normal ：顺序显示，即排在前面的子元素先播放入场动画
    // 2. reverse：倒序显示，即排在后面的子元素先播放入场动画
    // 3. random：随机播放入场动画

    android:animation="@anim/view_animation"
    // 设置入场的具体动画效果
    // 将步骤1的子元素出场动画设置到这里


    />

步骤3：为视图组（ViewGroup）指定andorid:layoutAnimation属性
指定的方式有两种： XML / Java代码设置

方式1：在 XML 中指定

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical" >
    <ListView
        android:id="@+id/listView1"
        android:layoutAnimation="@anim/anim_layout"
        // 指定layoutAnimation属性用以指定子元素的入场动画
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

方式2：在Java代码中指定

这样就不用额外设置res/ anim /anim_layout.xml该xml文件了

        ListView lv = (ListView) findViewById(R.id.listView1);

        Animation animation = AnimationUtils.loadAnimation(this,R.anim.anim_item);
         // 加载子元素的出场动画

        LayoutAnimationController controller = new LayoutAnimationController(animation);
        controller.setDelay(0.5f);
        controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
       // 设置LayoutAnimation的属性

        lv.setLayoutAnimation(controller);
        // 为ListView设置LayoutAnimation的属性

上述二者的效果是一样的。

实例效果

 
ListView出场动画效果图

至此，Android 动画中的补间动画的所有知识点都讲解完毕。

二、帧动画

帧动画的实现方式有两种：

一、在res/drawable文件夹下新建animation-list的XML实现帧动画

1、首先在res/drawable文件夹下添加img00-img24共25张图片

2、新建frame_anim.xml

[html] view plain copy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:oneshot="true" >  
  4.   
  5.     <!-- animation-list 帧动画 -->  
  6.     <!-- android:oneshot的值为 false代表播放多次，true代表只播放一次 -->  
  7.     <!-- duration代表每张图片的播放时间 ,定义一个持续时间为50毫秒的动画帧 -->  
  8.     <item  
  9.         android:drawable="@drawable/img00"  
  10.         android:duration="50"/>  
  11.     <item  
  12.         android:drawable="@drawable/img01"  
  13.         android:duration="50"/>  
  14.     <item  
  15.         android:drawable="@drawable/img02"  
  16.         android:duration="50"/>  
  17.     <item  
  18.         android:drawable="@drawable/img03"  
  19.         android:duration="50"/>  
  20.     <item  
  21.         android:drawable="@drawable/img04"  
  22.         android:duration="50"/>  
  23.     <item  
  24.         android:drawable="@drawable/img05"  
  25.         android:duration="50"/>  
  26.     <item  
  27.         android:drawable="@drawable/img06"  
  28.         android:duration="50"/>  
  29.     <item  
  30.         android:drawable="@drawable/img07"  
  31.         android:duration="50"/>  
  32.     <item  
  33.         android:drawable="@drawable/img08"  
  34.         android:duration="50"/>  
  35.     <item  
  36.         android:drawable="@drawable/img09"  
  37.         android:duration="50"/>  
  38.     <item  
  39.         android:drawable="@drawable/img10"  
  40.         android:duration="50"/>  
  41.     <item  
  42.         android:drawable="@drawable/img11"  
  43.         android:duration="50"/>  
  44.     <item  
  45.         android:drawable="@drawable/img12"  
  46.         android:duration="50"/>  
  47.     <item  
  48.         android:drawable="@drawable/img13"  
  49.         android:duration="50"/>  
  50.     <item  
  51.         android:drawable="@drawable/img14"  
  52.         android:duration="50"/>  
  53.     <item  
  54.         android:drawable="@drawable/img15"  
  55.         android:duration="50"/>  
  56.     <item  
  57.         android:drawable="@drawable/img16"  
  58.         android:duration="50"/>  
  59.     <item  
  60.         android:drawable="@drawable/img17"  
  61.         android:duration="50"/>  
  62.     <item  
  63.         android:drawable="@drawable/img18"  
  64.         android:duration="50"/>  
  65.     <item  
  66.         android:drawable="@drawable/img19"  
  67.         android:duration="50"/>  
  68.     <item  
  69.         android:drawable="@drawable/img20"  
  70.         android:duration="50"/>  
  71.     <item  
  72.         android:drawable="@drawable/img21"  
  73.         android:duration="50"/>  
  74.     <item  
  75.         android:drawable="@drawable/img22"  
  76.         android:duration="50"/>  
  77.     <item  
  78.         android:drawable="@drawable/img23"  
  79.         android:duration="50"/>  
  80.     <item  
  81.         android:drawable="@drawable/img24"  
  82.         android:duration="50"/>  
  83.   
  84. </animation-list>  


3、在activity_main中添加控件

[html] view plain copy
 
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     tools:context="com.havorld.frameanimation.MainActivity" >  
  6.   
  7.     <ImageView  
  8.         android:id="@+id/imageView"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:layout_centerInParent="true" />  
  12.     <!-- android:background="@drawable/frame_anim" -->  
  13.   
  14.     <LinearLayout  
  15.         android:layout_width="match_parent"  
  16.         android:layout_height="wrap_content"  
  17.         android:layout_alignParentBottom="true"  
  18.         android:orientation="horizontal"  
  19.         android:padding="10dp" >  
  20.   
  21.         <Button  
  22.             android:id="@+id/start"  
  23.             android:layout_width="0dp"  
  24.             android:layout_height="wrap_content"  
  25.             android:layout_weight="1"  
  26.             android:text="播放" />  
  27.   
  28.         <Button  
  29.             android:id="@+id/stop"  
  30.             android:layout_width="0dp"  
  31.             android:layout_height="wrap_content"  
  32.             android:layout_weight="1"  
  33.             android:text="停止" />  
  34.     </LinearLayout>  
  35.   
  36. </RelativeLayout>  


4、在代码中获取并开启帧动画

[java] view plain copy
 
  1. public class MainActivity extends Activity implements OnClickListener {  
  2.   
  3.     private ImageView imageView;  
  4.     private AnimationDrawable animationDrawable;  
  5.   
  6.     @Override  
  7.     protected void onCreate(Bundle savedInstanceState) {  
  8.         super.onCreate(savedInstanceState);  
  9.         setContentView(R.layout.activity_main);  
  10.   
  11.         imageView = (ImageView) findViewById(R.id.imageView);  
  12.         findViewById(R.id.start).setOnClickListener(this);  
  13.         findViewById(R.id.stop).setOnClickListener(this);  
  14.   
  15.         setXml2FrameAnim1();  
  16.         // setXml2FrameAnim2();  
  17.   
  18.     }  
  19.   
  20.     /** 
  21.      * 通过XML添加帧动画方法一 
  22.      */  
  23.     private void setXml2FrameAnim1() {  
  24.   
  25.         // 把动画资源设置为imageView的背景,也可直接在XML里面设置  
  26.         imageView.setBackgroundResource(R.drawable.frame_anim);  
  27.         animationDrawable = (AnimationDrawable) imageView.getBackground();  
  28.     }  
  29.   
  30.     /** 
  31.      * 通过XML添加帧动画方法二 
  32.      */  
  33.     private void setXml2FrameAnim2() {  
  34.   
  35.         // 通过逐帧动画的资源文件获得AnimationDrawable示例  
  36.         animationDrawable = (AnimationDrawable) getResources().getDrawable(  
  37.                 R.drawable.frame_anim);  
  38.         imageView.setBackground(animationDrawable);  
  39.     }  
  40.    
  41.     @Override  
  42.     public void onClick(View v) {  
  43.   
  44.         switch (v.getId()) {  
  45.         case R.id.start:  
  46.             if (animationDrawable != null && !animationDrawable.isRunning()) {  
  47.                 animationDrawable.start();  
  48.             }  
  49.             break;  
  50.         case R.id.stop:  
  51.             if (animationDrawable != null && animationDrawable.isRunning()) {  
  52.                 animationDrawable.stop();  
  53.             }  
  54.             break;  
  55.   
  56.         default:  
  57.             break;  
  58.         }  
  59.     }  
  60.   
  61. }  


二、通过代码实现帧动画

[java] view plain copy
 
  1. /** 
  2.  * 通过代码添加帧动画方法 
  3.  */  
  4. private void setSrc2FrameAnim() {  
  5.   
  6.     animationDrawable = new AnimationDrawable();  
  7.     // 为AnimationDrawable添加动画帧  
  8.     animationDrawable.addFrame(  
  9.             getResources().getDrawable(R.drawable.img00), 50);  
  10.     animationDrawable.addFrame(  
  11.             getResources().getDrawable(R.drawable.img01), 50);  
  12.     animationDrawable.addFrame(  
  13.             getResources().getDrawable(R.drawable.img02), 50);  
  14.     animationDrawable.addFrame(  
  15.             getResources().getDrawable(R.drawable.img03), 50);  
  16.     animationDrawable.addFrame(  
  17.             getResources().getDrawable(R.drawable.img04), 50);  
  18.     animationDrawable.addFrame(  
  19.             getResources().getDrawable(R.drawable.img05), 50);  
  20.     animationDrawable.addFrame(  
  21.             getResources().getDrawable(R.drawable.img06), 50);  
  22.     animationDrawable.addFrame(  
  23.             getResources().getDrawable(R.drawable.img07), 50);  
  24.     animationDrawable.addFrame(  
  25.             getResources().getDrawable(R.drawable.img08), 50);  
  26.     animationDrawable.addFrame(  
  27.             getResources().getDrawable(R.drawable.img09), 50);  
  28.     animationDrawable.addFrame(  
  29.             getResources().getDrawable(R.drawable.img10), 50);  
  30.     animationDrawable.addFrame(  
  31.             getResources().getDrawable(R.drawable.img11), 50);  
  32.     animationDrawable.addFrame(  
  33.             getResources().getDrawable(R.drawable.img12), 50);  
  34.     animationDrawable.addFrame(  
  35.             getResources().getDrawable(R.drawable.img13), 50);  
  36.     animationDrawable.addFrame(  
  37.             getResources().getDrawable(R.drawable.img14), 50);  
  38.     animationDrawable.addFrame(  
  39.             getResources().getDrawable(R.drawable.img15), 50);  
  40.     animationDrawable.addFrame(  
  41.             getResources().getDrawable(R.drawable.img16), 50);  
  42.     animationDrawable.addFrame(  
  43.             getResources().getDrawable(R.drawable.img17), 50);  
  44.     animationDrawable.addFrame(  
  45.             getResources().getDrawable(R.drawable.img18), 50);  
  46.     animationDrawable.addFrame(  
  47.             getResources().getDrawable(R.drawable.img19), 50);  
  48.     animationDrawable.addFrame(  
  49.             getResources().getDrawable(R.drawable.img20), 50);  
  50.     animationDrawable.addFrame(  
  51.             getResources().getDrawable(R.drawable.img21), 50);  
  52.     animationDrawable.addFrame(  
  53.             getResources().getDrawable(R.drawable.img22), 50);  
  54.     animationDrawable.addFrame(  
  55.             getResources().getDrawable(R.drawable.img23), 50);  
  56.     animationDrawable.addFrame(  
  57.             getResources().getDrawable(R.drawable.img24), 50);  
  58.     // 设置为循环播放  
  59.     animationDrawable.setOneShot(false);  
  60.     imageView.setBackground(animationDrawable);  
  61. }  

点击下载源码

三、属性动画

1. 属性动画出现的原因

  • 属性动画（Property Animation）是在 Android 3.0（API 11）后才提供的一种全新动画模式

  • 那么为什么要提供属性动画（Property Animation）？

1.1 背景

实现动画效果在Android开发中非常常见，因此Android系统一开始就提供了两种实现动画的方式：

  • 逐帧动画（Frame Animation）
  • 补间动画（ Tweened animation ）

1.2 问题

逐帧动画 & 补间动画存在一定的缺点：

a. 作用对象局限：View

即补间动画 只能够作用在视图View上，即只可以对一个Button、TextView、甚至是LinearLayout、或者其它继承自View的组件进行动画操作，但无法对非View的对象进行动画操作

  1. 有些情况下的动画效果只是视图的某个属性 & 对象而不是整个视图；
  2. 如，现需要实现视图的颜色动态变化，那么就需要操作视图的颜色属性从而实现动画效果，而不是针对整个视图进行动画操作
b. 没有改变View的属性，只是改变视觉效果
  • 补间动画只是改变了View的视觉效果，而不会真正去改变View的属性。
  • 如，将屏幕左上角的按钮 通过补间动画 移动到屏幕的右下角
  • 点击当前按钮位置（屏幕右下角）是没有效果的，因为实际上按钮还是停留在屏幕左上角，补间动画只是将这个按钮绘制到屏幕右下角，改变了视觉效果而已。
c. 动画效果单一
  • 补间动画只能实现平移、旋转、缩放 & 透明度这些简单的动画需求
  • 一旦遇到相对复杂的动画效果，即超出了上述4种动画效果，那么补间动画则无法实现。

即在功能 & 可扩展性有较大局限性

1.3 问题

  • 为了解决补间动画的缺陷，在 Android 3.0（API 11）开始，系统提供了一种全新的动画模式：属性动画（Property Animation）
  • 下面，我将全面介绍属性动画（Property Animation）

2. 简介

  • 作用对象：任意 Java 对象

不再局限于 视图View对象

  • 实现的动画效果：可自定义各种动画效果

不再局限于4种基本变换：平移、旋转、缩放 & 透明度

3. 特点

  • 作用对象进行了扩展：不只是View对象，甚至没对象也可以
  • 动画效果：不只是4种基本变换，还有其他动画效果
  • 作用领域：API11后引入的

4. 工作原理

  • 在一定时间间隔内，通过不断对值进行改变，并不断将该值赋给对象的属性，从而实现该对象在该属性上的动画效果

可以是任意对象的任意属性

属性动画中主要的类如下图所示：

ValueAnimator, ObjectAnimator, AnimatorSet。这三种类型

它上面包含了三个元素，set、objectAnimator、animator分别对应AnimatorSet、ObjectAnimator、ValueAnimator三个对象，这三个对象前面已经介绍过了：Android属性动画之ValueAnimator和Android属性动画之ObjectAnimator和AnimatorSet。

下面来分别介绍一下这几个元素。

1、<set>

它是一个集合，包含了其他的元素，包括, 和其他的元素，它代表的就是一个AnimatorSet对象。

它具有如下属性：

android:ordering 
指定集合中动画播放的顺序。

它具有两种类型的值：sequentially和together。第一个表示顺序执行，第二个表示同时执行。默认是together。

2、<objectAnimator> 
它指定一个对象的属性动画，表示一个ObjectAnimator对象。

它具有如下属性： 
android:propertyName 
属性名称，例如一个view对象的”alpha”和”backgroundColor”。

android:valueType 
变化值类型 
它有两种值：intType和floatType，第二种为默认值

属性作用数值类型
Alpha 控制View的透明度 float
TranslationX 控制X方向的位移 float
TranslationY 控制Y方向的位移 float
ScaleX 控制X方向的缩放倍数 float
ScaleY 控制Y方向的缩放倍数 float
Rotation 控制以屏幕方向为轴的旋转度数 float
RotationX 控制以X轴为轴的旋转度数 float
RotationY 控制以Y轴为轴的旋转度数 float

 

android:valueFrom 
变化开始值

android:valueTo 
变化结束值

android:duration 
持续时间

android:startOffset 
动画开始延迟时间

android:repeatCount 
重复次数，-1表示无限重复

android:repeatMode 
重复模式，前提是android:repeatCount为-1 
它有两种值：”reverse”和”repeat”，第一个表示反向重复，第二个为顺序重复。

3、<animator>

它对应的就是ValueAnimator对象。

它具有如下属性：

android:valueFrom

android:valueTo

android:duration

android:startOffset

android:repeatCount

android:repeatMode

android:valueType

这个跟上面一样，就不解释了，需要注意的是，在前面 Android属性动画之ValueAnimator中，我们就知道，使用这样方式需要自己去进行属性值的修改，它里面没有指定属性，我们使用animator.addUpdateListener去获取变化值，然后自己修改对应属性的值。

 

Animator

属性动画主要的类都在android.animation命名空间下，Animator是属性动画的基类，其是一个抽象类，该类定义了许多重要的方法，如下所示：

  • setDuration(long duration)

通过setDuration方法可以设置动画总共的持续时间，以毫秒为单位。

  • start()

通过start方法可以启动动画，动画启动后不一定会立即运行。如果之前通过调用setStartDelay方法设置了动画延迟时间，那么会在经过延迟时间之后再运行动画；如果没有设置过动画的延迟时间，那么动画在调用了start()方法之后会立即运行。在调用了start()方法之后，动画的isStarted()方法就会返回true；在动画真正运行起来之后，动画的isRunning()方法就会返回true，这时候动画才会调用TimeInterpolator才开始工作计算属性在某个时刻的值。调用动画的start()方法所在的线程必须绑定了一个Looper对象，如果没有绑定就会报错。当然，UI线程（即主线程）早就默认绑定了一个Looper对象，所以在主线程中我们就无需担心这个问题。如果我们想在一个View上使用属性动画，那么我们应该保证我们是在UI线程上调用的动画的start()方法。start()方法运行后会触发动画监听器AnimatorListener的onAnimationStart方法的执行。

  • setStartDelay(long startDelay)

可以通过调用setStartDelay方法设置动画的延迟运行时间，比如调用setStartDelay(1000)意味着动画在执行了start()方法1秒之后才真正运行，这种情况下，在调用了start()方法0.5秒之后，isStarted()方法返回true，表示动画已经启动了，但是isRunning()方法返回false，表示动画还未真正运行；在start()方法执行1秒之后，isStarted()方法还是返回true，isRunning()方法也返回了true，表示动画已经真正开始运行了。通过调用getStartDelay()方法可以返回我们设置的动画延迟启动时间，默认值是0。

  • setInterpolator(TimeInterpolator value)

我们可以通过调用setInterpolator方法改变动画所使用的时间插值器，由于视图动画也需要使用时间插值器，所以我们可以使用android.view.animation命名空间下的一系列插值器，将其与属性动画一起工作。通过动画的getInterpolator方法可以获取我们设置的时间插值器。

  • setTarget(Object target)

可以通过调用动画的setTarget方法设置其要操作的对象，这样可以更新该对象的某个属性值。实际上，该方法对于ValueAnimator作用不大，因为ValueAnimator不是直接与某个对象打交道的。setTarget方法对于ObjectAnimator作用较大，因为ObjectAnimator需要绑定某个要操作的对象，下面会详细介绍。

  • pause()

Android中API Level 19在Animator中加入了pause()方法，该方法可以暂停动画的执行。调用pause()方法的线程必须与调用start()方法的线程是同一个线程。如果动画还没有执行start()或者动画已经结束了，那么调用pause()方法没有任何影响，直接被忽略。当执行了pause()方法后，动画的isPaused()方法会返回true。pause()方法运行后会触发动画监听器AnimatorPauseListener的onAnimationPause方法的执行。

  • resume()

如果动画通过调用pause()方法暂停了，那么之后可以通过调用resume()方法让动画从上次暂停的地方继续运行。resume()方法也是从API Level 19引入的，并且调用resume()方法的线程必须与调用start()方法的线程是同一个线程。如果动画没有处于暂停状态（即isPaused()返回false），那么调用resume()方法会被忽略。resume()方法运行后会触发动画监听器AnimatorPauseListener的onAnimationResume方法的执行。

  • end

end()方法执行后，动画会结束运行，直接从当前状态跳转到最终的完成状态，并将属性值分配成动画的终止值，并触发动画监听器AnimatorListener的onAnimationEnd方法的执行。

  • cancel()

cancel()方法执行后，动画也会结束运行，但是与调用end方法不同的是，其不会将属性值分配给动画的终止值。比如一个动画在400ms内将对象的x属性从0渐变为40，当运行到第200ms时调用了cancel()方法，那么属性x的最终值是20，而不是40，这是与调用end()方法不同的，如果在第200ms调用了end()方法，那么属性x的最终值是40。调用cancel()方法后，会先触发AnimatorListener的onAnimationCancel方法的执行，然后触发onAnimationEnd方法的执行。

  • clone()

Animator实现了java.lang.Cloneable接口。Animator的clone()方法会对动画进行拷贝，但是该方法默认实现的只是浅拷贝，子类可以重写该方法以实现深拷贝。

  • addListener (Animator.AnimatorListener listener)

可以通过addListener方法向Animator添加动画监听器，该方法接收的是AnimatorListener接口类型的参数，其具有四个方法：onAnimationStart、onAnimationCancel、onAnimationEnd、onAnimationRepeat。我们上面已经介绍了前三个方法，onAnimationRepeat方法会在动画在重复播放的时候被回调。Android中的AnimatorListenerAdapter类是个抽象类，其实现了AnimatorListener接口，并为所有方法提供了一个空实现。

  • addPauseListener (Animator.AnimatorPauseListener listener)

可以通过addPauseListener方法可以向Animator添加动画暂停相关的监听器，该方法接收的是AnimatorPauseListener接口类型的参数，具有两个方法：onAnimationPause和onAnimationResume，上面已经提到过，在此不再赘述。AnimatorListenerAdapter同样也实现了AnimatorPauseListener接口，并为所有方法提供了一个空实现。

ValueAnimator

ValueAnimator继承自抽象类Animator。要让属性动画渐变式地更改对象中某个属性的值，可分两步操作：第一步，动画需要计算出某一时刻属性值应该是多少；第二步，需要将计算出的属性值赋值给动画的属性。ValueAnimator只实现了第一步，也就是说ValueAnimator只负责以动画的形式不断计算不同时刻的属性值，但需要我们开发者自己写代码将计算出的值通过对象的setXXX等方法更新对象的属性值。

ValueAnimator中有两个比较重要的属性，一个是TimeInterpolator类型的属性，另一个是TypeEvaluator类型的属性。TimeInterpolator指的就是时间插值器，在上面我们已经介绍过，在此不再赘述。TypeEvaluator是什么呢？TypeEvaluator表示的是ValueAnimator对哪种类型的值进行动画处理。ValueAnimator提供了四个静态方法ofFloat()、ofInt()、ofArgb()和ofObject()，通过这四个方法可以对不同种类型的值进行动画处理，这四个方法对应了四种TypeEvaluator，下面会详细说明。

  • public static ValueAnimator ofFloat (float… values)

ofFloat方法接收一系列的float类型的值，其内部使用了FloatEvaluator。通过该方法ValueAnimator可以对float值进行动画渐变，其使用方法如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0f, 500f);
 
 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
   @Override
   public void onAnimationUpdate(ValueAnimator animation) {
     float deltaY = (float)animation.getAnimatedValue();
     textView.setTranslationY(deltaY);
   }
 });
 
 //默认duration是300毫秒
 valueAnimator.setDuration(3000);
 valueAnimator.start();

其效果如下所示： 

我们通过构造函数指定了动画的起始值为0，终止值为500，动画的默认持续时间是300毫秒，我们通过setDuration()方法设置为3000毫秒。该动画会在3秒内，将值从0到500动画渐变。ValueAnimator提供了一个addUpdateListener方法，可以通过该方法向其添加AnimatorUpdateListener类型的监听器。AnimatorUpdateListener有一个onAnimationUpdate方法，ValueAnimator会每隔一定时间（默认间隔10ms）计算属性的值，每当计算的时候就会回调onAnimationUpdate方法。在该方法中，我们通过调用ValueAnimator的getAnimatedValue()方法获取到当前动画计算出的属性值，然后我们将该值传入textView的setTranslationY()方法中，从而更新了textView的位置，这样就通过ValueAnimator以动画的形式移动textView。

  • public static ValueAnimator ofInt (int… values)

ofInt方法与ofFloat方法很类似，只不过ofInt方法接收int类型的值，ofInt方法内部使用了IntEvaluator，其具体使用可参考上面ofFloat的使用代码，在此不再赘述。

  • public static ValueAnimator ofArgb (int… values)

从API Level 21开始，ValueAnimator中加入了ofArgb方法，该方法接收一些列代表了颜色的int值，其内部使用了ArgbEvaluator，可以用该方法实现将一个颜色动画渐变到另一个颜色，我们从中可以不断获取中间动画产生的颜色值。你可能纳闷，既然传入的还是int值，那直接用ofInt方法不就行了吗，干嘛还要新增一个ofArgb方法呢？实际上用ofInt方法是不能完成颜色动画渐变的。我们知道一个int值包含四个字节，在Android中第一个字节代表Alpha分量，第二个字节代表Red分量，第三个字节代表Green分量，第四个字节代表Blue分量，且我们常用16进制表示颜色，这样看起来更明显易懂一些，比如int值0xffff0000表示的红色，0xff00ff00表示的是绿色，最前面的ff表示的是Alpha。ofArgb方法会通过ArgbEvaluator将颜色拆分成四个分量，然后分别对各个分量进行动画计算，然后将四个计算完的分量再重新组合成一个表示颜色的int值，这就是ofArgb方法的工作原理。使用方法如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//ValueAnimator.ofArgb()方法是在API Level 21中才加入的
 if(Build.VERSION.SDK_INT >= 21){
   //起始颜色为红色
   int startColor = 0xffff0000;
   //终止颜色为绿色
   int endColor = 0xff00ff00;
   ValueAnimator valueAnimator = ValueAnimator.ofArgb(startColor, endColor);
   valueAnimator.setDuration(3000);
   valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
     @Override
     public void onAnimationUpdate(ValueAnimator animation) {
       int color = (int)animation.getAnimatedValue();
       textView.setBackgroundColor(color);
     }
   });
   valueAnimator.start();
 }

效果如下所示： 

我们将TextView的颜色通过动画从红色渐变到绿色。

  • public static ValueAnimator ofObject (TypeEvaluator evaluator, Object… values)

由于我们要进行动画处理的值是各种各样的，可能不是float、int或颜色值，那我们怎么使用属性动画呢？为此，ValueAnimator提供了一个ofObject方法，该方法接收一个TypeEvaluator类型的参数，我们需要实现该接口TypeEvaluator的evaluate方法，只要我们实现了TypeEvaluator接口，我们就能通过ofObject方法处理任意类型的数据。我们之前提到ofArgb方法是从API Level 21才引入的，如果我们想在之前的这之前的版本中使用ofArgb的功能，怎么办呢？我们可以扩展TypeEvaluator，从而通过ofObject方法实现ofArgb方法的逻辑，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//起始颜色为红色
int startColor = 0xffff0000;
//终止颜色为绿色
int endColor = 0xff00ff00;
ValueAnimator valueAnimator = ValueAnimator.ofObject(new TypeEvaluator() {
  @Override
  public Object evaluate(float fraction, Object startValue, Object endValue) {
    //从初始的int类型的颜色值中解析出Alpha、Red、Green、Blue四个分量
    int startInt = (Integer) startValue;
    int startA = (startInt >> 24) & 0xff;
    int startR = (startInt >> 16) & 0xff;
    int startG = (startInt >> 8) & 0xff;
    int startB = startInt & 0xff;
 
    //从终止的int类型的颜色值中解析出Alpha、Red、Green、Blue四个分量
    int endInt = (Integer) endValue;
    int endA = (endInt >> 24) & 0xff;
    int endR = (endInt >> 16) & 0xff;
    int endG = (endInt >> 8) & 0xff;
    int endB = endInt & 0xff;
 
    //分别对Alpha、Red、Green、Blue四个分量进行计算，
    //最终合成一个完整的int型的颜色值
    return (int)((startA + (int)(fraction * (endA - startA))) << 24) |
        (int)((startR + (int)(fraction * (endR - startR))) << 16) |
        (int)((startG + (int)(fraction * (endG - startG))) << 8) |
        (int)((startB + (int)(fraction * (endB - startB))));
  }
}, startColor, endColor);
valueAnimator.setDuration(3000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
    int color = (int)animation.getAnimatedValue();
    textView.setBackgroundColor(color);
  }
});
valueAnimator.start();

以上代码实现的效果与ofArgb实现的效果是一样的，都是将TextView从红色渐变到绿色，就不再附图了，但是我们可以在API Level 11及以后的版本中都可以使用以上ofObject的代码，通用性更强。

ObjectAnimator

ObjectAnimator继承自ValueAnimator。我们之前提到，要让属性动画渐变式地更改对象中某个属性的值，可分两步操作：第一步，动画需要计算出某一时刻属性值应该是多少；第二步，需要将计算出的属性值赋值给动画的属性。ValueAnimator只实现了第一步，也就是说ValueAnimator只负责以动画的形式不断计算不同时刻的属性值，但需要我们开发者自己写代码在动画监听器AnimatorUpdateListener的onAnimationUpdate方法中将计算出的值通过对象的setXXX等方法更新对象的属性值。ObjectAnimator比ValueAnimator更进一步，其会自动调用对象的setXXX方法更新对象中的属性值。

ObjectAnimator重载了ofFloat()、ofInt()、ofArgb()和ofObject()等静态方法，我们下面依次说明。

  • ofFloat(Object target, String propertyName, float… values)

使用方法如下所示：

1
2
3
4
5
float value1 = 0f;
 float value2 = 500f;
 final ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView, "translationY", value1, value2);
 objectAnimator.setDuration(3000);
 objectAnimator.start();

以上代码实现的效果与通过ValueAnimator的ofFloat方法实现的效果相同，此处不再附图，但是可以看出使用ObjectAnimator代码更简洁。在构造函数中，我们将textView作为target传递给ObjectAnimator，然后指定textView要变化的属性是translationY，最后指定渐变范围是从0到500。当动画开始时，ObjectAnimator就会不断调用textView的setTranslationY方法以更新其值。我们此处演示的是ObjectAnimator与View一起工作，其实ObjectAnimator可以与任意的Object对象工作。如果要更新某个对象中名为propery的属性，那么该Object对象必须具有一个setProperty的setter方法可以让ObjectAnimator调用。在ofFloat方法最后如果只填入了一个float值，那么ObjectAnimator需要调用对象的getXXX方法获取对象初始的属性值，然后从该初始的属性值渐变到终止值。

  • ofInt(Object target, String propertyName, int… values)

参见ofFloat的使用方法。

  • ofArgb(Object target, String propertyName, int… values)

使用代码如下所示：

1
2
3
4
5
6
7
8
//ObjectAnimator.ofArgb()方法是在API Level 21中才加入的
 if(Build.VERSION.SDK_INT >= 21){
   int startColor = 0xffff0000;
   int endColor = 0xff00ff00;
   ObjectAnimator objectAnimator = ObjectAnimator.ofArgb(textView, "backgroundColor", startColor, endColor);
   objectAnimator.setDuration(3000);
   objectAnimator.start();
 }

效果图参见ValueAnimator中对应的图片。

ofObject(Object target, String propertyName, TypeEvaluator evaluator, Object… values) 
使用代码如下所示：

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
int startColor = 0xffff0000;
 int endColor = 0xff00ff00;
 ObjectAnimator objectAnimator = ObjectAnimator.ofObject(textView, "backgroundColor", new TypeEvaluator() {
   @Override
   public Object evaluate(float fraction, Object startValue, Object endValue) {
     int startInt = (Integer) startValue;
     int startA = (startInt >> 24) & 0xff;
     int startR = (startInt >> 16) & 0xff;
     int startG = (startInt >> 8) & 0xff;
     int startB = startInt & 0xff;
 
     int endInt = (Integer) endValue;
     int endA = (endInt >> 24) & 0xff;
     int endR = (endInt >> 16) & 0xff;
     int endG = (endInt >> 8) & 0xff;
     int endB = endInt & 0xff;
 
     return (int)((startA + (int)(fraction * (endA - startA))) << 24) |
         (int)((startR + (int)(fraction * (endR - startR))) << 16) |
         (int)((startG + (int)(fraction * (endG - startG))) << 8) |
         (int)((startB + (int)(fraction * (endB - startB))));
   }
 }, startColor, endColor);
 objectAnimator.setDuration(3000);
 objectAnimator.start();

AnimatorSet

AnimatorSet继承自Animator。AnimatorSet表示的是动画的集合，我们可以通过AnimatorSet把多个动画集合在一起，让其串行或并行执行，从而创造出复杂的动画效果。

我们想让TextView先进行旋转，然后进行平移，最后进行伸缩，我们可以通过AnimatorSet实现该效果，代码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
```
  //anim1实现TextView的旋转动画
  Animator anim1 = ObjectAnimator.ofFloat(textView, "rotation", 0f, 360f);
  anim1.setDuration(2000);
  //anim2和anim3TextView的平移动画
  Animator anim2 = ObjectAnimator.ofFloat(textView, "translationX", 0f, 300f);
  anim2.setDuration(3000);
  Animator anim3 = ObjectAnimator.ofFloat(textView, "translationY", 0f, 400f);
  anim3.setDuration(3000);
  //anim4实现TextView的伸缩动画
  Animator anim4 = ObjectAnimator.ofFloat(textView, "scaleX", 1f, 0.5f);
  anim4.setDuration(2000);
 
 
  //第一种方式
  AnimatorSet animatorSet = new AnimatorSet();
  animatorSet.playSequentially(anim1, anim2, anim4);
  animatorSet.playTogether(anim2, anim3);
  animatorSet.start();
 
  //第二种方式
  /*AnimatorSet anim23 = new AnimatorSet();
  anim23.playTogether(anim2, anim3);
  AnimatorSet animatorSet = new AnimatorSet();
  animatorSet.playSequentially(anim1, anim23, anim4);
  animatorSet.start();*/
 
  //第三种方式
  /*AnimatorSet animatorSet = new AnimatorSet();
  animatorSet.play(anim1).before(anim2);
  animatorSet.play(anim2).with(anim3);
  animatorSet.play(anim4).after(anim2);
  animatorSet.start();*/
```

效果如下所示： 

动画anim1用于旋转TextView，anim2用于在X轴方向偏移TextView，anim3用于在Y轴方向偏移TextView，anim4用于缩放TextView。我们在以上代码中提供了三种方式通过AnimationSet把这四个动画组合到一起，第二种方式和第三种方式被注释起来了。

其实有很多种办法实现上述效果，这里只介绍一下上述三种方式的思路。

在第一种方式中，调用了animatorSet.playSequentially(anim1, anim2, anim4)，该方法将anim1、anim2以及anim4按顺序串联起来放到了animatorSet中，这样首先会让动画anim1执行，anim1执行完成后，会依次执行动画anim2，执行完anim2之后会执行动画anim3。通过调用animatorSet.playTogether(anim2, anim3)，保证了anim2和anim3同时执行，即动画anim1完成之后会同时运行anim2和anim3。

在第二种方式中，我们首先创建了一个AnimatorSet变量anim23，然后通过anim23.playTogether(anim2, anim3)将anim2和anim3组合成一个小的动画集合。然后我们再把anim1、anim23以及anim4一起传入到animatorSet.playSequentially(anim1, anim23, anim4)中，这样anim1、anim23、anim4会依次执行，而anim23中的anim2和anim3会同时执行。该方式同时也演示了可以将一个AnimatorSet作为动画的一部分放入另一个AnimatorSet中。

在第三种方式中，我们使用了AnimatorSet的play方法，该方法返回AnimatorSet.Builder类型，animatorSet.play(anim1).before(anim2)确保了anim1执行完了之后执行anim2，animatorSet.play(anim2).with(anim3)确保了anim2和anim3同时执行，animatorSet.play(anim4).after(anim2)确保了anim2执行完了之后执行anim4。需要说明的是animatorSet.play(anim1).before(anim2)与animatorSet.play(anim2).after(anim1)是完全等价的，之所以在上面代码中有的写before，有的写after，只是为了让大家多了解一下API。

 

 插值器（Interpolator）

 

1.1 简介

  • 定义：一个接口
  • 作用：设置 属性值 从初始值过渡到结束值 的变化规律
  1. 如匀速、加速 & 减速 等等
  2. 即确定了 动画效果变化的模式，如匀速变化、加速变化 等等

1.2 应用场景

实现非线性运动的动画效果

非线性运动：动画改变的速率不是一成不变的，如加速 & 减速运动都属于非线性运动

1.3 具体使用

a. 设置方式

插值器在动画的使用有两种方式：在XML / Java代码中设置：

设置方法1：在 动画效果的XML代码中设置插值器属性android:interpolator

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android:anim/overshoot_interpolator"
    // 通过资源ID设置插值器
    android:duration="3000"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="2"
    android:toYScale="2" />

设置方法2：在 Java 代码中设置

Button mButton = (Button) findViewById(R.id.Button);
        // 步骤1:创建 需要设置动画的 视图View

Animation alphaAnimation = new AlphaAnimation(1,0);
        // 步骤2：创建透明度动画的对象 & 设置动画效果

        alphaAnimation.setDuration(3000);
        Interpolator overshootInterpolator = new OvershootInterpolator();
        // 步骤3：创建对应的插值器类对象

        alphaAnimation.setInterpolator(overshootInterpolator);
        // 步骤4：给动画设置插值器

        mButton.startAnimation(alphaAnimation);
        // 步骤5：播放动画
  • 那么使用插值器时的资源ID是什么呢？即有哪些类型的插值器可供我们使用呢？
  • 下面将介绍 Android内置默认的插值器

b. 系统内置插值器类型

  • Android内置了 9 种内置的插值器实现：
作用资源ID对应的Java类
动画加速进行 @android:anim/accelerate_interpolator AccelerateInterpolator
快速完成动画，超出再回到结束样式 @android:anim/overshoot_interpolator OvershootInterpolator
先加速再减速 @android:anim/accelerate_decelerate_interpolator AccelerateDecelerateInterpolator
先退后再加速前进 @android:anim/anticipate_interpolator AnticipateInterpolator
先退后再加速前进，超出终点后再回终点 @android:anim/anticipate_overshoot_interpolator AnticipateOvershootInterpolator
最后阶段弹球效果 @android:anim/bounce_interpolator BounceInterpolator
周期运动 @android:anim/cycle_interpolator CycleInterpolator
减速 @android:anim/decelerate_interpolator DecelerateInterpolator
匀速 @android:anim/linear_interpolator LinearInterpolator

使用时：

  • 当在XML文件设置插值器时，只需传入对应的插值器资源ID即可
  • 当在Java代码设置插值器时，只需创建对应的插值器对象即可

系统默认的插值器是AccelerateDecelerateInterpolator，即先加速后减速

  • 系统内置插值器的效果图：


     
    效果图

  • 使用Android内置的插值器能满足大多数的动画需求

  • 如果上述9个插值器无法满足需求，还可以自定义插值器

  • 下面将介绍如何自定义插值器（Interpolator）

c. 自定义插值器

  • 本质：根据动画的进度（0%-100%）计算出当前属性值改变的百分比
  • 具体使用：自定义插值器需要实现 Interpolator / TimeInterpolator接口 & 复写getInterpolation（）
  1. 补间动画 实现 Interpolator接口；属性动画实现TimeInterpolator接口
  2. TimeInterpolator接口是属性动画中新增的，用于兼容Interpolator接口，这使得所有过去的Interpolator实现类都可以直接在属性动画使用
// Interpolator接口
public interface Interpolator {  

    // 内部只有一个方法
     float getInterpolation(float input) {  
         // 参数说明
         // input值值变化范围是0-1，且随着动画进度（0% - 100% ）均匀变化
        // 即动画开始时，input值 = 0；动画结束时input = 1
        // 而中间的值则是随着动画的进度（0% - 100%）在0到1之间均匀增加
        
      ...// 插值器的计算逻辑

      return xxx；
      // 返回的值就是用于估值器继续计算的fraction值，下面会详细说明
    }  

// TimeInterpolator接口
// 同上
public interface TimeInterpolator {  
  
    float getInterpolation(float input);  
   
}

在学习自定义插值器前，我们先来看两个已经实现好的系统内置差值器：

  • 匀速插值器：LinearInterpolator
  • 先加速再减速 插值器：AccelerateDecelerateInterpolator
// 匀速差值器：LinearInterpolator
@HasNativeInterpolator  
public class LinearInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {  
   // 仅贴出关键代码
  ...
    public float getInterpolation(float input) {  
        return input;  
        // 没有对input值进行任何逻辑处理，直接返回
        // 即input值 = fraction值
        // 因为input值是匀速增加的，因此fraction值也是匀速增加的，所以动画的运动情况也是匀速的，所以是匀速插值器
    }  


// 先加速再减速 差值器：AccelerateDecelerateInterpolator
@HasNativeInterpolator  
public class AccelerateDecelerateInterpolator implements Interpolator, NativeInterpolatorFactory {  
      // 仅贴出关键代码
  ...
    public float getInterpolation(float input) {  
        return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
        // input的运算逻辑如下：
        // 使用了余弦函数，因input的取值范围是0到1，那么cos函数中的取值范围就是π到2π。
        // 而cos(π)的结果是-1，cos(2π)的结果是1
        // 所以该值除以2加上0.5后，getInterpolation()方法最终返回的结果值还是在0到1之间。只不过经过了余弦运算之后，最终的结果不再是匀速增加的了，而是经历了一个先加速后减速的过程
        // 所以最终，fraction值 = 运算后的值 = 先加速后减速
        // 所以该差值器是先加速再减速的
    }  
  

    }
  • 从上面看出，自定义插值器的关键在于：对input值 根据动画的进度（0%-100%）通过逻辑计算 计算出当前属性值改变的百分比
  • 下面我将用一个实例来说明该如何自定义插值器

实例

  • 目的：写一个自定义Interpolator：先减速后加速

步骤1：根据需求实现Interpolator接口
DecelerateAccelerateInterpolator.java

/**
 * Created by Carson_Ho on 17/4/19.
 */

public class DecelerateAccelerateInterpolator implements TimeInterpolator {

    @Override
    public float getInterpolation(float input) {
        float result;
        if (input <= 0.5) {
            result = (float) (Math.sin(Math.PI * input)) / 2;
            // 使用正弦函数来实现先减速后加速的功能，逻辑如下：
            // 因为正弦函数初始弧度变化值非常大，刚好和余弦函数是相反的
            // 随着弧度的增加，正弦函数的变化值也会逐渐变小，这样也就实现了减速的效果。
            // 当弧度大于π/2之后，整个过程相反了过来，现在正弦函数的弧度变化值非常小，渐渐随着弧度继续增加，变化值越来越大，弧度到π时结束，这样从0过度到π，也就实现了先减速后加速的效果
        } else {
            result = (float) (2 - Math.sin(Math.PI * input)) / 2;
        }
        return result;
        // 返回的result值 = 随着动画进度呈先减速后加速的变化趋势
    }

}

MainActivity.java

 mButton = (Button) findViewById(R.id.Button);
        // 创建动画作用对象：此处以Button为例

        float curTranslationX = mButton.getTranslationX();
        // 获得当前按钮的位置

        ObjectAnimator animator = ObjectAnimator.ofFloat(mButton, "translationX", curTranslationX, 300,curTranslationX);
        // 创建动画对象 & 设置动画
        // 表示的是:
        // 动画作用对象是mButton
        // 动画作用的对象的属性是X轴平移
        // 动画效果是:从当前位置平移到 x=1500 再平移到初始位置
        animator.setDuration(5000);
        animator.setInterpolator(new DecelerateAccelerateInterpolator());
        // 设置插值器
        animator.start();
        // 启动动画

效果图

 
 

估值器（TypeEvaluator）

2.1 简介

  • 定义：一个接口
  • 作用：设置 属性值 从初始值过渡到结束值 的变化具体数值
  1. 插值器（Interpolator）决定 值 的变化规律（匀速、加速blabla），即决定的是变化趋势；而接下来的具体变化数值则交给
    而估值器
  2. 属性动画特有的属性

2.2 应用场景

协助插值器 实现非线性运动的动画效果

非线性运动：动画改变的速率不是一成不变的，如加速 & 减速运动都属于非线性运动

2.3 具体使用

a. 设置方式

ObjectAnimator anim = ObjectAnimator.ofObject(myView2, "height", new Evaluator()，1，3);
// 在第4个参数中传入对应估值器类的对象
// 系统内置的估值器有3个：
// IntEvaluator：以整型的形式从初始值 - 结束值 进行过渡
// FloatEvaluator：以浮点型的形式从初始值 - 结束值 进行过渡
// ArgbEvaluator：以Argb类型的形式从初始值 - 结束值 进行过渡

效果图

 
FloatEvaluator

 
IntEvaluator
  • 如果上述内置的估值器无法满足需求，还可以自定义估值器
    下面将介绍如何自定义插值器（Interpolator）
  • 首先，加速器返回的小数值，表示的是当前动画的数值进度。无论是利用ofFloat()还是利用ofInt()定义的动画都是适用的。因为无论是什么动画，它的进度必然都是在0到1之间的。0表示没开始，1表示数值运动的结束，对于任何动画都是适用的。 
    但Evaluator则不一样，我们知道Evaluator是根据加速器返回的小数进度转换成当前数值进度所对应的值。这问题就来了，如果我们使用ofInt()来定义动画，动画中的值应该都是Int类型，如果我用ofFloat()来定义动画，那么动画中的值也都是Float类型。所以如果我用ofInt()来定义动画，所对应的Evaluator在返回值时，必然要返回Int类型的值。同样，我们如果用ofFloat来定义动画，那么Evaluator在返回值时也必然返回的是Float类型的值。 
    所以每种定义方式所对应的Evaluator必然是它专用的；Evaluator专用的原因在于动画数值类型不一样，在通过Evaluator返回时会报强转错误；所以只有在动画数值类型一样时，所对应的Evaluator才能通用。所以ofInt()对应的Evaluator类名叫IntEvaluator,而ofFloat()对应的Evaluator类名叫FloatEvaluator； 
    在设置Evaluator时，是通过animator.setEvaluator()来设置的，在此之前，我们在使用ofInt()时，从来没有给它定义过使用IntEvaluator来转换值啊，那怎么也能正常运行呢？因为ofInt和ofFloat都是系统直接提供的函数，所以在使用时都会有默认的加速器和Evaluator来使用的，不指定则使用默认的；对于Evaluator而言，ofInt()的默认Evaluator当然是IntEvaluator;而FloatEvalutar默认的则是FloatEvalutor

b. 自定义估值器

  • 本质：根据 插值器计算出当前属性值改变的百分比 & 初始值 & 结束值 来计算 当前属性具体的数值

如：动画进行了50%（初始值=100，结束值=200 ），那么匀速插值器计算出了当前属性值改变的百分比是50%，那么估值器则负责计算当前属性值 = 100 + （200-100）x50% = 150.

  • 具体使用：自定义估值器需要实现 TypeEvaluator接口 & 复写evaluate()
public interface TypeEvaluator {  

    public Object evaluate(float fraction, Object startValue, Object endValue) {  
// 参数说明
// fraction：插值器getInterpolation（）的返回值
// startValue：动画的初始值
// endValue：动画的结束值

        ....// 估值器的计算逻辑

        return xxx；
        // 赋给动画属性的具体数值
        // 使用反射机制改变属性变化

// 特别注意
// 那么插值器的input值 和 估值器fraction有什么关系呢？
// 答：input的值决定了fraction的值：input值经过计算后传入到插值器的getInterpolation（），然后通过实现getInterpolation（）中的逻辑算法，根据input值来计算出一个返回值，而这个返回值就是fraction了
    }  
}

在学习自定义插值器前，我们先来看一个已经实现好的系统内置差值器：浮点型插值器：FloatEvaluator

public class FloatEvaluator implements TypeEvaluator {  
// FloatEvaluator实现了TypeEvaluator接口

// 重写evaluate()
    public Object evaluate(float fraction, Object startValue, Object endValue) {  
// 参数说明
// fraction：表示动画完成度（根据它来计算当前动画的值）
// startValue、endValue：动画的初始值和结束值
        float startFloat = ((Number) startValue).floatValue();  
        
        return startFloat + fraction * (((Number) endValue).floatValue() - startFloat);  
        // 初始值 过渡 到结束值 的算法是：
        // 1. 用结束值减去初始值，算出它们之间的差值
        // 2. 用上述差值乘以fraction系数
        // 3. 再加上初始值，就得到当前动画的值
    }  
}
  • 属性动画中的ValueAnimator.ofInt（） & ValueAnimator.ofFloat（）都具备系统内置的估值器，即FloatEvaluator & IntEvaluator

即系统已经默认实现了 如何从初始值 过渡到 结束值 的逻辑

  • 但对于ValueAnimator.ofObject（），从上面的工作原理可以看出并没有系统默认实现，因为对对象的动画操作复杂 & 多样，系统无法知道如何从初始对象过度到结束对象
  • 因此，对于ValueAnimator.ofObject（），我们需自定义估值器（TypeEvaluator）来告知系统如何进行从 初始对象 过渡到 结束对象的逻辑
  • 自定义实现的逻辑如下
// 实现TypeEvaluator接口
public class ObjectEvaluator implements TypeEvaluator{  

// 复写evaluate（）
// 在evaluate（）里写入对象动画过渡的逻辑
    @Override  
    public Object evaluate(float fraction, Object startValue, Object endValue) {  
        // 参数说明
        // fraction：表示动画完成度（根据它来计算当前动画的值）
        // startValue、endValue：动画的初始值和结束值

        ... // 写入对象动画过渡的逻辑
        
        return value;  
        // 返回对象动画过渡的逻辑计算后的值
    }

实例说明

  • 下面我将用实例说明 该如何自定义TypeEvaluator接口并通过ValueAnimator.ofObject（）实现动画效果

  • 实现的动画效果：一个圆从一个点 移动到 另外一个点


     
    效果图

  • 工程目录文件如下：


     
    工程目录

步骤1：定义对象类

  • 因为ValueAnimator.ofObject（）是面向对象操作的，所以需要自定义对象类。
  • 本例需要操作的对象是 圆的点坐标
    Point.java
public class Point {

    // 设置两个变量用于记录坐标的位置
    private float x;
    private float y;

    // 构造方法用于设置坐标
    public Point(float x, float y) {
        this.x = x;
        this.y = y;
    }

    // get方法用于获取坐标
    public float getX() {
        return x;
    }

    public float getY() {
        return y;
    }
}

步骤2：根据需求实现TypeEvaluator接口

  • 实现TypeEvaluator接口的目的是自定义如何 从初始点坐标 过渡 到结束点坐标；

  • 本例实现的是一个从左上角到右下角的坐标过渡逻辑。


     
    效果图

PointEvaluator.java

// 实现TypeEvaluator接口
public class PointEvaluator implements TypeEvaluator {

    // 复写evaluate（）
    // 在evaluate（）里写入对象动画过渡的逻辑
    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue) {

        // 将动画初始值startValue 和 动画结束值endValue 强制类型转换成Point对象
        Point startPoint = (Point) startValue;
        Point endPoint = (Point) endValue;

        // 根据fraction来计算当前动画的x和y的值
        float x = startPoint.getX() + fraction * (endPoint.getX() - startPoint.getX());
        float y = startPoint.getY() + fraction * (endPoint.getY() - startPoint.getY());
        
        // 将计算后的坐标封装到一个新的Point对象中并返回
        Point point = new Point(x, y);
        return point;
    }

}
  • 上面步骤是根据需求自定义TypeEvaluator的实现
  • 下面将讲解如何通过对 Point 对象进行动画操作，从而实现整个自定义View的动画效果。

步骤3：将属性动画作用到自定义View当中

MyView.java

/**
 * Created by Carson_Ho on 17/4/18.
 */
public class MyView extends View {
    // 设置需要用到的变量
    public static final float RADIUS = 70f;// 圆的半径 = 70
    private Point currentPoint;// 当前点坐标
    private Paint mPaint;// 绘图画笔
    

    // 构造方法(初始化画笔)
    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 初始化画笔
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.BLUE);
    }

    // 复写onDraw()从而实现绘制逻辑
    // 绘制逻辑:先在初始点画圆,通过监听当前坐标值(currentPoint)的变化,每次变化都调用onDraw()重新绘制圆,从而实现圆的平移动画效果
    @Override
    protected void onDraw(Canvas canvas) {
        // 如果当前点坐标为空(即第一次)
        if (currentPoint == null) {
            currentPoint = new Point(RADIUS, RADIUS);
            // 创建一个点对象(坐标是(70,70))

            // 在该点画一个圆:圆心 = (70,70),半径 = 70
            float x = currentPoint.getX();
            float y = currentPoint.getY();
            canvas.drawCircle(x, y, RADIUS, mPaint);


 // (重点关注)将属性动画作用到View中
            // 步骤1:创建初始动画时的对象点  & 结束动画时的对象点
            Point startPoint = new Point(RADIUS, RADIUS);// 初始点为圆心(70,70)
            Point endPoint = new Point(700, 1000);// 结束点为(700,1000)

            // 步骤2:创建动画对象 & 设置初始值 和 结束值
            ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);
            // 参数说明
            // 参数1：TypeEvaluator 类型参数 - 使用自定义的PointEvaluator(实现了TypeEvaluator接口)
            // 参数2：初始动画的对象点
            // 参数3：结束动画的对象点

            // 步骤3：设置动画参数
            anim.setDuration(5000);
            // 设置动画时长

// 步骤3：通过 值 的更新监听器，将改变的对象手动赋值给当前对象
// 此处是将 改变后的坐标值对象 赋给 当前的坐标值对象
            // 设置 值的更新监听器
            // 即每当坐标值（Point对象）更新一次,该方法就会被调用一次
            anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    currentPoint = (Point) animation.getAnimatedValue();
                    // 将每次变化后的坐标值（估值器PointEvaluator中evaluate（）返回的Piont对象值）到当前坐标值对象（currentPoint）
                    // 从而更新当前坐标值（currentPoint）

// 步骤4：每次赋值后就重新绘制，从而实现动画效果
                    invalidate();
                    // 调用invalidate()后,就会刷新View,即才能看到重新绘制的界面,即onDraw()会被重新调用一次
                    // 所以坐标值每改变一次,就会调用onDraw()一次
                }
            });

            anim.start();
            // 启动动画


        } else {
            // 如果坐标值不为0,则画圆
            // 所以坐标值每改变一次,就会调用onDraw()一次,就会画一次圆,从而实现动画效果

            // 在该点画一个圆:圆心 = (30,30),半径 = 30
            float x = currentPoint.getX();
            float y = currentPoint.getY();
            canvas.drawCircle(x, y, RADIUS, mPaint);
        }
    }


}

步骤4：在布局文件加入自定义View空间

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="scut.carson_ho.valueanimator_ofobject.MainActivity">

    <scut.carson_ho.valueanimator_ofobject.MyView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         />
</RelativeLayout>

步骤5：在主代码文件设置显示视图

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

效果图

 
效果图

源码地址

Carson_Ho的Github地址

3. 总结

  • 本文对Android 动画中的 插值器和估值器的使用 进行了详细分析，相信通过本文你已经能实现复杂的动画效果
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Im-Victor/p/8796969.html