Android學習指南之二十四：Android動畫的實現 上

       在Android系統中也能經常見到動畫，那麼如何實現動畫效果呢？本文就來為大家介紹動畫的實現方式。

       Android中動畫的實現分兩種方式，一種方式是補間動畫Tween Animation，就是說你定義一個開始和結束，中間的部分由程序運算得到。另一種叫逐幀動畫Frame Animation，就是說一幀一幀的連起來播放就變成了動畫。有點Flash基礎的同學理解起來會很容易。接下來我們一個一個學習。

       一、補間動畫Tween Animation

       Android中實現補間動畫的思路是這樣的，

       1、首先用XML定義一個動畫效果

       2、依據這個XML使用AnimationUtils工具類創建一個Animationd對象

       3、調用View組件的startAnimation方法實現動畫。

       接下來我們用一個例子來看一下。

       1、創建一個項目Lesson24_Animation，主Activity名字叫MainActivity.java

       2、在res目錄下創建一個anim目錄，在目錄下創建下面五個動畫定義文件，需要注意的是這5個文件在是2.2下調試通過的，網上很多文檔的xml是無法通過IDE的檢查的，可能是新版本檢查更嚴格了。

       alpha_animation.xml

XML/HTML代碼

1. <?xml version="1.0" encoding="utf-8"?>  

       composite_animation.xml

XML/HTML代碼

1.   

       rotate_animation.xml

XML/HTML代碼

1. <?xml version="1.0" encoding="utf-8"?>  

       scale_animation.xml

XML/HTML代碼

1. <?xml version="1.0" encoding="utf-8"?>  

       translate_animation.xml

XML/HTML代碼

1. <?xml version="1.0" encoding="utf-8"?>  

       3、MainActivity.java的內容如下：

Java代碼

1. package android.basic.lesson24;   
2.   
3. import android.app.Activity;   
4. import android.os.Bundle;   
5. import android.view.View;   
6. import android.view.View.OnClickListener;   
7. import android.view.animation.Animation;   
8. import android.view.animation.AnimationUtils;   
9. import android.widget.ImageButton;   
10.   
11. public class MainAnimation extends Activity {   
12.     /** Called when the activity is first created. */  
13.     @Override  
14.     public void onCreate(Bundle savedInstanceState) {   
15.         super.onCreate(savedInstanceState);   
16.         setContentView(R.layout.main);   
17.   
18.         //定義UI組件   
19.         final ImageButton ib1 = (ImageButton) findViewById(R.id.ImageButton01);   
20.         final ImageButton ib2 = (ImageButton) findViewById(R.id.ImageButton02);   
21.         final ImageButton ib3 = (ImageButton) findViewById(R.id.ImageButton03);   
22.         final ImageButton ib4 = (ImageButton) findViewById(R.id.ImageButton04);   
23.         final ImageButton ib5 = (ImageButton) findViewById(R.id.ImageButton05);   
24.   
25.         //定義監聽器   
26.         OnClickListener ocl = new OnClickListener() {   
27.   
28.             @Override  
29.             public void onClick(View v) {   
30.                 switch (v.getId()) {   
31.                 case R.id.ImageButton01:   
32.                     //創建Animation對象   
33.                     Animation ani1 = AnimationUtils.loadAnimation(   
34.                             getApplicationContext(), R.anim.alpha_animation);   
35.                     //組件播放動畫   
36.                     ib1.startAnimation(ani1);   
37.                     break;   
38.                 case R.id.ImageButton02:   
39.                     Animation ani2 = AnimationUtils.loadAnimation(   
40.                             getApplicationContext(), R.anim.scale_animation);   
41.                     ib2.startAnimation(ani2);   
42.                     break;   
43.                 case R.id.ImageButton03:   
44.                     Animation ani3 = AnimationUtils.loadAnimation(   
45.                             getApplicationContext(), R.anim.translate_animation);   
46.                     ib3.startAnimation(ani3);   
47.                     break;   
48.                 case R.id.ImageButton04:   
49.                     Animation ani4 = AnimationUtils.loadAnimation(   
50.                             getApplicationContext(), R.anim.rotate_animation);   
51.                     ib4.startAnimation(ani4);   
52.                     break;   
53.                 case R.id.ImageButton05:   
54.                     Animation ani5 = AnimationUtils.loadAnimation(   
55.                             getApplicationContext(), R.anim.composite_animation);   
56.                     ib5.startAnimation(ani5);   
57.                     break;   
58.                 }   
59.   
60.             }   
61.   
62.         };   
63.   
64.         //綁定監聽器   
65.         ib1.setOnClickListener(ocl);   
66.         ib2.setOnClickListener(ocl);   
67.         ib3.setOnClickListener(ocl);   
68.         ib4.setOnClickListener(ocl);   
69.         ib5.setOnClickListener(ocl);   
70.     }   
71. }  

       4、運行程序，查看結果。

       原始圖：

       點擊第一個按鈕的透明度變化效果：

       點擊第二個按鈕的縮放效果，這裡看到的是兩個縮放效果同時作用疊加的效果。也就是說默認情況下效果是同時發生的，而不是先後執行的，除非你使用 startoffset屬性指定。同學們看這一講最重要的還是自己練習來體會。

       點擊第三個按鈕的位移效果，這個例子裡我們可以清楚看到android:startOffset=”2000″的作用，數獨按鈕前2秒向右移了300像素，後2秒又回到原處，注意第二個translate中的負值參數，它清晰的告訴我們位移數據是相對自身當時位置的。

       點擊第四個按鈕的旋轉效果，負的度數表示逆時針旋轉。

       點擊第五個按鈕的復合動畫效果，這個效果的代碼我是直接粘貼的官方幫助文檔裡的代碼，看著效果還不賴^_^

       二、逐幀動畫

       我們知道，Android是不支持Gif動畫的，也不建議使用Gif動畫，比較不幸的是到Android 2.2版本為止也不支持APNG這種png動畫格式，所以我們制作只能用多張png圖片逐幀播放的方式來實現動畫效果。下面我們用一個例子來學習一下逐幀動畫。

       1、新建一個項目Lesson24_FrameAnimation ，主Acitivy名字叫 MainFrameAnimation.java。

       2、將下圖中的每個小圖片分開，即25張小圖片，拷貝到res/drawable目錄下。

       3、在res/anim目錄下，新建一個文件 firefox_animation.xml 內容如下：

XML/HTML代碼

1. <?xml version="1.0" encoding="utf-8"?>  

       4、在res/layout/main.xml中寫入如下內容：

XML/HTML代碼

1. <?xml version="1.0" encoding="utf-8"?>  
2. <BUTTON type=submit>  
3. </BUTTON>  
4. <BUTTON type=submit>  
5. </BUTTON>  

       5、在MainFrameAnimation.javaz中的內容如下：

Java代碼

1. package android.basic.lesson24;   
2.   
3. import android.app.Activity;   
4. import android.graphics.drawable.AnimationDrawable;   
5. import android.os.Bundle;   
6. import android.view.View;   
7. import android.view.View.OnClickListener;   
8. import android.widget.Button;   
9. import android.widget.ImageView;   
10.   
11. public class MainFrameAnimaton extends Activity {   
12.     /** Called when the activity is first created. */  
13.     @Override  
14.     public void onCreate(Bundle savedInstanceState) {   
15.         super.onCreate(savedInstanceState);   
16.         setContentView(R.layout.main);   
17.   
18.         // 定義UI組件   
19.         Button b1 = (Button) findViewById(R.id.Button01);   
20.         Button b2 = (Button) findViewById(R.id.Button02);   
21.         final ImageView iv = (ImageView) findViewById(R.id.ImageView01);   
22.   
23.         // 定義點擊監聽器   
24.         OnClickListener ocl = new OnClickListener() {   
25.   
26.             @Override  
27.             public void onClick(View v) {   
28.   
29.                 // 定義"動畫可畫"對象，我起的名字，你看著不順眼就當不存在^_^   
30.                 AnimationDrawable ad = (AnimationDrawable) iv.getBackground();   
31.   
32.                 switch (v.getId()) {   
33.                 case R.id.Button01:   
34.                     //調用動畫可畫對象的開始播放方法   
35.                     ad.start();   
36.                     break;   
37.                 case R.id.Button02:   
38.                     //調用動畫可畫對象的停止播放方法   
39.                     ad.stop();   
40.                     break;   
41.                 }   
42.             }   
43.         };   
44.   
45.         //綁定監聽器   
46.         b1.setOnClickListener(ocl);   
47.         b2.setOnClickListener(ocl);   
48.     }   
49. }  

       6、運行程序，查看效果：

       換個背景再來一張，可以看到png動畫的透明就是不一般^_^

       順便提一下，我的這些可愛的小狐狸圖標，是在APNG這個項目中找到的，感興趣的朋友去搜搜APNG吧。

       本節關於動畫的內容先講到這裡，歡迎繼續關注。