动画（二）之Frame Animation

短命女 2022-05-31 01:10 168阅读 0赞

#     #

我们都知道，在Android系统中，官方给我们提供了两种类型的动画：属性动画(Property Animation) 和 视图动画(View Animation)，而视图动画又包含了两种类型：补间动画(Tween animation) 和 帧动画(Frame animation)。

在[Android基础夯实--重温动画（一）之Tween Animation][Android_--_Tween Animation]我们已经对Tween Animation进行了详细讲解，这一片，我会给大家介绍视图动画的另一种 Frame Animation。

在开发中，除了常用的Tween Animation以外，我们还会用到Frame Animation，就是我们所说的帧动画，之所以要实现帧动画是因为它可以实现类似电影的动态效果，因为我们平时所拍的视频也是通过一张张照片插入每一帧，串联起来，从而实现连续播放的视觉效果，而这Tween Animation是无法实现，只能通过Frame Animation来实现。例如我们常见的App动态引导页，很多都是通过Frame Animation来实现的。

![240][]

引导页

总体来说，Frame Animation实现起来也是比较简单，本文也是主要做一个抛砖引玉，只做基本介绍，更多进阶知识需要大家日后摸索，更权威解释可以看官方文档：[Frame Animation][]。以下先通过Demo给大家更直观地展示Frame Animation。

本文主要对View Animation的Frame Animation做介绍，如果大家有兴趣，可以继续阅读本动画系列其他相关文章，作者也在不断更新完善相关内容，希望大家可以指出有误之处。

[Android基础夯实--重温动画（一）之Tween Animation][Android_--_Tween Animation]

[Android基础夯实--重温动画（三）之初识Property Animation][Android_--_Property Animation]

[Android基础夯实--重温动画（四）之属性动画 ValueAnimator详解][Android_--_ ValueAnimator]

# Demo #

这个Demo主要是使用Frame Animation来实现ImageView播放gif图效果。

## 效果图 ##

![272][]

效果图

## 代码实现 ##

1.  首先在res/drawable/目录下，增添一个frame.xml文件，里面主要写每一帧播放哪一张照片。最外层标签必须是animation-list，子标签item对应每一帧，每一个item里面的drawable属性对应图片位置、duration对应一帧的时长。

<?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
        <item android:drawable="@drawable/g1" android:duration="200" />
        <item android:drawable="@drawable/g2" android:duration="200" />
        <item android:drawable="@drawable/g3" android:duration="200" />
        <item android:drawable="@drawable/g4" android:duration="200" />
        <item android:drawable="@drawable/g5" android:duration="200" />
        <item android:drawable="@drawable/g6" android:duration="200" />
    </animation-list>

1.  在Activity中，实现如下代码：

//将控件背景设置为我们的AnimationDrawable资源文件 image.setBackgroundResource(R.drawable.frame); mBinding.play.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //拿到要编译成AnimationDrawable的背景 AnimationDrawable imageAnimation = (AnimationDrawable)image.getBackground(); //开始动画 imageAnimation.start(); } });

# Frame Animation #

在Android的官方文档中，Google对Frame Animation的讲解只是用了比较小的篇幅，可能是因为过于简单，当然，大家通过我上面所说的例子也可以看得出Frame Animation的使用也是非常的简单，下面主要介绍Frame Animation的要点。

## 文件位置 ##

在资源文件夹下：res/drawable/filename.xml

## 编译 ##

在上面的例子我们可以了解到，在Activity中，我们是通过image.getBackground()获取到的对象转为了AnimationDrawable，这是因为在我们的xml文件被编译器编译之后就变成了 [AnimationDrawable][]类。

## 语法 ##

<?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot=["true" | "false"] >
        <item android:drawable="@[package:]drawable/drawable_resource_name" android:duration="integer" />
    </animation-list>

## 标签 ##

\*\* < animation-list > \*\* ：外层必须要的标签，里面包含一个以上的<item>标签

*  属性：
    
    1.  android:oneshot：true则只运行一次，false则重复动画。

\*\* < item > \*\* ：每一帧的动画，必须是<animation-list>的子标签。

*  属性：
    
    1.  android:drawable：对应资源文件。
    2.  android:duration：每一帧时长。

## AnimationDrawable ##

AnimationDrawable就是对应于我们自身定义的xml文件，在Java代码中将xml对象转为了AnimationDrawable之后，我们就可以通过它来获取xml文件里面的属性。

### 父类 ###

AnimationDrawable继承于Object -> Drawable -> DrawableContainer。

### 接口 ###

实现了Runnable, Animatable接口。

### XML文件中的变量 ###

*  android:drawable： 用于该帧的图片。
 *  android:duration： 每一帧的时长。
 *  android:oneshot： true则只运行一次，false则重复动画。
 *  android:variablePadding： 如果true，允许drawable文件的当前状态改变。
 *  android:visible： 是否可见。

### 方法 ###

*  void addFrame (Drawable frame, int duration)： 添加一帧动画到动画里面。
 *  int getDuration (int i)： 获取第i帧的时长。
 *  Drawable getFrame (int index)： 获取第i帧的Drawbale。
 *  int getNumberOfFrames ()： 获取共有多少帧。
 *  void inflate (Resources r, XmlPullParser parser, AttributeSet attrs, Resources.Theme theme)： 从XML资源里面加载一个Drawable文件。
 *  boolean isOneShot ()： 判断是否单次播放。
 *  boolean isRunning ()： 判断动画是否还在运行。
 *  Drawable mutate ()： 一个drawable如果使用了mutate()方法，那么对这个drawable属性（包括设置drawable的透明度）修改将不会共享。
 *  void setOneShot (boolean oneShot)： 设置动画播放一次或者循环。
 *  boolean setVisible (boolean visible, boolean restart)： 设置该AnimationDrawable是否可见。
 *  void start ()： 播放。
 *  void stop ()： 停止。
 *  void unscheduleSelf (Runnable what)： 让动画重新回到-1帧。

# 总结 #

Frame Animation总体来说比较简单，通过XML的划分帧，在Java代码中获取到编译的AnimationDrawable，然后进行播放，难点不多，却是很多引导页的常用实现方法。

如果你觉得我的文章对您有用，请随意打赏。您的鼓励将支持我继续创作！

赞赏支持

[ Android基础夯实系列][Android]

举报文章

[![96][]][96 1] 关注 [RyaneLee][96 1]

写了 42660 字，被 124 人关注，获得了 274 个喜欢

个人首页：https://ryanlijianchang.github.io/

[喜欢][Link 1]

更多分享

[![Web note ad 1][]][Web note ad 1 1]

![avatar_default-78d4d1f68984cd6d4379508dd94b4210.png][]

[登录][Link 2]  后发表评论

智慧如你，不想 [发表一点想法][Link 3]咩~

[Android_--_Tween Animation]: https://link.jianshu.com/?t=http://blog.csdn.net/ljcitworld/article/details/64464931
[240]: /images/20220531/f93f9ece4dbd4067bdf45f2e18ce99e7.png
[Frame Animation]: https://link.jianshu.com/?t=https://developer.android.com/guide/topics/resources/animation-resource.html#Frame
[Android_--_Property Animation]: https://link.jianshu.com/?t=http://blog.csdn.net/ljcitworld/article/details/66974687
[Android_--_ ValueAnimator]: https://link.jianshu.com/?t=http://blog.csdn.net/ljcitworld/article/details/66974719
[272]: /images/20220531/87d1d60da48f45469dcec88e8abaf379.png
[AnimationDrawable]: https://link.jianshu.com/?t=https://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html
[Android]: https://www.jianshu.com/nb/10856515
[96]: https://upload.jianshu.io/users/upload_avatars/1712159/7594aeb9cde4.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96
[96 1]: https://www.jianshu.com/u/08dc70a40fb1
[Link 1]: https://www.jianshu.com/sign_in?utm_source=desktop&utm_medium=not-signed-in-like-button
[Web note ad 1]: /images/20220531/3282355637454a5fb21459c521df823f.png
[Web note ad 1 1]: https://www.jianshu.com/apps/download?utm_source=nbc
[avatar_default-78d4d1f68984cd6d4379508dd94b4210.png]: /images/20220531/31416eba4f9f4629abfc008ad87d567b.png
[Link 2]: https://www.jianshu.com/sign_in?utm_source=desktop&utm_medium=not-signed-in-comment-form
[Link 3]: https://www.jianshu.com/sign_in?utm_source=desktop&utm_medium=not-signed-in-nocomments-text