【Frame Animation 逐幀動畫】
阿新 • • 發佈:2019-02-14
1、 本文要完成的任務有:
多張連續圖片組成常見的動畫效果(暫時有5種)
按鈕控制動畫的播放與停止
2、 效果展示圖如下:
3、任務具體實現:
1--->首先我們要準備一系列連續的圖片,選擇其中一組圖片如下:
2--->需要在res/drawable目錄下新建一個名為frame_animation_02.xml檔案,內容如下:
<span style="font-family:Comic Sans MS;font-size:18px;"><?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" > <!-- 根標籤為animation-list,其中oneshot代表著是否只展示一遍,設定為false會不停的迴圈播放動畫 根標籤下,通過item標籤對動畫中的每一個圖片進行宣告 android:duration 表示展示所用的該圖片的時長,單位是毫秒 --> <item android:drawable="@drawable/loading_f03" android:duration="100"/> <item android:drawable="@drawable/loading_f04" android:duration="100"/> <item android:drawable="@drawable/loading_f05" android:duration="100"/> <item android:drawable="@drawable/loading_f06" android:duration="100"/> <item android:drawable="@drawable/loading_f07" android:duration="100"/> <item android:drawable="@drawable/loading_f08" android:duration="100"/> <item android:drawable="@drawable/loading_f09" android:duration="100"/> <item android:drawable="@drawable/loading_f10" android:duration="100"/> </animation-list></span>
3--->在佈局檔案中加入一個IamgeView圖片控制元件用來顯示動畫,不加任何程式碼,動畫會自動播放,如下:
<span style="font-family:Comic Sans MS;font-size:18px;"> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/frame_animation_02" android:layout_marginTop="100dp" android:layout_centerHorizontal="true"/></span>
4--->如果我們想在程式碼中控制動畫的播放與停止,就需要一個特別的型別AnimationDrawable,播放與停止程式碼如下:
5--->本文中播放了5組常見的幀動畫,所以使用了陣列,輪流播放,程式碼如下:<span style="font-family:Comic Sans MS;font-size:18px;"> //播放動畫 private void playAnimation(){ AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable(); animationDrawable.start(); } //停止動畫 private void stopAnimation(){ AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable(); animationDrawable.stop(); }</span>
<span style="font-family:Comic Sans MS;font-size:18px;"> private int[] animationDrawableIds = {
R.drawable.frame_animation_01,
R.drawable.frame_animation_02,
R.drawable.frame_animation_03,
R.drawable.frame_animation_04,
R.drawable.frame_animation_05
};
//播放下一組動畫
private void setNextAnimationDrawable(){
currentIndex++;
if(currentIndex == animationDrawableIds.length){
currentIndex = 0;
}
//設定動畫
imageView.setImageResource(animationDrawableIds[currentIndex]);
//播放動畫
playAnimation();
}</span>