Android动画学习之帧动画

帧动画简介

    介绍帧动画之前先了解一下‘帧’的概念：帧，影像动画中最小单位，也就是最小的单幅画面。相当于电影脚上的每一格镜头。一帧就是最小的一张单幅画面，多个帧连接在一起就会形成动画。通常所说的帧数，是指的1s时间内传输的帧的数量，也可以理解成图形处理器1s能够刷新的频率。每一帧都是一个静止的图像，快速持续的显示多个连续的帧图像便会形成运动的假象，也就是所谓的帧动画。

    帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转身、 头发及衣服的飘动、走路、说话以及精致的3D效果等等。

    简单来讲，帧动画的本质就是将很多张预先做好的具有连续性的图片在一定时间内快速持续显示出来。

帧动画实现方式

    Android中实现帧动画也很简单，主要有通过xml和代码两种方式，下面通过一个小鸟飞翔的动画demo分别介绍这两种方式。

xml方式

通过xml的方式有一下几个步骤：

1. 创建xml动画资源文件
2. 布局文件中引入动画文件
3. 代码控制动画的开始和结束

1. 创建xml动画资源文件

    帧动画的每一帧都是一张静态图片，所以完成这个demo需要多张动作连续的静态图片。准备好图片之后将图片放到Drawable文件夹中，然后在drawable文件夹中创建动画xml文件anim_test.xml，动画文件代码如下：

<?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/test01"
        android:duration="200" />
    <item
        android:drawable="@drawable/test02"
        android:duration="200" />
    <item
        android:drawable="@drawable/test03"
        android:duration="200" />
    <item
        android:drawable="@drawable/test04"
        android:duration="200" />
    <item
        android:drawable="@drawable/test05"
        android:duration="200" />
    <item
        android:drawable="@drawable/test06"
        android:duration="200" />
    <item
        android:drawable="@drawable/test07"
        android:duration="200" />
    <item
        android:drawable="@drawable/test08"
        android:duration="200" />
</animation-list>

2. 布局文件中引入动画资源

    将imageview的背景设置成图片资源文件， 关键代码如下：

<androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/iv_anim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/anim"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

3. 代码控制动画的开始和结束

    首先通过imageview获取背景资源，并且将背景资源强转成AnimationDrawable，分别调用其start和stop方法控制动画的开始和结束。关键代码如下：

final AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getBackground();

        btn_start.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                animationDrawable.start();
            }
        });
        btn_cancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                animationDrawable.stop();
            }
        });

以上是通过xml的方式实现帧动画demo，接下来通过代码方式实现。

代码方式

通过代码方式实现主要有以下几个步骤：

1. 准备图片
2. 设定图片资源数组
3. 遍历图片资源数组，添加每一帧动画并设定时长
4. 设定是否循环播放
5. 将动画设置到控件背景上
6. 开启动画

核心代码如下：

public void startByCode(){
        //创建一个AnimationDrawable
        AnimationDrawable animationDrawable1 = new AnimationDrawable();
        //准备好资源图片
        int[] ids = {R.drawable.test01,R.drawable.test02,R.drawable.test03,R.drawable.test04,R.drawable.test05,R.drawable.test06,R.drawable.test07,R.drawable.test08};
        //通过for循环添加每一帧动画
        for(int i = 0 ; i < 8 ; i ++){
            Drawable frame = getResources().getDrawable(ids[i]);
            //设定时长
            animationDrawable1.addFrame(frame,200);
        }
        //是否循环播放
        animationDrawable1.setOneShot(false);
        //将动画设置到背景上
        imageView.setBackground(animationDrawable1);
        //开启帧动画
        animationDrawable1.start();
    }