智能终端软件开发——逐帧动画

逐帧动画是按照事先准备好的静态图像顺序播放，利用人眼的的“视觉暂留”原理，给用户造成动画的错觉。逐帧动画的原理与放胶片看电影的原理是一样的，它们都是一张一张的播放事先准备好的静态图像。
在使用逐帧动画时，需要在res/drawable目录下创建好帧动画的XML文件，并在<animation-list>节点的<item>子节点中，指定图片帧出现的顺序以及每帧的持续时间。接下来通过一个向日葵生长的案例来演示如何使用逐帧动画。

1.创建程序

创建一个名为Frame的应用程序，指定包名为com.czt.frame，设计用户交互界面，预览效果如图所示：

逐帧动画界面

对应的布局代码如下：
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="@android:color/white"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/iv_flower"
        android:layout_width="150dp"
        android:layout_height="267dp"
        android:layout_centerInParent="true"
        android:background="@drawable/frame"
        />
    <Button
        android:id="@+id/btn_play"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerInParent="true"
        android:background="@android:drawable/ic_media_play"
        />

</RelativeLayout>

在上述代码中，需要注意的是，ImageVie的背景是Frame动画资源。

2.创建Frame动画资源

接下来创建Frame动画资源文件frame。xml。在创建动画资源文件之前，首先要将事先准备的图片放置在drawable目录下，然后在drawable文件夹中创建frame.xml文件，具体代码如下：
frame。xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/img01" android:duration="200"></item>
    <item android:drawable="@drawable/img02" android:duration="200"></item>
    <item android:drawable="@drawable/img03" android:duration="200"></item>
    <item android:drawable="@drawable/img04" android:duration="200"></item>
    <item android:drawable="@drawable/img05" android:duration="200"></item>
    <item android:drawable="@drawable/img06" android:duration="200"></item>
</animation-list>

上述代码是定义Frane动画的基本语法格式，<animation-list>为帧动画的根结点，其中属性drawable表示当前要播放的图片，duration表示当前帧播放时长。

3.编写界面交互代码

定义好Frame动画资源文件后，需要在MainActivity中编写逻辑代码播放Frame动画，具体代码如下：
MainActivity.java

package com.czt.frame;

import android.graphics.drawable.AnimatedImageDrawable;
import android.graphics.drawable.AnimationDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private ImageView iv_flower;
    private Button btn_start;
    private AnimationDrawable animation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv_flower = (ImageView)findViewById(R.id.iv_flower);
        btn_start = (Button)findViewById(R.id.btn_play);
        btn_start.setOnClickListener(this);
        animation = (AnimationDrawable)iv_flower.getBackground();
    }
    public void onClick(View v){
        if (!animation.isRunning()){
            animation.start();
            btn_start.setBackgroundResource(android.R.drawable.ic_media_pause);
        }else {
            animation.stop();
            btn_start.setBackgroundResource(android.R.drawable.ic_media_play);
        }
    }
}

上述代码首先获取到ImageView的背景图片，并将该背景图片转为AnimationDrawable类型，然后使用AnimationDrawable类的start()方法播放动画。

4.运行程序

运行程序能看到一系列的图片在不停的切换，以动态图为例：

运行效果

运行程序后，图片上的向日葵会逐渐长大。至此案例功能完成了，从案例中的代码可以看出，逐帧动画其实就是依次播放几张图片。

最后编辑于：2019.06.22 22:45:25