一塊兒學Android之Animation

本文以一個簡單的小例子，簡述在Android開發中，動畫的簡單應用，僅供學習分享使用。

概述

android提供了各類強大的apis，用於將動畫應用到ui元素中，來豐富應用程序的功能和應用。

動畫分類

在Android框架中，動畫主要分爲三類【這三種動畫系統都是可行的選擇，但通常來講，屬性動畫系統是首選的使用方法，由於它更靈活，提供了更多的功能】，具體以下：

• 幀動畫：將圖像資源按順序一幀一幀的播放出來，造成動畫（）。
• 補間動畫：又叫視圖動畫，是比較舊的系統，只能用於視圖組件，相對比較容易設置和提供能力知足程序的須要。
• 屬性動畫：在android 3.0（api等級11）中引入的屬性動畫系統，容許您對任何對象的屬性進行動畫處理，包括未呈現到屏幕上的屬性。該系統是可擴展的，並容許自定義動畫類型的屬性。

幀動畫

將動畫資源文件做爲圖片控件（ImageView）的背景圖（background）。

幀動畫涉及知識點以下：

• AnimationDrawable: 用於建立逐幀動畫的對象，由一系列可拖動對象，可用做視圖對象的背景。
• isRunning() 是否正在運行
• stop() 中止動畫
• start() 開始運行

幀動畫核心代碼

 在drawable目錄下，新增一個動畫資源配置文件【animation-list節點下包含item子節點，item有兩個屬性，android:drawable=圖像資源id，android:duration=週期】，以下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <animation-list xmlns:android="http://schemas.android.com/apk/res/android">
 3     <item android:drawable="@drawable/n0" android:duration="300"></item>
 4     <item android:drawable="@drawable/n1" android:duration="300"></item>
 5     <item android:drawable="@drawable/n2" android:duration="300"></item>
 6     <item android:drawable="@drawable/n3" android:duration="300"></item>
 7     <item android:drawable="@drawable/n4" android:duration="300"></item>
 8     <item android:drawable="@drawable/n5" android:duration="300"></item>
 9     <item android:drawable="@drawable/n6" android:duration="300"></item>
10     <item android:drawable="@drawable/n7" android:duration="300"></item>
11     <item android:drawable="@drawable/n8" android:duration="300"></item>
12     <item android:drawable="@drawable/n9" android:duration="300"></item>
13 </animation-list>

java設置代碼以下：

 1 private AnimationDrawable drawable;
 2 
 3     @Override
 4     protected void onCreate(Bundle savedInstanceState) {
 5         super.onCreate(savedInstanceState);
 6         setContentView(R.layout.activity_drawable);
 7         ImageView imageView= (ImageView) this.findViewById(R.id.ivLetter);
 8         drawable= (AnimationDrawable) imageView.getBackground();
 9         drawable.start();
10     }
11 
12     @Override
13     public boolean onTouchEvent(MotionEvent event) {
14         if(event.getAction()==MotionEvent.ACTION_DOWN){
15             if(drawable.isRunning()) {
16                 drawable.stop();
17             }else{
18                 drawable.start();
19             }
20         }
21         return super.onTouchEvent(event);
22     }

補間動畫

補間動畫，又稱漸變更畫是指定義起始狀態，結束狀態，中間狀態等，而後其餘部分由程序自動生成，從而造成動畫。

補間動畫涉及知識點以下：

• TranslateAnimation 平移動畫 控制對象位置的動畫。
• RotateAnimation 旋轉動畫 控制對象旋轉的動畫。這個旋轉須要放置在xy平面上。您能夠指定中心要使用的點，其中(0,0)是左上角。若是未指定，則(0,0)爲默認旋轉點。
• ScaleAnimation 縮放動畫 控制對象的比例尺的動畫。您能夠指定點用於縮放中心。
• AlphaAnimation 透明度動畫 控制對象的alpha級的動畫，經過更改透明度屬性，對於對象的淡入淡出，這是一個頗有用的方法。
• AnimationSet 動畫集合 上述動畫能夠組合使用。
• setFillAfter(true); 設置動畫結束後的填充
• setDuration(2000); 動畫週期
setRepeatCount(2); 重複次數
• setRepeatMode(Animation.REVERSE); 重複模式

補間動畫核心代碼以下：

 1   /**
 2      * 平移
 3      * @param v
 4      */
 5     protected  void transfer_click(View v){
 6 
 7         //參數是平移的起始座標和結束座標(起始X軸位置，結束X軸位置，起始Y軸位置，結束Y軸位置)的改變量。
 8         //TranslateAnimation trans=new TranslateAnimation(0.0f,300f,0.0f,300f);
 9         //fromXType 動畫平移改變量的類型
10         //Animation.RELATIVE_TO_SELF,0 表示控件如今的座標+0*控件自己的寬度或高度
11         //Animation.RELATIVE_TO_SELF,0.5f 表示控件如今的座標+0.5*控件自己的寬度或高度
12         //Animation.RELATIVE_TO_PARENT 相對於父控件，計算方式和Animation.RELATIVE_TO_SELF同樣
13         //fromXValue 起始座標值的改變量，若是類型是ABSOLUTE，則此值爲絕對數字，不然則表示百分比（0-1）之間。
14         TranslateAnimation trans=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,1,Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,1);
15         trans.setDuration(2000);//設置週期
16         trans.setFillAfter(true);//當結束時保持結束位置
17         trans.setRepeatCount(2);//設置重複次數
18         trans.setRepeatMode(Animation.REVERSE);//重複模式
19         ivTaichi.startAnimation(trans);//啓動
20     }
21 
22     /**
23      * 旋轉
24      * @param v
25      */
26     protected void rotate_click(View v){
27         //參數是旋轉的起始偏移量（度數），結束度數，旋轉中心點（相對x軸 位置和y軸位置）。
28         //RotateAnimation rotate=new RotateAnimation(0.0f,90.f,100.0f,100.0f);
29         RotateAnimation rotate =new RotateAnimation(0.0f,360.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
30         rotate.setFillAfter(true);
31         rotate.setDuration(2000);
32         rotate.setRepeatCount(2);
33         rotate.setRepeatMode(Animation.REVERSE);
34         ivTaichi.startAnimation(rotate);//啓動
35     }
36 
37     /**
38      * 縮放
39      * @param v
40      */
41     protected void scale_click(View v){
42         //fromX toX 動畫起始和結束時的X軸水平縮放因子
43         //fromY toY 動畫起始和結束時的Y軸水平縮放因子
44         ScaleAnimation scale=new ScaleAnimation(0.5f,1.5f,0.5f,1.5f);
45         scale.setFillAfter(true);
46         scale.setDuration(2000);
47         scale.setRepeatCount(2);
48         scale.setRepeatMode(Animation.REVERSE);
49         ivTaichi.startAnimation(scale);//啓動
50     }
51 
52     /**
53      * 透明度動畫
54      * @param v
55      */
56     protected void alpha_click(View v){
57         //fromAlpha toAlpha 動畫起始和結束時的透明度。範圍（0,1）
58         AlphaAnimation alpha=new AlphaAnimation(0,1);
59         alpha.setFillAfter(true);
60         alpha.setDuration(2000);
61         alpha.setRepeatCount(2);
62         alpha.setRepeatMode(Animation.REVERSE);
63         ivTaichi.startAnimation(alpha);//啓動
64     }
65 
66     /**
67      * 集合動畫
68      * @param v
69      */
70     protected  void set_click(View v){
71         AnimationSet set=new AnimationSet(true);
72         //TranslateAnimation animation1=new TranslateAnimation(0.0f,300.0f,0.0f,300.0f);
73         RotateAnimation animation2 =new RotateAnimation(0.0f,360.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
74         ScaleAnimation animation3=new ScaleAnimation(0.0f,1.0f,0.0f,1.0f);
75         AlphaAnimation animation4=new AlphaAnimation(0,1);
76         //set.addAnimation(animation1);
77         set.addAnimation(animation2);
78         set.addAnimation(animation3);
79         set.addAnimation(animation4);
80         set.setFillAfter(true);
81         set.setDuration(2000);
82         set.setRepeatCount(2);
83         set.setRepeatMode(Animation.REVERSE);
84         ivTaichi.startAnimation(set);//啓動
85     }

屬性動畫

屬性動畫主要經過改變對象的屬性，來實現動畫，能夠進行擴展，且功能豐富。

屬性動畫涉及知識點以下：

• ObjectAnimator 該ValueAnimator的子類提供了對目標對象上的動畫屬性的支持。該類的構造函數使用參數來定義將被動畫化的目標對象以及將被動畫化的屬性的名稱。
• setDuration(2000); 動畫週期
• setRepeatCount(2); 重複次數
• setRepeatMode(Animation.REVERSE); 重複方式
• start(); 啓動

屬性動畫核心代碼以下：

 1 /**
 2      * 平移
 3      * @param v
 4      */
 5     protected  void transfer_click(View v){
 6         //target 屬性動畫的目標控件
 7         //propertyName 產生動畫的屬性，全部的屬性必須擁有set,get方法
 8         //values 屬性動畫的範圍集合
 9         ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"translationX",0,200,-200,0);
10         objectAnimator.setDuration(2000);
11         objectAnimator.setRepeatCount(2);
12         objectAnimator.setRepeatMode(Animation.REVERSE);
13         objectAnimator.start();
14     }
15 
16     /**
17      * 旋轉
18      * @param v
19      */
20     protected void rotate_click(View v){
21         ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"rotationX",0,180);
22         objectAnimator.setDuration(2000);
23         objectAnimator.setRepeatCount(2);
24         objectAnimator.setRepeatMode(Animation.REVERSE);
25         objectAnimator.start();
26     }
27 
28     /**
29      * 縮放
30      * @param v
31      */
32     protected void scale_click(View v){
33         ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"scaleX",0,1,0);
34         objectAnimator.setDuration(2000);
35         objectAnimator.setRepeatCount(2);
36         objectAnimator.setRepeatMode(Animation.REVERSE);
37         objectAnimator.start();
38     }
39 
40     /**
41      * 透明度
42      * @param v
43      */
44     protected void alpha_click(View v){
45         ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"alpha",0,1);
46         objectAnimator.setDuration(2000);
47         objectAnimator.setRepeatCount(2);
48         objectAnimator.setRepeatMode(Animation.REVERSE);
49         objectAnimator.start();
50     }
51 
52     /**
53      * 集合動畫
54      * @param v
55      */
56     protected  void set_click(View v){
57         AnimatorSet set=new AnimatorSet();
58         List<Animator> list=new ArrayList<Animator>() ;
59         ObjectAnimator objectAnimator1 =ObjectAnimator.ofFloat(ivTaichi,"translationX",0,200);
60         ObjectAnimator objectAnimator2 =ObjectAnimator.ofFloat(ivTaichi,"rotationX",0,180);
61         ObjectAnimator objectAnimator3 =ObjectAnimator.ofFloat(ivTaichi,"scaleX",0,1);
62         ObjectAnimator objectAnimator4 =ObjectAnimator.ofFloat(ivTaichi,"alpha",0,1);
63         list.add(objectAnimator1);
64         list.add(objectAnimator2);
65         list.add(objectAnimator3);
66         list.add(objectAnimator4);
67         //播放一序列的動畫對象
68         set.playSequentially(list);
69         //
70         set.start();
71      }

 

 

備註

學而不思則罔，思而不學則殆！！！