Android View体系（五）--View 动画

1 前言

动画也是 Android 知识体系中一块非常重要的内容，我们要想在界面中实现一些炫酷的效果，那么必然离不开动画。Android 中动画分为三种，View 动画（视图动画）、帧动画、属性动画。其中帧动画也属于 View 动画的一种。

2 View 动画种类

View 动画由 5 种类型组成：透明度（alpha）、旋转（rotate）、缩放（scale）、位移（translate）、动画集（set）。

2.1 View 动画标签实现

2.1.1 如何使用动画标签

使用动画标签创建视图动画有两个步骤。

• 使用 XML 配置动画文件
• 在界面中加载动画并使用

动画文件存放在 res/anim 文件夹下面，使用时候，需要使用 R.anim.XXX 来访问，位置如下图所示。

//1.使用 XML 配置动画文件
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0"
    android:toXScale="1.5"
    android:fromYScale="0"
    android:toYScale="1.5"
    android:pivotX="50%"
    android:pivotY="50%">
</scale>
//2.在界面中加载动画并使用
ImageView iv = findViewById(R.id.iv);
Animation animation = AnimationUtils.loadAnimation(this,R.anim.scalse_anim);
//设置动画时间
animation.setDuration(3000);
//控件开始动画
iv.startAnimation(animation);

2.1.2 动画标签分类

2.1.2.1 alpha

alpha 实现透明度的变化的动画，自身属性如下。

• android:fromAlpha：动画开始时候的透明度，取值范围为 0.0 - 1.0，0. 0 表示全透明，1.0 表示不透明。
• android:toAlpha：动画结束时候的透明度。

2.1.2.2 rotate

rotate 实现画面旋转的动画，自身属性如下。

• android:fromDegree：动画开始旋转时候的角度，正值表示顺时针方向的度数，负值表示逆时针方向的度数。
• android:toDegree：动画结束旋转时候的角度。
• android:pivotX：动画旋转中心点的 X 轴位置，默认为控件坐标原点，有三种表示，数值、百分数、百分数p，例如 50，50%，50%p。50 表示 坐标点为 50，50% 表示自身宽度 50%位置，50%p 表示父控件宽度 50% 的位置。
• android:pivotY：动画旋转中心点的 X 轴位置。

2.1.2.3 scale

scale 实现缩放的动画，自身属性如下。

• android:fromXScale：动画开始，控件在 X 轴方向上缩放值。
• android:toXScale：动画结束，控件在 X 轴方向上缩放值。
• android:fromYScale：动画开始，控件在 Y 轴方向上缩放。值。
• android:toYScale: 动画结束，控件在 Y 轴方向上缩放值。
• android:pivotX：同 rotate 。
• android:pivotY：同 rotate。

2.1.2.4 translate

scale 实现位移的动画，自身属性如下。

• android:fromXDelta：起点 X 坐标，有数值、百分数、百分数p 三种。
• android:toXDelta：终点 Y 坐标。
• android:fromYDelta：起点 Y 轴坐标。
• android:toYDelta：终点 Y 坐标。

2.1.2.5 set

set 集合表示动画集合，如下代码所示。

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0" />
    <scale
        android:fromXScale="1.5"
        android:fromYScale="1.5"
        android:toXScale="1"
        android:toYScale="1" />
set>

2.1.2.6 Animation 公用属性

View 视图除了自身的属性，还继承了 Animation 的属性，Animation 所有动画的基类。

• android:duration：设置动画持续时间，单位毫秒
• android:fillAfter：为 true 时，保持动画结束时状态。
• android:fillBefore：为 true 时，还原动画到初始状态。
• android:fillEnabled：为 true 时，还原动画到初始状态。
• android:repeatMode：重复次数，为 infinite ，表示无限循环。
• android:repeatCount：重复类型，有 reverse（倒序回放） 和 restart（重放） 两个值。
• android:interpolator：插值器，例如匀速、弹跳等效果，例如设置 @android:anim/accelerate_interpolator 表示动画越来越快。

2.2 View 动画代码实现

View 动画代码实现形式比较简单，xml 形式可以转成代码实现。

标签	类
alpha	AlphaAnimation
scale	ScaleAnimation
rotate	RotateAnimation
translate	TranslateAnimation
set	AnimationSet

//示例代码，直接 new 就可以
AlphaAnimation alpha = new AlphaAnimation(1.0f,0.0f)
alpha .setDurtion(1000);
iv.startAnimation(alpha);

需要注意 android:pivotX 有三种样式，数值、百分数、百分数p，转成代码变成构造函数参数 pivotXType

• Animation.ABSOLUTE
• Animation.RELATIVE_TO_SELF
• Animation RELATIVE_TO_ENT

另外 android:repeateMode 转换成代码为 setRepeatMode() 取值为 Animation.RESTART 和 Animation.REVERSE，android:reateCount = “infinite” 转换成代码为 setRepeateCount(Animation.INFINITE) 。

2.2.1 AnimationSet

public AnimationSet(Context context, AttributeSet attrs)
//shareInterpolator 为 true，共用插值器
public AnimationSet(boolean shareInterpolator)

2.2.2 常用函数

//1.取消动画
void cancel() 
//2.重置动画
void reset()
//3.设置动画监听
void setAnimationListener(AnimationListener listener)

2.3 逐帧动画

逐帧动画，其实就是一帧一帧播放图片，可以通过 XML 实现或者 Java 实现。逐帧动画比较消耗内存，使用完成之后一定要释放掉。

2.3.1 XML 实现

//1.在 drawable 新建一个 XML 文件
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false"><!--是否只播放一次-->
    
 <!--android:drawable 图片位置，
  android:duration 动画播放时间-->    
  
<item android:drawable="@drawable/ic_1" 
    android:duration="1000"/>
</animation-list> 

//2.设置给 ImageView
<ImageView
    android:id="@+id/iv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/loading_anim" />

//3.使用
AnimationDrawable animation= (AnimationDrawable)iv.getBackground();
animation.start();

2.3.2 代码实现

逐帧动画也可以使用代码实现，也比较简单。

//1.新建 AnimationDrawable 对象
AnimationDrawable animation = new AnimationDrawable();       
for (int i = 1; i < 13; i++) {
       //通过文件名称获取资源 id
       int id = getResources().getIdentifier("ic_" + i, "drawable", getPackageName());
       Drawable drawable = getResources().getDrawable(id);
       //2.给 AnimationDrawable 添加帧
       animation.addFrame(drawable, 100);
}
//2.无限循环
animation.setOneShot(false);
//3.设置给 ImageView
iv.setBackgroundDrawable(animation);

2.3.3 例子

接下来我们写一个例子，一个加载动画，如下图所示。

动画图片资源文件如下。

1.定义 XML 文件

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/ic_1"
        android:duration="1000" />
    <item
        android:drawable="@drawable/ic_2"
        android:duration="100" />
    <item
        android:drawable="@drawable/ic_3"
        android:duration="100" />
    <item
        android:drawable="@drawable/ic_4"
        android:duration="100" />
    <item
        android:drawable="@drawable/ic_5"
        android:duration="100" />
    <item
        android:drawable="@drawable/ic_6"
        android:duration="100" />
    <item
        android:drawable="@drawable/ic_7"
        android:duration="100" />
    <item
        android:drawable="@drawable/ic_8"
        android:duration="100" />
    <item
        android:drawable="@drawable/ic_9"
        android:duration="100" />
    <item
        android:drawable="@drawable/ic_10"
        android:duration="100" />
    <item
        android:drawable="@drawable/ic_11"
        android:duration="100" />
    <item
        android:drawable="@drawable/ic_12"
        android:duration="100" />
    <item
        android:drawable="@drawable/ic_13"
        android:duration="100" />
animation-list>

2.设置给 ImageView

<ImageView
    android:id="@+id/iv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/loading_anim" />

3.加载动画

AnimationDrawable animation = (AnimationDrawable) iv.getBackground();
animation.start();