Android Animation 高手必讀 之一 Tweened Animations 代碼實現

Android提供了兩種動畫的機制，可以通過SurfaceView來一幀一幀的繪製，同樣也可以通過Animation機制。 Animations分類 Animations分為兩種機制：Tweened Animations和Frame-by-FrameAnimations。 Tweened類似於flash，通過旋轉、移動、縮放等實現動畫效果，而Frame-by-FrameAnimations是類似於電影，通過改變每一幀的顯示來實現動畫效果。 其實Animation就是先寫好對象要發生的動作，比如說平移，變形等。然後你需要哪個View或者View的子類，來完成這些預定義好的動作，只要給他們添加，就可以了。這部分的內容還是蠻多的，但是相對簡單，本節只介紹Tweened Animations。 Tweened Animations 1所示，Tweened Animations有如下四種方式實現動畫，對於每一種方式，Android都提供了一個類來實現。[url=]AlphaAnimation[/url], [url=]AnimationSet[/url], [url=]RotateAnimation[/url], [url=]ScaleAnimation[/url], [url=]TranslateAnimation[/url] 。 2011-9-30 12:35:17 上傳 下載附件 (6.66 KB) 圖1 Tweened Animations四種方式實現動畫 對於每一種，筆者都會給出例子來詳細解釋。出於由簡到難的考慮，首先介紹Alpha。 Alpha alpha這個詞詳細如果有過opengl 開發經驗的朋友一定不會陌生，沒錯，他就是設定透明度的。讓我們先看一組表徵圖，這樣你就會加深對alpha的認識。2所示，實現了透明度變化的表徵圖和按鈕的效果。 2011-9-30 12:35:13 上傳 下載附件 (17.33 KB) 圖2 色彩坡形demo 如果要實現view的透明度變化，就要去實現alpha 的Animation。具體方法分為如下4部分： q      執行個體化AnimationSet對象 q      執行個體化Animation對象 q      設定Animation對象屬性 q      為View添加AnimationSet 這裡要強調的就是Animation的構造方法如下： AlphaAnimation aa = new AlphaAnimation(1, 0);//2.建立需要的animation 相對來說，alpha的構造方法最為簡單。其第一個參數是出示時的透明度，0為完全透明，1為不透明。第二個參數為動畫結束時的透明度。 aa.setDuration(2000);//設定動畫的時間 通過上面這句可以設定動畫播放的時間。 具體代碼我會在最後給出。 Scale scale為縮放，在瞭解Scale之前我們先看看其運行效果。3所示。 2011-9-30 12:35:14 上傳 下載附件 (30.44 KB) 圖3 scale demo 以上是Scale最簡單的構造方法： ScaleAnimation aa = new ScaleAnimation(1, 2, 1, 2);//2.建立需要的animation,這種構造方法是以自身為pivot q      第1個參數為初始時x的大小，其中1為自身長度，同一2為自身長度的2倍，下同 q      第2個參數為結束動畫時x的大小 q      第3個參數為初始時y的大小 q      第4個參數為結束動畫時y的大小 如果你以為你已經學會了Scale，那我只能說你是淺嘗輒止。下面介紹其另一個構造方法，該方法更加靈活。 ScaleAnimation aa = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f); q      其四個參數同上，不解釋 q      第五個參數是設定樞軸，可以是以自身，亦可以使用父view的，甚至可以誰用絕對數值。這裡之後會解釋。如果不明白可先忽略。 q      第六個參數是設定x樞軸的座標。 q      接下來的兩個參數同上，是設定y座標的。 也許這裡讀者肯定不會明白樞軸的意思，那麼我就用上面的方法來構造Animation並運行看看效果。請看圖4. 2011-9-30 12:35:15 上傳 下載附件 (47.83 KB) 圖4 scale Demo2 ，View控制項在自身大小變化的同時，位置也在改變。後面的幾個參數是設定其初始位置。如果以父view為參考，值為0.5f的話，那麼就是當前父View的中間。 讀者可能會問到，怎麼不是螢幕的中心位置，我認為他是根據布局檔案來決定位置的，當前的布局檔案為LinearLayout，其設定為向下一次新增內容，如果設定y座標為0.5f，則Android會認為你是要在當前布局接下來新增內容的位置的y軸中間。 Transfer 如果明白了樞軸的概念，那麼Transfer平移就很簡單了，5所示，為平移的例子。 2011-9-30 12:35:16 上傳 下載附件 (32.76 KB) 圖5 平移 demo 以上平移的執行個體化方法如下： TranslateAnimation aa = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 1, Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 1); 讀者結合api，相信理解這個方法應該還是比較容易的，這裡就不在贅述，如果有問題，可以給留言。 Rotate 旋轉，這個也是比較容易，看示範，6所示。 2011-9-30 12:35:16 上傳 下載附件 (35.43 KB) 圖6 旋轉demo 其構造方法如下： RotateAnimation aa = new RotateAnimation(0, 270, Animation.RELATIVE_TO_PARENT, 0.2f, Animation.RELATIVE_TO_PARENT, 0.2f); 綜合 Animation不但可以單獨使用，還可以設定多個Animation然後添加到AnimationSet中。在對View調用，在例子中我給出了一個綜合的例子，讀者自行查看，檢測自己是否已經明白這塊知識。 代碼 本節參考AnimationDemo1例子。 限於本人水平有限，如有不足之處，請多多指正。 Java代碼 <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"                 android:layout_width="fill_parent"                 android:layout_height="wrap_content"         >         <LinearLayout             android:orientation="vertical"             android:layout_width="fill_parent"             android:layout_height="fill_parent"             >                 <Button                         android:text="alpha"                         android:id="@+id/Button01"                         android:layout_width="wrap_content"                         android:layout_height="wrap_content">                                         </Button>                 <ImageView                         android:id="@+id/iv1"                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:src = "@drawable/icon"                 >                 </ImageView>                                 <Button                         android:text="scale"                         android:id="@+id/Button02"                         android:layout_width="wrap_content"                         android:layout_height="wrap_content">                                         </Button>                 <ImageView                         android:id="@+id/iv2"                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:src = "@drawable/icon"                 >                 </ImageView>                                 <Button                         android:text="rotate"                         android:id="@+id/Button03"                         android:layout_width="wrap_content"                         android:layout_height="wrap_content">                                         </Button>                 <ImageView                         android:id="@+id/iv3"                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:src = "@drawable/icon"                 >                 </ImageView>                                 <Button                         android:text="transf"                         android:id="@+id/Button04"                         android:layout_width="wrap_content"                         android:layout_height="wrap_content">                                         </Button>                 <ImageView                         android:id="@+id/iv4"                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:src = "@drawable/icon"                 >                 </ImageView>                                 <Button                         android:text="complex"                         android:id="@+id/Button05"                         android:layout_width="wrap_content"                         android:layout_height="wrap_content">                                         </Button>                 <ImageView                         android:id="@+id/iv5"                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:src = "@drawable/icon"                 >                 </ImageView>         </LinearLayout>                                                                        </ScrollView> 複製代碼 Java代碼 package cn.edu.heut.zcl; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.AlphaAnimation; import android.view.animation.Animation; import android.view.animation.AnimationSet; import android.view.animation.RotateAnimation; import android.view.animation.ScaleAnimation; import android.view.animation.TranslateAnimation; import android.widget.Button; import android.widget.ImageButton; import android.widget.ImageView; public class DemoActivity extends Activity implements OnClickListener{     /** Called when the activity is first created. */         Button alphaBut ;         Button scaleBut ;         Button rotateBut ;         Button transfBut ;         Button complexBut ;                 ImageView iv1;         ImageView iv2;         ImageView iv3;         ImageView iv4;         ImageView iv5;                 AnimationSet as ;     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.main);         alphaBut = (Button)findViewById(R.id.Button01);         scaleBut = (Button)findViewById(R.id.Button02);         rotateBut = (Button)findViewById(R.id.Button03);         transfBut = (Button)findViewById(R.id.Button04);         complexBut = (Button)findViewById(R.id.Button05);                  alphaBut.setOnClickListener(this);         scaleBut.setOnClickListener(this);         rotateBut.setOnClickListener(this);         transfBut.setOnClickListener(this);         complexBut.setOnClickListener(this);                  iv1 = (ImageView)findViewById(R.id.iv1);         iv2 = (ImageView)findViewById(R.id.iv2);         iv3 = (ImageView)findViewById(R.id.iv3);         iv4 = (ImageView)findViewById(R.id.iv4);         iv5 = (ImageView)findViewById(R.id.iv5);            }         @Override         public void onClick(View v) {                 Button b = (Button)v;                 switch(b.getId()){                 case R.id.Button01://alpha                         alphaAnimation();                         break;                 case R.id.Button02://scale                         scaleAnimation();                         break;                 case R.id.Button03://rotate                         rotateAnimation();                         break;                 case R.id.Button04 ://transf                         transfAnimation();                         break;                 case R.id.Button05 ://complex                         complexAnimation();                         break;                 }                         }         /**          * 綜合例子          */         private void complexAnimation() {                 as = new AnimationSet(true);//1.執行個體化AnimationSet                                 TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 0);                 ta.setDuration(5000);//設定動畫的時間                                 AlphaAnimation aa = new AlphaAnimation(1, 0.3f);//2.建立需要的animation                 aa.setDuration(3000);                                 as.addAnimation(ta);//3.將animation加入AnimationSet                 as.addAnimation(aa);//3.將animation加入AnimationSet                                                 as.setFillAfter(true);//最終停止                                 complexBut.startAnimation(as);//4.開始動畫                 iv5.startAnimation(as);//開始動畫         }         /**          * 平移          */         private void transfAnimation() {                 as = new AnimationSet(true);//1.執行個體化AnimationSet                 TranslateAnimation aa = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 1, Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 1);                 aa.setDuration(5000);//設定動畫的時間                 as.addAnimation(aa);//3.將animation加入AnimationSet                 transfBut.startAnimation(as);//4.開始動畫                 iv4.startAnimation(as);//開始動畫         }         /**          * 旋轉          */         private void rotateAnimation() {                 as = new AnimationSet(true);//1.執行個體化AnimationSet                 RotateAnimation aa = new RotateAnimation(0, 270, Animation.RELATIVE_TO_PARENT, 0.2f, Animation.RELATIVE_TO_PARENT, 0.2f);                 aa.setDuration(5000);//設定動畫的時間                 as.addAnimation(aa);//3.將animation加入AnimationSet                 rotateBut.startAnimation(as);//4.開始動畫                 iv3.startAnimation(as);//開始動畫         }         /**          * 變化大小          */         private void scaleAnimation() {                 as = new AnimationSet(true);//1.執行個體化AnimationSet //                ScaleAnimation aa = new ScaleAnimation(1, 2, 1, 2);//2.建立需要的animation,這種構造方法是以自身為pivot                 ScaleAnimation aa = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);                 aa.setDuration(7000);//設定動畫的時間                 as.addAnimation(aa);//3.將animation加入AnimationSet                 scaleBut.startAnimation(as);//4.開始動畫                 iv2.startAnimation(as);//開始動畫         }         /**          * 透明度漸層          */         private void alphaAnimation(){                 as = new AnimationSet(true);//1.執行個體化AnimationSet                 AlphaAnimation aa = new AlphaAnimation(1, 0);//2.建立需要的animation                 aa.setDuration(2000);//設定動畫的時間                 as.addAnimation(aa);//3.將animation加入AnimationSet                 alphaBut.startAnimation(as);//4.開始動畫                 iv1.startAnimation(as);//開始動畫         }     } 複製代碼