1. 程式人生 > >【Frame Animation 逐幀動畫】

【Frame Animation 逐幀動畫】

  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,播放與停止程式碼如下:

<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>
5--->本文中播放了5組常見的幀動畫,所以使用了陣列,輪流播放,程式碼如下:
<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>