這一次讓你徹底瞭解 Android Frame Animation

極速24號發表於2019-03-11

Android

1. 什麼是 FrameAnimation？

通過一定順序展示一系列的影象而形成的動畫叫幀動畫。

Creates an animation by showing a sequence of images in order with an AnimationDrawable

其實我們平時看的電影、電視劇都是由一幀一幀的畫面組成的：

所以從某種意義上說，電影和電視劇也是幀動畫，只不過電影、電視劇較長而且有聲音。

2. FrameAnimation 的作用是什麼？

從上面的定義可知，幀動畫的主要作用是按照一定的順序展示一系列圖片。

3. 如何使用 FrameAnimation？

FrameAnimation 建立方式有兩種：

XML
CODE

3.1 通過 XML 建立 FrameAnimation

3.1.1 語法

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource_name"
        android:duration="integer" />
</animation-list>
複製程式碼

3.1.1.2. 屬性詳解

屬性	含義	取值範圍
xmlns:android	宣告 XML 佈局檔案屬性名稱空間	http://schemas.android.com/apk/res/android
android:oneshot	是否只播放一次	true 僅播放一次，false 一直迴圈播放（預設 false）
android:drawable	FrameAnimation 中每一幀的圖片	Drawable 資源
android:duration	FrameAnimation 中每一幀圖片持續時間	必須大於等於 0，否則程式將報錯

3.1.1.3. 示例

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/people_001" android:duration="20" />
    <item android:drawable="@drawable/people_002" android:duration="20" />
    <item android:drawable="@drawable/people_003" android:duration="20" />
    <item android:drawable="@drawable/people_004" android:duration="20" />
    <item android:drawable="@drawable/people_005" android:duration="20" />
    <item android:drawable="@drawable/people_006" android:duration="20" />
    <item android:drawable="@drawable/people_007" android:duration="20" />
    <item android:drawable="@drawable/people_008" android:duration="20" />
    <item android:drawable="@drawable/people_009" android:duration="20" />
    <item android:drawable="@drawable/people_010" android:duration="20" />
    <item android:drawable="@drawable/people_011" android:duration="20" />
    <item android:drawable="@drawable/people_012" android:duration="20" />
    <item android:drawable="@drawable/people_013" android:duration="20" />
    <item android:drawable="@drawable/people_014" android:duration="20" />
    <item android:drawable="@drawable/people_015" android:duration="20" />
    <item android:drawable="@drawable/people_016" android:duration="20" />
    <item android:drawable="@drawable/people_018" android:duration="20" />
    <item android:drawable="@drawable/people_019" android:duration="20" />
    <item android:drawable="@drawable/people_020" android:duration="20" />
    <item android:drawable="@drawable/people_021" android:duration="20" />
    <item android:drawable="@drawable/people_022" android:duration="20" />
    <item android:drawable="@drawable/people_023" android:duration="20" />
    <item android:drawable="@drawable/people_024" android:duration="20" />
    <item android:drawable="@drawable/people_025" android:duration="20" />
    <item android:drawable="@drawable/people_026" android:duration="20" />
    <item android:drawable="@drawable/people_027" android:duration="20" />
    <item android:drawable="@drawable/people_028" android:duration="20" />
    <item android:drawable="@drawable/people_029" android:duration="20" />
    <item android:drawable="@drawable/people_030" android:duration="20" />
</animation-list>
複製程式碼

最終效果如下：

3.2 通過 CODE 建立 FrameAnimation

3.2.1 語法

AnimationDrawable drawable = new AnimationDrawable();
drawable.setOneShot(boolean oneShot);
drawable.addFrame(Drawable frame, int duration);
...
ImageView.setBackground(drawable);
drawable.start();
drawable.stop();
複製程式碼

3.2.2 示例

AnimationDrawable mAnimationDrawable = new AnimationDrawable();
mAnimationDrawable.setOneShot(false);
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_001),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_002),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_003),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_004),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_005),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_006),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_007),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_008),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_009),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_010),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_011),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_012),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_013),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_014),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_015),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_016),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_017),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_018),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_019),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_020),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_021),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_022),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_023),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_024),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_025),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_026),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_027),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_028),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_029),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_030),getResources().getInteger(R.integer.integer_twenty));
mTarget.setBackground(mAnimationDrawable);
mAnimationDrawable.start();
複製程式碼

最終效果如下：

4. 應用例項

早些時候，很多軟體的等待對話方塊都是通過 FrameAnimation + Dialog 實現的，最經典的例子當屬大眾點評，不過昨晚再去看的時候，發現大眾點評早已“面目全非”，那我們自己動手寫一個吧。

//1. 自定義 Dialog

//1.1 Dialog 佈局檔案
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/custom_dialog_target"
    android:layout_width="@dimen/avatar_background_size_xx"
    android:layout_height="@dimen/avatar_background_size_xx"
    android:background="@drawable/people_walk" />
    
//1.2 Dialog 類
public class CustomDialog extends Dialog {


    public CustomDialog(Context context) {
        super(context, R.style.CustomDialog);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.dialog_custom);
    }

}

//2. 應用自定義 Dialog

//2.1 Activity 佈局檔案
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tween_animation_root_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true"
    android:background="@color/white">

    <Button
        android:id="@+id/frame_animation_target"
        android:layout_width="@dimen/avatar_background_size_xx"
        android:layout_height="@dimen/avatar_background_size_xx"
        android:layout_centerInParent="true"
        android:background="@drawable/selector_button_common"
        android:text="@string/dialog"
        android:textSize="@dimen/medium_font" />

</RelativeLayout>

//2.2 Activity 類
public class FrameAnimationApplicationActivity extends AppCompatActivity implements View.OnClickListener, Dialog.OnShowListener, Dialog.OnDismissListener {

    private Button mTarget;
    private Dialog mDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_frame_animation_application);
        initView();
        initData();
    }

    private void initView(){
        mTarget = findViewById(R.id.frame_animation_target);
        mTarget.setOnClickListener(this);
    }

    private void initData(){

    }

    @Override
    public void onClick(View v) {
        showDialog();
    }

    private void showDialog(){
        mDialog = new CustomDialog(this);
        mDialog.setOnShowListener(this);
        mDialog.setOnDismissListener(this);
        mDialog.show();

    }

    @Override
    public void onDismiss(DialogInterface dialog) {
        ImageView target = mDialog.findViewById(R.id.custom_dialog_target);
        AnimationDrawable animationDrawable = (AnimationDrawable)target.getBackground();
        animationDrawable.stop();
        mTarget.setVisibility(View.VISIBLE);
    }

    @Override
    public void onShow(DialogInterface dialog) {
        ImageView target = mDialog.findViewById(R.id.custom_dialog_target);
        AnimationDrawable animationDrawable = (AnimationDrawable)target.getBackground();
        animationDrawable.start();
        mTarget.setVisibility(View.GONE);
    }
    
}
複製程式碼

最終效果如下：

我在這裡只是拋磚引玉，FrameAnimation 的更多有意思的用法還要靠小夥伴發揮自己的想象力去想。

5. 參考文獻

這一次讓你徹底瞭解 Android Tween Animation
2019-03-10
Android
這一次帶你徹底瞭解前端本地儲存
2021-11-01
前端
這次我讓你徹底弄懂 RESTful
2020-12-02
REST
讓你徹底瞭解SQL隱碼攻擊、XSS和CSRF
2019-03-26
SQL
一篇文章讓你徹底瞭解Java內部類
2018-08-23
Java
一文讓你徹底瞭解iOS字型相關知識
2016-02-15
iOS
筆記-runtime原始碼解析之讓你徹底瞭解底層原始碼
2019-03-28
筆記原始碼
這一次，徹底幫你搞明白 ImageView ScaleType
2019-04-01
View
這一次，讓你徹底理解Java的值傳遞和引用傳遞！
2018-11-09
Java
[精]--這一次，讓你徹底明白Java的值傳遞和引用傳遞！
2018-10-31
Java
讓你徹底理解 “==”與 Equals
2013-09-05
Android基礎動畫之Tween Animation和Frame Animation
2017-12-15
Android動畫
如何選購掃地機器人？看完此文你會徹底瞭解
2019-05-05
機器人
這一次，徹底掌握go mod
2020-07-26
Go
對JVM還一知半解？這篇文章讓你徹底搞定JVM！
2018-10-18
JVM
看完讓你徹底搞懂Websocket原理
2021-09-09
Web
這一次，徹底搞懂 Go Cond
2021-04-23
Go
Android 圖文教學讓你徹底理解activity啟動模式
2015-12-11
Android模式
15天玩轉redis —— 第十一篇讓你徹底瞭解RDB儲存結構
2015-12-25
Redis
這一次，徹底理解XSS攻擊
2020-12-31
Android動畫效果之Frame Animation（逐幀動畫）
2016-08-04
Android動畫
一個故事讓你徹底理解 Https
2017-12-12
HTTP
30分鐘，讓你徹底明白Promise原理
2017-05-27
Promise
九種 “姿勢” 讓你徹底解決跨域問題
2019-01-06
跨域
這篇文章讓你徹底搞懂ES6中的Class（全面解析）
2020-01-20
8000字長文讓你徹底瞭解 Java 8 的 Lambda、函式式介面、Stream 用法和原理
2020-06-10
Java函式
這一次，徹底弄懂 JavaScript 執行機制
1970-01-01
JavaScript
這一次，徹底解決Java的值傳遞和引用傳遞
2021-12-08
Java
一帖讓PHP小白徹底瞭解PDO運算元據庫的方法
2017-05-27
PHP
徹底瞭解 ab 測試的計算公式
2020-06-08
公式
HashMap原始碼分析(二):看完徹底瞭解HashMap
2019-07-18
HashMap原始碼
這一次，徹底讀懂Mysql執行計劃
2018-01-08
MySql
一文讓你徹底理解 Java NIO 核心元件
2018-09-27
Java元件
圖解｜這次，徹底理解MySQL的索引
2023-02-14
圖解MySql索引
這一次，徹底弄懂JS執行機制（Event Loop）
2018-06-26
JSOOP
Spirit帶你徹底瞭解事件捕獲和冒泡機制
2021-09-18
事件
一篇文章讓你徹底掌握 shell 語言
2019-02-27
一文讓你徹底理解 Java HashMap 和 ConcurrentHashMap
2018-07-25
JavaHashMap

這一次讓你徹底瞭解 Android Frame Animation

1. 什麼是 FrameAnimation？

2. FrameAnimation 的作用是什麼？

3. 如何使用 FrameAnimation？

3.1 通過 XML 建立 FrameAnimation

3.1.1 語法

3.1.1.2. 屬性詳解

3.1.1.3. 示例

3.2 通過 CODE 建立 FrameAnimation

3.2.1 語法

3.2.2 示例

4. 應用例項

5. 參考文獻

相關文章