关于 Android 的动画学习可以分为以下几个大类：
- 逐帧动画
- 补间动画（也说 View 动画）
- 属性动画
- 转场动画
这里注意，我只是从学习的角度分为了这四类；从面试的角度，只需要说前面三类，转场动画只是一种动画形态，不是一个类别。
本篇详细学习逐帧动画。
主要内容
- 逐帧动画的概念
- 如何使用
- 实战操作
什么是逐帧动画？
小时候大家可能做过一件事情，在书的一角，每一页都画一个图，然后快速翻看，就形成了连续的动画效果，这就是逐帧动画。视频技术也一样，要求1秒内达到多少帧，通过视觉停留让我们感觉是连贯的影片，如果单位时间内的帧数很少，那我们就会感到明显的顿挫感。
如何使用？
1、通过上面的描述我们已经了解到逐帧动画就是一帧一帧连续播放的效果。
2、准备好一组图片，这组图片连续播放后能形成视频的感觉。比如日落效果，我们可以准备一组不同位置的太阳图片，由高到低；比如汽车前行的效果，准备一组行驶在路上不同位置的汽车照片，每张图片中汽车的位移相差1米。图片的数量可以是任意的，5张、10张、20张，给每张图片设定一个显示的时间，例如200毫秒，那么这些图片就会每200毫秒依次播放，最终形成逐帧动画的效果。
实战操作
先看下面这张Gif图：
逐帧动画实现Loading效果
我们看到是一个持续旋转加载的效果，但这其实是8张静态图片通过逐帧动画实现的。
8张静态图片
首先我们将制作好的8张图片放到项目目录 res/drawable-xxhdpi 下面（没有这个文件夹的话可以新建一个），然后在 drawable 文件夹下新建一个动画 xml 文件。
右击 drawable 文件夹，选择 New -> Drawable resource file，如下图：
新建动画xml文件
输入文件名，比如 progress_round，Root element 选择 animation-list
输入文件名，选择 Root element
progress_round.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/progress_1" android:duration="200"/>
<item android:drawable="@drawable/progress_2" android:duration="200"/>
<item android:drawable="@drawable/progress_3" android:duration="200"/>
<item android:drawable="@drawable/progress_4" android:duration="200"/>
<item android:drawable="@drawable/progress_5" android:duration="200"/>
<item android:drawable="@drawable/progress_6" android:duration="200"/>
<item android:drawable="@drawable/progress_7" android:duration="200"/>
<item android:drawable="@drawable/progress_8" android:duration="200"/>
</animation-list>
按照上面的写法，android:oneshot="false" 表示循环播放，如果为 true 的话，则只播放一次便停止在最后一张图。有几张图片就写几个item，duration 表示这张图片的播放时长，单位是毫秒，这里是200毫秒。
接着在页面布局文件中放置一个 ImageView 控件，给 ImageView 设置 background，引用上面的 progress_round.xml 动画文件。
activity_anim_frame.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp">
<ImageView
android:id="@+id/btn_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/progress_round"
android:layout_centerInParent="true"/>
</RelativeLayout>
但是注意，设置完了 background 之后，动画并不会播放，因为默认是不播放，需要我们在代码中调用 AnimationDrawable 的 start() 方法来启动，如果需要停止的话，可以调用 AnimationDrawable 的 stop() 方法。
FrameAnimActivity.class:
package com.skypan.helloworld.anim;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import com.skypan.helloworld.R;
public class FrameAnimActivity extends AppCompatActivity {
private ImageView mIvFrame;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_anim_frame);
mIvFrame = (ImageView) findViewById(R.id.btn_frame);
AnimationDrawable animationDrawable = (AnimationDrawable) mIvFrame.getBackground();
animationDrawable.start();
}
}
把用到的图片分享给大家
资源图片
网友评论