专栏名称: Carson_Ho
走在产品路上的Android研究生
目录
相关文章推荐
开发者全社区  ·  大S的5亿遗产如何分配？ ·  3 小时前  
开发者全社区  ·  又见HF渣男 ·  昨天  
开发者全社区  ·  天王回乡的瓜 ·  2 天前  
开发者全社区  ·  小仙女逼婚失败...称遇假A8.5 ·  2 天前  
开发者全社区  ·  王J林在崩溃边缘 ·  3 天前  
51好读  ›  专栏  ›  Carson_Ho

Android：这是一份全面 & 详细的补间动画使用教程

Carson_Ho  · 掘金  · android  · 2019-07-25 00:51

正文

前言

  • 动画的使用 是 Android 开发中常用的知识
  • 今天，我将将献上一份 Android 补间动画的使用教程，手把手教你使用补间动画。

目录

示意图

1. 简介

示意图

具体请看文章：

2. 使用场景

补间动画的使用场景主要包括：基础动画效果 & 特殊使用场景

2.1 基础动画效果

补间动画的标准动画分为4种：

  • 平移动画（ Translate ）
  • 缩放动画（ scale ）
  • 旋转动画（ rotate ）
  • 透明度动画（ alpha ）

上述常用于视图View的一些标准动画效果，具体效果如下：

平移 缩放 旋转 透明度

2.2 特殊的应用场景

  • Activity 的切换效果（淡入淡出、左右滑动等）
  • Fragement 的切换效果（淡入淡出、左右滑动等）
  • 视图组（ ViewGroup ）中子元素的出场效果（淡入淡出、左右滑动等）

具体效果如下：


淡入淡出 左右滑动 ListView出场动画

3. 使用方法

3.1 核心类

不同类型的动画对应于不同的子类，具体如下：


示意图

3.2 设置方式

  • 补间动画的使用方式分为两种：在 XML 代码 / Java 代码里设置
  1. 前者优点：动画描述的可读性更好
  2. 后者优点：动画效果可动态创建

下面，我将详细介绍上面所示补间动画的具体使用。

4. 平移（Translate）

对应的核心类是： TranslateAnimation 类。

4.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 

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.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:播放动画

5. 缩放动画（Scale）

对应的核心类是： ScaleAnimation 类。

5.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%）

5.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：播放动画

6. 旋转动画（Rotate）

对应的核心类是： RotateAnimation 类。

6.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%）

6.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：播放动画

7. 透明度动画（Alpha）

对应的核心类是： AlphaAnimation 类。

7.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，即从有 到 无

7.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：播放动画

至此，关于补间动画的基础动画效果讲解完毕。

8. Activity 的切换效果

即 Activity 启动 / 退出时的动画效果，主要包括淡入淡出、左滑右滑等。

8.1 系统预设

本身系统已经封装好了淡入淡出、左滑右滑的效果，具体使用如下：

步骤1：启动动画 

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)后被调用才能生效

步骤2：退出动画 

@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

8.2 自定义切换效果

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

此处就用到补间动画了

8.2.1 自定义 淡入淡出 效果

淡入淡出 效果是采用透明度动画（ 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);

8.2.2 自定义 左右滑动 效果

  • 左右滑动 效果是采用平移动画（ 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种基本动画 进行动画效果展示

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

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

9. Fragment动画切换效果

9.1 系统预设

类似于 Activity ， 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添加和移除的时候都会有。

9.2 自定义动画效果 

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

FragmentTransaction fragmentTransaction = mFragmentManager
                .beginTransaction();

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

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

10. 视图组（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出场动画效果图

11. 高级使用

除了上述使用，还有一些额外的高级用法：

  • 组合动画
  • 监听动画
  • 插值器
  • 估值器

11.1 组合动画

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

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

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

方式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







请到「今天看啥」查看全文


推荐文章
开发者全社区  ·  大S的5亿遗产如何分配？
3 小时前
开发者全社区  ·  又见HF渣男
昨天
开发者全社区  ·  天王回乡的瓜
2 天前
开发者全社区  ·  小仙女逼婚失败...称遇假A8.5
2 天前
开发者全社区  ·  王J林在崩溃边缘
3 天前
参考消息  ·  外交 | 俄媒：中国伊朗日渐亲密 “丝绸之路”在伊畅通无阻
8 年前
良仓  ·  Pinterest预测的2017全球10大美食新趋势
8 年前
中国政府网  ·  收藏丨身份证丢了不必回老家补办！异地办理全攻略
7 年前
界面新闻  ·  教授被判贪污背后 科研人员兼职收入面对的罪与罚
7 年前
采采  ·  如果有一天，男人用乳房给孩子喂奶…… | 爆笑视频
7 年前
Sov5搜索   ·   小百科   ·   今天看啥   ·   移动版
51好读 - 好文章就要读起来!