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 的更多有意思的用法還要靠小夥伴發揮自己的想象力去想。