Android 动画解析(一) 逐帧动画(Frame Animation)

你的名字 2022-07-17 00:08 484阅读 0赞

简介

开发Android的同学都知道，Android中的动画有逐帧动画(Frame Animation)、补间动画(Tween Animation)以及属性动画。其中，逐帧动画(Frame Animation)，是按照一定的顺序播放不同的图像，进而产生动画的效果；补间动画(Tween Animation)，也称为View 动画，它支持4种动画效果，分别为平移（translate）、旋转（rotate）、缩放（scale）和透明（alpha），通过View对象做这4种不同的动画，来产生一种动画效果，实际作用的View位置，大小等不会跟随变化；属性动画(Property Animation)，是API 11(Android 3.0)的新特性，通过设置View的属性，达到动画的效果。

逐帧动画(Frame Animation)一般也认为是补间动画(Tween Animation)即View 动画。

今天这篇文章详细讲解逐帧动画(Frame Animation)的如何使用。

逐帧动画(Frame Animation)

原理：逐帧动画通过连续播放图片来产生动画的效果。

Drawable Animation 可以让我们按顺序加载一系列的资源来创建一个动画。动画的创建和传统意义上电影胶卷的播放一样，是通过加载不同的图片，然后按顺序进行播放来实现的。在代 码的实现上 AnimationDrawable 类是基于 Drawable animations 来实现的。  要实现逐帧动画(Frame Animation)，需要使用AnimationDrawable对象。

**PS: 实现逐帧动画(Frame Animation)，有两种方式，xml文件和代码。推荐使用xml文件。本文只使用xml文件实现动画效果！**

实现逐帧动画(Frame Animation)。

1.  在工程中res/drawable/目录下，新建loadanimation.xml文件。在该XML文件中<animation-list>元素为根节点，<item>节点定义了每一帧，表示一个drawable资源的帧和帧间隔。代码如下：

<?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/base_small_loading_1"
            android:duration="100" />
        <item
            android:drawable="@drawable/base_small_loading_2"
            android:duration="100" />
        <item
            android:drawable="@drawable/base_small_loading_3"
            android:duration="100" />
        <item
            android:drawable="@drawable/base_small_loading_4"
            android:duration="100" />
        <item
            android:drawable="@drawable/base_small_loading_5"
            android:duration="100" />
        <item
            android:drawable="@drawable/base_small_loading_6"
            android:duration="100" />
        <item
            android:drawable="@drawable/base_small_loading_7"
            android:duration="100" />
        <item
            android:drawable="@drawable/base_small_loading_8"
            android:duration="100" />
    
    </animation-list>

有8张图像（8张帧），每张图像显示时间为100ms，另外我们可以通过设置 </animation-list> 节点下的 android:oneshot 属性来控制动画的循环次数，如果将 android:oneshot 的属性设置为 true，那么这个动画只会循环一次并停留在最后一帧。如果设置为 false，那么这个动画将会不停的循环下去。

2. 动画使用。

具体看看MainActivity的代码，

package xinxing.animation.test;
    
    import android.graphics.drawable.AnimationDrawable;
    import android.os.Bundle;
    import android.support.design.widget.FloatingActionButton;
    import android.support.design.widget.Snackbar;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
    import android.view.View;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.widget.ImageView;
    
    public class MainActivity extends AppCompatActivity {
    
        private ImageView iv;
        private AnimationDrawable scanAnimation;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            //方式一
    //        iv = (ImageView) findViewById(R.id.iv_an);
    //        iv.setBackgroundResource(R.drawable.loadanimation);
    //        scanAnimation = (AnimationDrawable) iv.getBackground();
            //方式二
            // 从XML配置文件中读取animatioln-list，初始化AnimationDrawable
            scanAnimation = (AnimationDrawable) getResources().getDrawable(R.drawable.loadanimation);
            // ImageView将AnimationDrawable设置为背景
            iv = (ImageView) findViewById(R.id.iv_an);
            iv.setBackground(scanAnimation);
        }
    
        @Override
        public void onWindowFocusChanged(boolean hasFocus) {
            super.onWindowFocusChanged(hasFocus);
            scanAnimation.start();
        }
    }

代码比较简单，提供了两种方式实现。

**PS: start()方法不能在onCreate()函数中调用。因为AnimationDrawable并未完全关联到Window。如果你想立即执行动画而不需要和用户进行交互，使用监听方法onWindowFoucsChanged()。**

效果如下截图所示：

![Center][]

总结

实现逐帧动画(Frame Animation)，首先需要准备一些图像素材，将这些图像加入到动画xml文件，并且设置显示时间以及循环方式，最后在代码中简单设置即可！ 实现逐帧动画(Frame Animation)还是相对比较简单的！![微笑][smile.gif]！

PS: 逐帧动画(Frame Animation)的使用比较简单，但是比较容易引起OOM，所以在使用逐帧动画(Frame Animation)时，应尽量避免使用过多尺寸较大的图片。

[Center]: /images/20220717/baa1d70e8b044518ba6537968f820c79.png
[smile.gif]: /images/20220717/f24f2f987aca4020b3c071b8cb9518d1.png