Android动画系列之帧动画和补间动画

Original jzman 躬行之 2022-08-26

收录于合集 #Android 31个

Android 提供三种动画：帧动画、补间动画和属性动画，本篇文章介绍帧动画以及补间动画的使用，属性动画的使用将在后面的文章中分享，那就来复习一下这两种动画的使用吧。另外中秋节五元抽奖活动@小情调男未添加我微信来领取红包，感谢参与与支持。

FrameAnimation

FrameAnimation 即逐帧动画，通俗来说就是按照图片动作顺序依次播放来形成动画，创建 FrameAnimation 可用 xml 定义也可直接使用代码创建。

xml创建帧动画：

在 res/drawable 文件夹下创建一个 drawable 文件，使用 animation-list 标签，具体内容如下：

1<?xml version="1.0" encoding="utf-8"?>
2
3<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
4    android:oneshot="false">
5    <item
6        android:drawable="@drawable/zzlx1"
7        android:duration="100" />
8    <item
9        android:drawable="@drawable/zzlx2"
10        android:duration="100" />
11    <item
12        android:drawable="@drawable/zzlx3"
13        android:duration="100" />
14    
15</animation-list>

属性 oneshot 为 true 表示动画只能播放一次，false 表示动画循环播放，drawable 是当前动作对应的图片，duration 是其持续时间，duration 长度影响动画播放的快慢，然后在 Activity 中使用获取该 drawable 文件对应的 AnimationDrawable，然后使用 AnimationDrawable 对象来控制动画的状态，参考如下：

1//获取Frame动画文件对应的AnimationDrawable
2mAnimationDrawable = (AnimationDrawable) getResources().getDrawable(R.drawable.frame_animator);
3//设置AnimationDrawable为图片的背景
4imageView.setBackground(mAnimationDrawable);
5
6//开启动画
7mAnimationDrawable.start();
8//停止动画
9mAnimationDrawable.stop();

代码创建帧动画：

使用代码创建帧动画就是创建 AnimationDrawable 对象，然后在 AnimationDrawable 中添加对应的 Frame 即可，代码参考如下：

1//代码创建Frame动画
2mAnimationDrawable = new AnimationDrawable();
3//设置动画循环播放，true为动画只播放一次
4mAnimationDrawable.setOneShot(false);
5mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.zzlx1),100);
6mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.zzlx2),100);
7mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.zzlx3),100);
8//...
9imageView.setBackground(mAnimationDrawable);
10
11//开启动画
12mAnimationDrawable.start();
13//停止动画
14mAnimationDrawable.stop();

FrameAnimation 效果如下：

帧动画

TweenAnimation

TweenAnimation 即常说的补间动画，主要有以下几种：

位移动画(Translation)
缩放动画(Scale)
旋转动画(Rotate)
透明度动画(Alpha)
组合动画

上述动画都有自己特有的一下属性，下面来看一看这些动画通用的一些属性，具体如下：

1
2android:duration="1200"
3
4android:startOffset ="1000"
5
6android:fillBefore = "true"
7
8android:fillAfter = "false"
9
10android:fillEnabled= "true"
11
12android:repeatMode = "restart"
13
14android:repeatCount = "0"
15
16android:interpolator = "@android:anim/accelerate_interpolator"

如果在代码中进行对应动画实现，这些属性也有对应的属性设置，直接设置即可。

位移动画(Translate)

位移动画对 View 进行水平方向或垂直方向位置的平移，可指定起始位置和结束位置，可使用 xml 定义位移动画也可以使用代码创建位移动画，位移动画对应的 Animation 的子类是 TranslateAnimation。

xml定义位移动画：在 res/anim 下创建一个xml文件 translation_anim.xml，在该文件中定义位移动画如下：

1<?xml version="1.0" encoding="utf-8"?>
2<translate xmlns:android="http://schemas.android.com/apk/res/android"
3    android:duration="1200"
4    android:startOffset ="0"
5    android:fillBefore = "true"
6    android:fillAfter = "false"
7    android:fillEnabled= "false"
8    android:repeatMode = "reverse"
9    android:repeatCount = "5"
10    android:interpolator = "@android:anim/accelerate_interpolator"
11
12    android:fromXDelta="0"
13    android:fromYDelta="0"
14    android:toXDelta="100"
15    android:toYDelta="100">

上述 xml 文件定义了一个位移动画文件，其中位移动画自有的属性含义如下：

1
2android:fromXDelta="0"
3
4android:fromYDelta="0"
5
6android:toXDelta="100"
7
8android:toYDelta="100"

然后在 Activity 中获取该 xml 文件对应的 TranslateAnimation，将其设置到想要设置位移动画的 View 上即可，具体如下：

1private void translation(){
2    //获取在anim下定义的动画文件
3    TranslateAnimation translateAnimation = (TranslateAnimation) AnimationUtils.loadAnimation(this, R.anim.translation_anim);、
4    //设置并开启动画
5    ivImage.startAnimation(translateAnimation);
6}

代码中创建位移动画：代码创建位移动画使用 Animation 的子类 TranslateAnimation,使用时直接创建 TranslateAnimation 对象即可，具体如下：

1//代码创建位移动画
2private void translation(){
3    //表示相对View自身原点(View左上角)像素偏移量
4    TranslateAnimation translateAnimation = new TranslateAnimation(0,100,0,100);
5    //设置动画持续时间
6    translateAnimation.setDuration(1200);
7    //设置动画重复模式
8    translateAnimation.setRepeatMode(Animation.REVERSE);
9    //设置动画重复次数
10    translateAnimation.setRepeatCount(3);
11    translateAnimation.setFillAfter(true);
12    //设置动画插值器
13    translateAnimation.setInterpolator(this,android.R.anim.accelerate_interpolator);
14//        translateAnimation.setInterpolator(new AccelerateInterpolator());
15    //...
16    ivImage.startAnimation(translateAnimation);
17}

上面参数中使用的时像素的偏移量，API 还提供了针对 View 自身一个父 View 的百分比的设置方式，下面这种创建 TranslateAnimation 对象的方式和上面实现的效果是一样的。具体如下：

1/**
2 * ABSOLUTE:表示相对View自身原点(View左上角)像素偏移量
3 *          此时和TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)一样
4 * RELATIVE_TO_SELF:表示相对View自身的百分比，如0.5f表示View自身大小的50%，1.0f表示View自身大小
5 * RELATIVE_TO_PARENT:表示相对父View的百分比，如0.5f表示View自身大小的50%，1.0f表示View自身大小
6 */
7TranslateAnimation translateAnimation = new TranslateAnimation(
8        Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0.46f,
9        Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0.46f);

使用时可根据需要选择合适的构造方式创建 TranslateAnimation，测试效果如下：

位移动画

缩放动画(Scale)

缩放动画对 View 就是对视图进行一定程度的放大和缩小，可使用 xml 定义位移动画也可以使用代码创建位移动画，缩放动画对应的 Animation 的子类是 ScaleAnimation。

xml定义缩放动画：在 res/anim 下创建一个 xml 文件 scale_anim.xml，在里面定义缩放动画，具体如下：

1<?xml version="1.0" encoding="utf-8"?>
2<scale xmlns:android="http://schemas.android.com/apk/res/android"
3    android:duration="1200"
4    android:startOffset ="0"
5    android:fillBefore = "true"
6    android:fillAfter = "false"
7    android:fillEnabled= "false"
8    android:repeatMode = "reverse"
9    android:repeatCount = "3"
10    android:interpolator = "@android:anim/accelerate_interpolator"
11
12    android:fromXScale="1"
13    android:fromYScale="1"
14    android:toXScale="3"
15    android:toYScale="3"
16    android:pivotX="50%"
17    android:pivotY="50%">
18</scale>

上述 xml 文件定义了一个缩放动画文件，其中缩放动画自有的属性含义如下：

1
2android:fromXScale="1"
3
4android:fromYScale="1"
5
6android:toXScale="3"
7
8android:toYScale="3"
9
10android:pivotX="50%"
11
12android:pivotY="50%">

其中 pivotX 和 pivotY 有三种设置方式：

数字：如50表示缩放中心相较 View 原点偏移 50px
百分比：如 50% 表示缩放中心相较 View 原点偏移 View 自身大小的 50%
百分比p：如 50%p 表示缩放中心相较 View 原点偏移父 View 自身大小的 50%

然后在 Activity 中获取该 xml 文件对应的 ScaleAnimation，将其设置到想要设置位移动画的 View 上即可，具体如下：

1private void scale(){
2 ScaleAnimation scaleAnimation = (ScaleAnimation) AnimationUtils.loadAnimation(this,R.anim.scale_anim);
3 ivImage.startAnimation(scaleAnimation);
4}

代码创建缩放动画：代码创建缩放动画使用 Animation 的子类 ScaleAnimation,使用时直接创建 ScaleAnimation 对象即可，具体如下：

1//代码创建缩放动画
2private void scale(){
3    ScaleAnimation scaleAnimation = new ScaleAnimation(1,3,1,3,
4            Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
5    scaleAnimation.setRepeatMode(Animation.REVERSE);
6    scaleAnimation.setDuration(500);
7    scaleAnimation.setRepeatCount(5);
8    scaleAnimation.setInterpolator(this,android.R.anim.accelerate_decelerate_interpolator);
9//        translateAnimation.setInterpolator(new AccelerateInterpolator());
10    //...
11    ivImage.startAnimation(scaleAnimation);
12}

至于参数中的 pivotXType 和 pivotYType 和在上文中已经提到过，这里就不在赘述，测试效果如下：

缩放动画

旋转动画(Rotate)

旋转动画对 View 就是对视图角度进行旋转，可使用 xml 定义旋转动画也可以使用代码创建旋转动画，旋转动画对应的 Animation 的子类是 RotateAnimation。

xml定义旋转动画：在 res/anim 下创建一个 xml 文件 rotate_anim.xml，在里面定义缩放动画，具体如下：

1<?xml version="1.0" encoding="utf-8"?>
2<rotate xmlns:android="http://schemas.android.com/apk/res/android"
3    android:duration="1200"
4    android:startOffset ="0"
5    android:fillBefore = "true"
6    android:fillAfter = "false"
7    android:fillEnabled= "false"
8    android:repeatMode = "reverse"
9    android:repeatCount = "5"
10    android:interpolator = "@android:anim/accelerate_interpolator"
11
12    android:fromDegrees="0"
13    android:toDegrees="100"
14    android:pivotY="50%"
15    android:pivotX="50%">
16</rotate>

上述 xml 文件定义了一个旋转动画文件，其中缩放动画自有的属性含义如下：

1
2android:fromDegrees="0"
3
4android:toDegrees="100"
5
6android:pivotY="50%"
7
8android:pivotX="50%"

其中 pivotX 和 pivotY 有三种设置方式在上文中已经说明。然后在 Activity 中获取该 xml 文件对应的 RotateAnimation，将其设置到想要设置旋转动画的 View 上即可，具体如下：

1private void rotate(){
2 RotateAnimation rotateAnimation = (RotateAnimation) AnimationUtils.loadAnimation(this,R.anim.rotate_anim);
3 ivImage.startAnimation(rotateAnimation);
4}

代码创建旋转动画：代码创建旋转动画使用 Animation 的子类 RotateAnimation,使用时直接创建 RotateAnimation 对象即可，具体如下：

1//代码创建旋转动画
2private void rotate(){
3    RotateAnimation rotateAnimation = new RotateAnimation(0,100,
4            Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
5    rotateAnimation.setRepeatMode(Animation.REVERSE);
6    rotateAnimation.setDuration(1200);
7    rotateAnimation.setRepeatCount(3);
8    rotateAnimation.setInterpolator(this,android.R.anim.accelerate_decelerate_interpolator);
9//        translateAnimation.setInterpolator(new AccelerateInterpolator());
10    //...
11    ivImage.startAnimation(rotateAnimation);
12}

测试效果如下：

旋转动画

透明度动画(Alpha)

透明度动画就是修改 View 的透明度，可使用 xml 定义透明度动画也可以使用代码创建透明度动画，透明度动画对应的 Animation 的子类是 AlphaAnimation。

xml定义透明度动画：在 res/anim 下创建一个 xml 文件 alpha_anim.xml，在里面定义缩放动画，具体如下：

1<?xml version="1.0" encoding="utf-8"?>
2<alpha xmlns:android="http://schemas.android.com/apk/res/android"
3    android:duration="3000"
4    android:startOffset ="0"
5    android:fillBefore = "true"
6    android:fillAfter = "true"
7    android:fillEnabled= "false"
8    android:repeatMode = "restart"
9    android:repeatCount = "0"
10    android:interpolator = "@android:anim/accelerate_interpolator"
11
12    android:fromAlpha="1"
13    android:toAlpha="0">
14</alpha>

上述 xml 文件定义了一个透明度动画文件，其中透明度动画自有的属性含义如下：

1
2android:fromAlpha="1"
3
4android:toAlpha="0"

然后在 Activity 中获取该 xml 文件对应的 AlphaAnimation，将其设置到想要设置旋转动画的 View 上即可，具体如下：

1private void alpha(){
2 AlphaAnimation alphaAnimation = (AlphaAnimation) AnimationUtils.loadAnimation(this,R.anim.alpha_anim);
3 ivImage.startAnimation(alphaAnimation);
4}

代码创建透明度动画：代码创建透明度动画使用 Animation 的子类 AlphaAnimation,使用时直接创建 AlphaAnimation 对象即可，具体如下：

1//代码创建透明度动画
2private void alpha(){
3    AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.0f);
4    alphaAnimation.setRepeatMode(Animation.RESTART);
5    alphaAnimation.setDuration(1500);
6    alphaAnimation.setRepeatCount(3);
7//        alphaAnimation.setInterpolator(this,android.R.anim.accelerate_decelerate_interpolator);
8//        translateAnimation.setInterpolator(new AccelerateInterpolator());
9    //...
10    ivImage.startAnimation(alphaAnimation);
11}

透明度动画测试效果如下：

透明度动画

到此为止，位移、缩放、旋转、透明度动画的内容介绍完了，除了单独使用这些动画，还可以组合这些动画实现更复杂的动画，

组合动画

组合动画使用 AnimationSet 来实现，可使用 xml 定义组合动画也可以使用代码创建组合动画，透明度动画对应的 Animation 的子类是 AnimationSet。

xml定义组合动画：在 res/anim 下创建一个 xml 文件 combine_anim.xml，在里面定义组合动画，具体如下：

1<?xml version="1.0" encoding="utf-8"?>
2<set xmlns:android="http://schemas.android.com/apk/res/android"
3    android:duration="1200">
4
5    
6    <alpha
7        android:repeatMode="reverse"
8        android:repeatCount="10"
9        android:fromAlpha="1"
10        android:toAlpha="0.5" />
11
12    
13    <rotate
14        android:repeatMode="reverse"
15        android:repeatCount="10"
16        android:fromDegrees="0"
17        android:pivotX="50%"
18        android:pivotY="50%"
19        android:toDegrees="360" />
20
21    
22    <scale
23        android:repeatMode="reverse"
24        android:repeatCount="10"
25        android:fromXScale="1"
26        android:fromYScale="1"
27        android:pivotX="50%"
28        android:pivotY="50%"
29        android:toXScale="3"
30        android:toYScale="3" />
31</set>

然后在 Activity 中获取该 xml 文件对应的 AnimationSet，将其设置到想要设置旋转动画的 View 上即可，具体如下：

1private void combine(){
2 AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(this,R.anim.combine_anim);
3 ivImage.startAnimation(animationSet);
4}

代码创建组合动画：代码创建组合动画使用 Animation 的子类 AnimationSet,使用时直接创建 AnimationSet 对象，将要组合的动画按序添加到 AnimationSet 中，具体如下：

1//代码创建组合动画
2private void combine(){
3    AnimationSet animationSet = new AnimationSet(true);
4    AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.3f);
5    alphaAnimation.setRepeatMode(Animation.REVERSE);
6    alphaAnimation.setRepeatCount(3);
7    RotateAnimation rotateAnimation = new RotateAnimation(0,360,
8            Animation.RELATIVE_TO_SELF,0.5f,
9            Animation.RELATIVE_TO_SELF,0.5f);
10    rotateAnimation.setRepeatMode(Animation.REVERSE);
11    rotateAnimation.setRepeatCount(3);
12    ScaleAnimation scaleAnimation = new ScaleAnimation(1,3,1,3,
13            Animation.RELATIVE_TO_SELF,0.5f,
14            Animation.RELATIVE_TO_SELF,0.5f);
15    scaleAnimation.setRepeatMode(Animation.REVERSE);
16    scaleAnimation.setRepeatCount(3);
17
18    animationSet.addAnimation(alphaAnimation);
19    animationSet.addAnimation(rotateAnimation);
20    animationSet.addAnimation(scaleAnimation);
21
22    animationSet.setDuration(1200);
23    //AnimationSet不支持动画重复播放，如果想要组合动画重复播放可设置每个动画重复播放即可
24//        animationSet.setRepeatMode(Animation.REVERSE);
25//        animationSet.setRepeatCount(10);
26
27    ivImage.startAnimation(animationSet);
28}

组合动画测试效果如下：

组合动画

总结

这篇文章总结了 Android 开发中帧动画(FrameAnimation)和补间动画(TweenAnimation)的使用，下一篇将会介绍属性动画(ObjectAnimator )的使用。

可以添加我的微信jzmanu,邀请你加入Android技术微信交流群。

“占坑式辩护”，侵犯了谁？

bxrf的瓜

嗷嗷哭！三斤午夜痛哭，压力太大了！阿哲遭恶意举报，爆瓜内幕！

童锦程爆阿哲抖音年度！哦嫂猫猫抖音复出开播！北王示爱囧囧丸！

陈泽心疼阿哲，回应大舞台节奏！哲修辰杭州聚会！宇文泡1600万叫价青蛙哥！

Android动画系列之帧动画和补间动画

FrameAnimation

xml创建帧动画：

代码创建帧动画：

TweenAnimation

位移动画(Translate)

缩放动画(Scale)

旋转动画(Rotate)

透明度动画(Alpha)

组合动画

总结

您可能也对以下帖子感兴趣

“占坑式辩护”，侵犯了谁？

bxrf的瓜

嗷嗷哭！三斤午夜痛哭，压力太大了！阿哲遭恶意举报，爆瓜内幕！

童锦程爆阿哲抖音年度！哦嫂猫猫抖音复出开播！北王示爱囧囧丸！

陈泽心疼阿哲，回应大舞台节奏！哲修辰杭州聚会！宇文泡1600万叫价青蛙哥！

生成图片，分享到微信朋友圈

Android动画系列之帧动画和补间动画

FrameAnimation

xml创建帧动画：

代码创建帧动画：

TweenAnimation

位移动画(Translate)

缩放动画(Scale)

旋转动画(Rotate)

透明度动画(Alpha)

组合动画

总结

您可能也对以下帖子感兴趣