前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Android:这是一份全面 & 详细的补间动画使用教程

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

作者头像
Carson.Ho
发布于 2020-01-13 09:00:22
发布于 2020-01-13 09:00:22
2K04
代码可运行
举报
文章被收录于专栏:Android知识分享Android知识分享
运行总次数:4
代码可运行

前言

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

目录


1. 简介


2. 使用场景

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

2.1 基础动画效果

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

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

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

2.2 特殊的应用场景

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

具体效果如下:


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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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设置方式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Button mButton = (Button) findViewById(R.id.Button);
// 步骤1:创建 需要设置动画的 视图View

Animation translateAnimation = new TranslateAnimation(05000500);
// 步骤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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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%)的情况

5.2 Java设置方式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Button mButton = (Button) findViewById(R.id.Button);
// 步骤1:创建 需要设置动画的 视图View
Animation scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.view_animation);
// 步骤2:创建 动画对象 并传入设置的动画效果xml文件
mButton.startAnimation(scaleAnimation);
// 步骤3:播放动画

效果图

6.2 Java设置方式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Button mButton = (Button) findViewById(R.id.Button);
// 步骤1:创建 需要设置动画的 视图View
Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.view_animation);
// 步骤2:创建 动画对象 并传入设置的动画效果xml文件
mButton.startAnimation(alphaAnimation);
// 步骤3:播放动画
效果图

7.2 Java设置方式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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:启动动画
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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:退出动画
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@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,如下设置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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);
示意图

8.2 自定义切换效果

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

此处就用到补间动画了

8.2.1 自定义 淡入淡出 效果

淡入淡出 效果是采用透明度动画(Alpha)。

fade_in.xml(淡入)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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(淡出)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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代码中设置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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代码中设置效果

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Intent intent = new Intent(MainActivity.this, SecActivity.class);
startActivity(intent);
// 自定义 从右向左滑动的效果
overridePendingTransition(R.anim.in_from_right, R.anim.out_to_left);

效果图

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

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

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

9. Fragment动画切换效果

9.1 系统预设

类似于ActivityFragment本身系统存在自带的动画切换效果

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 自定义动画效果

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 采用`FragmentTransavtion`的 setCustomAnimations()进行设置

FragmentTransaction fragmentTransaction = mFragmentManager
                .beginTransaction();

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

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

10. 视图组(ViewGroup)中子元素的出场效果

  • 视图组(ViewGroup)中子元素可以具备出场时的补间动画效果
  • 常用需求场景:为ListViewitem 设置出场动画
  • 使用步骤如下:

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

res/anim/view_animation.xml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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 中指定

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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文件了

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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的属性

上述二者的效果相同。

实例效果


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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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设置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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:播放动画

11.2 监听动画

  • Animation类通过监听动画开始 / 结束 / 重复时刻来进行一系列操作,如跳转页面等等
  • 通过在 Java 代码里setAnimationListener()方法设置
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                // 动画开始时回调
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                // 动画结束时回调
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                //动画重复执行的时候回调
            }
        });
特别注意

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

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

11.3 插值器

具体请看文章:Android:手把手带你深入了解神秘的估值器(TypeEvaluator)

11.4 估值器

具体请看文章:Android 动画:手把手带你深入了解神秘的插值器(Interpolator)


12. 总结

  • 本文对Android 动画中的补间动画的使用进行全面 & 详细介绍
  • 接下来,我将继续对Android的相关知识进行分析,感兴趣的同学可以继续关注本人的技术博客哦!Carson的技术博客
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/08/08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
这次彻底搞懂Android补间动画
通过确定开始的视图样式 & 结束的视图样式、中间动画变化过程由系统补全来确定一个动画
饮水思源为名
2018/09/06
1.3K0
这次彻底搞懂Android补间动画
Android动画系列(2)—补间动画
补充: 除了在XML中指定android:layoutAnimation,还可以通过LayoutAnimationController来实现。
八归少年
2022/06/29
7460
自定义View(二)-动画- 代码生成View动画
上篇我们介绍了视图动画,说的确切点应该是视图动画中的补间动画(Tween Animation),关于逐帧动画(Frame Animation)用法更简单,这里先不做介绍后期再自定义View的使用会用到,到时候讲解。这篇我们来一起学习将上篇用XML实现的动画用试着用代码来生成,毕竟有些时候我们是用代码来控制动画的。
g小志
2018/09/11
5840
自定义View(二)-动画- 代码生成View动画
Android 动画总结(3) - 补间动画
Tween Animation 包括、ScaleAnimation、TranslateAnimation、RotateAnimation 以及这四种动画的组合 AnimationSet。
三流之路
2018/09/11
5760
Android 属性动画:这是一篇很详细的 属性动画 总结&攻略
实现动画效果在Android开发中非常常见,因此Android系统一开始就提供了两种实现动画的方式:
Carson.Ho
2019/02/22
4K0
Android Animations动画使用详解
Android的animation由四种类型组成:alpha、scale、translate、rotate
阳光岛主
2019/02/19
6690
Android开发中基础动画技巧的应用 原
        我是先入门iOS的移动开发者,提到动画开发,iOS开发者很容易联想到3种方式,UIImageView的帧动画,UIView层的属性动画和CoreAnimation动画。Android中也有3种方式创建基础动画效果,分别为View Animation,Property Animation和Drawable Animation。由于Android开发的固有特点,其在进行动画编程时也支持使用代码和xml配置文件两种方式。本篇博客,将主要向大家介绍这3种创建Android动画方式的使用方法与可以做到的效果。
珲少
2018/08/15
8030
Android开发中基础动画技巧的应用
                                                                            原
Android动画基础 | 概述、逐帧动画、视图动画
或者给<animation-list>添加android:oneshot="true"属性,也可实现:
凌川江雪
2019/05/14
4.1K0
Android动画基础 | 概述、逐帧动画、视图动画
Animation用法_animation动画效果
Animation主要有两种动画模式: 一种是tweened animation(渐变动画)
全栈程序员站长
2022/07/20
1.5K0
Android动画效果-更新中
Android系统提供了三种实现动画的方式,一种是补间动画(Tween Animation 在SDK中成为View Animation),另一种是帧动画(Frame Animation 在SDK中称为Drawable Animation) ,第三种 属性动画(property animation )。
小小工匠
2021/08/16
3.8K0
Animation的使用「建议收藏」
Animation(动画)有两种分类:补间动画(Tween)和帧动画(Frame)
全栈程序员站长
2022/11/15
6770
Android补间动画之ScaleAnimation、AlphaAnimation、RotateAnimation、TranslateAnimation、AnimationSet详解「建议收藏」
首发:http://blog.csdn.net/harvic880925/article/details/40117115
全栈程序员站长
2022/11/07
2.9K0
Android补间动画之ScaleAnimation、AlphaAnimation、RotateAnimation、TranslateAnimation、AnimationSet详解「建议收藏」
Android样式的开发:View Animation篇
drawable汇总篇讲过两个动画,animation-list定义帧动画,animated-rotate定义旋转动画,这两个属于drawable动画。除了drawable动画,Android框架还提供了另外两种动画体系:视图动画(View Animation)和属性动画(Property Animation)。视图动画比较简单,只能应用于各种View,可以做一些位置、大小、旋转和透明度的简单转变。属性动画则是在android 3.0引入的动画体系,提供了更多特性和灵活性,也可以应用于任何对象,而不只是View。本篇先讲视图动画。
Keegan小钢
2018/08/10
1.1K0
Android:帧动画和补间动画看这篇就足够了!
为了使用户的交互更加流畅自然,动画也就成为了一个应用中必不可少的元素之一。在 Android 中常用的动画分类无外乎三种,最早的 帧动画 、补间动画,以及 3.0 之后加入的 属性动画,是它们组成了 Android 中各种炫酷亮眼的动画效果。
Android技术干货分享
2019/08/07
2K0
Android:帧动画和补间动画看这篇就足够了!
Android Animation动画
drawable是图片地址,oneshot=true表示只展示一遍,false表示循环
yechaoa
2022/06/10
7260
Android Animation动画
Android动画之View Animation
Android的View animation由四种类型组成:alpha、scale、translate、rotate
码客说
2019/10/22
1.4K0
Android 学习之补间(Tween)动画
补间动画,就是开发者只需要指定动画的开始,动画的结束的“关键帧”,而动画变化的“中间帧”由系统计算,并且补齐。这就是补间动画。
DragonKingZhu
2022/05/08
5780
Android的View动画
View动画其实就是使ImageView上的图片在隐藏、旋转、缩放、平移通过动画的过程显示。
夜雨飘零
2020/05/06
1.2K0
Android中的动画
在Android程序设计过程中,除了使用简单的按钮、文本框等简单控件来构建基本界面,我们还可以通过为界面添加动画效果,使得界面更加变得更加绚丽,更加吸引人。Android平台也提供了一套完整的动画框架,使得开发者可以用它开发出各种动画效果。
张哥编程
2024/12/17
1950
Android中的动画
安卓开发_浅谈Android动画(一)
动画效果,针对图片实现 现在学习四种基本的简单动画效果 一、Tween Animation共同属性   1、Duration:动画持续时间(毫秒单位)   2、fillAfter:设置为true,动画转化在动画结束后被应用   3、fillBefore:设置为true,动画转化在动画开始前被应用   4、interpolator:动画插入器(加速,减速插入器)   5、repeatCount:动画重复次数   6、repateMode:顺序重复/倒序重复   7、startOffset:动画之间的时间间隔
听着music睡
2018/05/18
7790
相关推荐
这次彻底搞懂Android补间动画
更多 >
目录
  • 前言
  • 目录
  • 1. 简介
  • 2. 使用场景
    • 2.1 基础动画效果
    • 2.2 特殊的应用场景
  • 3. 使用方法
    • 3.1 核心类
    • 3.2 设置方式
  • 4. 平移(Translate)
    • 4.1 XML设置方式
    • 4.2 Java设置方式
  • 5. 缩放动画(Scale)
    • 5.1 XML设置方式
    • 5.2 Java设置方式
  • 6. 旋转动画(Rotate)
    • 6.1 XML设置方式
    • 效果图
    • 6.2 Java设置方式
  • 7. 透明度动画(Alpha)
    • 7.1 XML设置方式
    • 7.2 Java设置方式
  • 8. Activity 的切换效果
    • 8.1 系统预设
    • 8.2 自定义切换效果
    • 效果图
  • 9. Fragment动画切换效果
    • 9.1 系统预设
    • 9.2 自定义动画效果
  • 10. 视图组(ViewGroup)中子元素的出场效果
    • 步骤1:设置子元素的出场动画
    • 步骤2:设置 视图组(ViewGroup)的动画文件
    • 步骤3:为视图组(ViewGroup)指定andorid:layoutAnimation属性
    • 实例效果
  • 11. 高级使用
    • 11.1 组合动画
    • 效果图
    • 方式2:Java设置
    • 11.2 监听动画
    • 11.3 插值器
    • 11.4 估值器
  • 12. 总结
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档