關(guān)于 Android 的動畫學(xué)習(xí)可以分為以下幾個大類：

• 逐幀動畫
• 補(bǔ)間動畫（也說 View 動畫）
• 屬性動畫
• 轉(zhuǎn)場動畫
  這里注意，我只是從學(xué)習(xí)的角度分為了這四類；從面試的角度，只需要說前面三類，轉(zhuǎn)場動畫只是一種動畫形態(tài)，不是一個類別。

本篇詳細(xì)學(xué)習(xí)逐幀動畫。

主要內(nèi)容

• 逐幀動畫的概念
• 如何使用
• 實(shí)戰(zhàn)操作

什么是逐幀動畫？

小時候大家可能做過一件事情，在書的一角，每一頁都畫一個圖，然后快速翻看，就形成了連續(xù)的動畫效果，這就是逐幀動畫。視頻技術(shù)也一樣，要求1秒內(nèi)達(dá)到多少幀，通過視覺停留讓我們感覺是連貫的影片，如果單位時間內(nèi)的幀數(shù)很少，那我們就會感到明顯的頓挫感。

如何使用？

1、通過上面的描述我們已經(jīng)了解到逐幀動畫就是一幀一幀連續(xù)播放的效果。
2、準(zhǔn)備好一組圖片，這組圖片連續(xù)播放后能形成視頻的感覺。比如日落效果，我們可以準(zhǔn)備一組不同位置的太陽圖片，由高到低；比如汽車前行的效果，準(zhǔn)備一組行駛在路上不同位置的汽車照片，每張圖片中汽車的位移相差1米。圖片的數(shù)量可以是任意的，5張、10張、20張，給每張圖片設(shè)定一個顯示的時間，例如200毫秒，那么這些圖片就會每200毫秒依次播放，最終形成逐幀動畫的效果。

實(shí)戰(zhàn)操作

先看下面這張Gif圖：

逐幀動畫實(shí)現(xiàn)Loading效果

我們看到是一個持續(xù)旋轉(zhuǎn)加載的效果，但這其實(shí)是8張靜態(tài)圖片通過逐幀動畫實(shí)現(xiàn)的。

8張靜態(tài)圖片

首先我們將制作好的8張圖片放到項(xiàng)目目錄 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" 表示循環(huán)播放，如果為 true 的話，則只播放一次便停止在最后一張圖。有幾張圖片就寫幾個item，duration 表示這張圖片的播放時長，單位是毫秒，這里是200毫秒。

接著在頁面布局文件中放置一個 ImageView 控件，給 ImageView 設(shè)置 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>

但是注意，設(shè)置完了 background 之后，動畫并不會播放，因?yàn)槟J(rèn)是不播放，需要我們在代碼中調(diào)用 AnimationDrawable 的 start() 方法來啟動，如果需要停止的話，可以調(diào)用 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();
    }
}

把用到的圖片分享給大家
資源圖片

謝謝支持！

歡迎關(guān)注微信公眾號：程序員都關(guān)注

看完這篇，你就算精通TextView了
Android 布局優(yōu)化
Android 視頻教程