教你怎麼玩轉動畫

相關文章：

《Android自定義控件三部曲文章索引》：http://blog.csdn.net/harvic880925/article/details/50995268

一、概述

Android的animation由四種類型組成：alpha、scale、translate、rotate，對應android官方文檔地址：《Animation Resources》

1、XML配置文件中

alpha	漸變透明度動畫效果
scale	漸變尺寸伸縮動畫效果
translate	畫面轉換位置移動動畫效果
rotate	畫面轉移旋轉動畫效果

下面我們逐個講講每個標籤的屬性及用法。2、動作文件存放位置

動作定義文件應該存放在res/anim文件夾下，訪問時採用R.anim.XXX.xml的方式，位置如圖：

二、scale標籤——調節尺寸

1、自有屬性

scale標籤是縮放動畫，可以實現動態調控件尺寸的效果，有下面幾個屬性：

• android:fromXScale    起始的X方向上相對自身的縮放比例，浮點值，比如1.0代表自身無變化，0.5代表起始時縮小一倍，2.0代表放大一倍；
• android:toXScale        結尾的X方向上相對自身的縮放比例，浮點值；
• android:fromYScale    起始的Y方向上相對自身的縮放比例，浮點值，
• android:toYScale        結尾的Y方向上相對自身的縮放比例，浮點值；
• android:pivotX            縮放起點X軸座標，可以是數值、百分數、百分數p 三種樣式，比如 50、50%、50%p，當爲數值時，表示在當前View的左上角，即原點處加上50px，做爲起始縮放點；如果是50%，表示在當前控件的左上角加上自己寬度的50%做爲起始點；如果是50%p，那麼就是表示在當前的左上角加上父控件寬度的50%做爲起始點x軸座標。（具體意義，後面會舉例演示）
• android:pivotY           縮放起點Y軸座標，取值及意義跟android:pivotX一樣。

下面看一個實例，當scale裏的屬性這樣設置時，效果會怎樣呢：

[html] view plain copy 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <scale xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:fromXScale="0.0"  
4.     android:toXScale="1.4"  
5.     android:fromYScale="0.0"  
6.     android:toYScale="1.4"  
7.     android:pivotX="50"  
8.     android:pivotY="50"  
9.     android:duration="700" />  

（1）、pivotX取值數值時（50）

這個控件，寬度和高度都是從0放大到1.4倍，起始點座標在控件左上角（座標原點），向x軸正方向和y軸正方向都加上50像素；

根據pivotX,pivotY的意義，控件的左上角即爲控件的座標原點，這裏的起始點是在控件的原點的基礎上向X軸和Y軸各加上50px，做爲起始點，如下圖中圖二所示

                               圖一                                                             圖二
    

（2）、pivotX取值百分數時（50%）
下面再看看當pivotX、pivotY取百分數的時候，起始點又在哪裏？

上面我們講了，pivotX的值，當取50%時，表示在原點座標的基礎上加上的自己寬度的50%，看看效果：

[html] view plain copy 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <scale xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:fromXScale="0.0"  
4.     android:toXScale="1.4"  
5.     android:fromYScale="0.0"  
6.     android:toYScale="1.4"  
7.     android:pivotX="50%"  
8.     android:pivotY="50%"  
9.     android:duration="700" />  

縮放位置大小仍然從0-1.4，只改變pivotX和pivotY;起始點位置如下圖中圖二所示：

                               圖一                                                                 圖二

   
（3）、pivotX取值50%p時

前面說過，當取值在百分數後面加上一個字母p，就表示，取值的基數是父控件，即在原點的基礎上增加的值是父標籤的百分值。

[html] view plain copy 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <scale xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:fromXScale="0.0"  
4.     android:toXScale="1.4"  
5.     android:fromYScale="0.0"  
6.     android:toYScale="1.4"  
7.     android:pivotX="50%p"  
8.     android:pivotY="50%p"  
9.     android:duration="700" />  

效果圖，及起始點座標圖如下所示：

        

2、從Animation類繼承的屬性

Animation類是所有動畫（scale、alpha、translate、rotate）的基類，這裏以scale標籤爲例，講解一下，Animation類所具有的屬性及意義。關於Animation類的官方文檔位置爲：《Animation》

• android:duration        動畫持續時間，以毫秒爲單位 
• android:fillAfter          如果設置爲true，控件動畫結束時，將保持動畫最後時的狀態
• android:fillBefore       如果設置爲true,控件動畫結束時，還原到開始動畫前的狀態
• android:fillEnabled    與android:fillBefore 效果相同，都是在動畫結束時，將控件還原到初始化狀態
• android:repeatCount 重複次數
• android:repeatMode 重複類型，有reverse和restart兩個值，reverse表示倒序回放，restart表示重新放一遍，必須與repeatCount一起使用才能看到效果。因爲這裏的意義是重複的類型，即回放時的動作。
• android:interpolator  設定插值器，其實就是指定的動作效果，比如彈跳效果等，不在這小節中講解，後面會單獨列出一單講解。

對於android:duration，就不再講解了，就是動畫的持續時長，以毫秒爲單位，下面看看android:fillAfter和android:fillBefore

(1)android:fillAfter:保持動畫結束的狀態

[html] view plain copy 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <scale xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:fromXScale="0.0"  
4.     android:toXScale="1.4"  
5.     android:fromYScale="0.0"  
6.     android:toYScale="1.4"  
7.     android:pivotX="50%"  
8.     android:pivotY="50%"  
9.     android:duration="700"   
10.     android:fillAfter="true"  
11.     />  

（2）android:fillBefore  還原初始化狀態

[html] view plain copy 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <scale xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:fromXScale="0.0"  
4.     android:toXScale="1.4"  
5.     android:fromYScale="0.0"  
6.     android:toYScale="1.4"  
7.     android:pivotX="50%"  
8.     android:pivotY="50%"  
9.     android:duration="700"   
10.     android:fillBefore="true"  
11.     />  

                android:fillBefore="true"                                 android:fillEnable="true"

   

上面順便列出了，當僅設定fillEanble爲true時的效果，這兩個的標籤的效果完全相同。

（3）、android:repeatMode="restart /reverse"  設定回放類型

[html] view plain copy 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <scale xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:fromXScale="0.0"  
4.     android:toXScale="1.4"  
5.     android:fromYScale="0.0"  
6.     android:toYScale="1.4"  
7.     android:pivotX="50%"  
8.     android:pivotY="50%"  
9.     android:duration="700"   
10.     android:fillBefore="true"  
11.     android:repeatCount="1"  
12.     android:repeatMode="restart"  
13. />  

        androidRepeatMode設爲restart                       androidRepeatMode設爲reverse

       

三、alpha標籤——調節透明度

1、自身屬性

• android:fromAlpha   動畫開始的透明度，從0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明
• android:toAlpha       動畫結束時的透明度，也是從0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明

使用示例：

[html] view plain copy 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <alpha xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:fromAlpha="1.0"  
4.     android:toAlpha="0.1"  
5.     android:duration="3000"  
6.     android:fillBefore="true">  
7. </alpha>  

2、從Animation類繼承的屬性

• android:duration        動畫持續時間，以毫秒爲單位 
• android:fillAfter          如果設置爲true，控件動畫結束時，將保持動畫最後時的狀態
• android:fillBefore       如果設置爲true,控件動畫結束時，還原到開始動畫前的狀態
• android:fillEnabled    與android:fillBefore 效果相同，都是在動畫結束時，將控件還原到初始化狀態
• android:repeatCount 重複次數
• android:repeatMode 重複類型，有reverse和restart兩個值，reverse表示倒序回放，restart表示重新放一遍，必須與repeatCount一起使用才能看到效果。因爲這裏的意義是重複的類型，即回放時的動作。
• android:interpolator  設定插值器，其實就是指定的動作效果，比如彈跳效果等，不在這小節中講解，後面會單獨列出一單講解。

與scale標籤意義一樣，就不再綴述。

四、rotate標籤——旋轉

1、自身屬性

• android:fromDegrees     開始旋轉的角度位置，正值代表順時針方向度數，負值代碼逆時針方向度數
• android:toDegrees         結束時旋轉到的角度位置，正值代表順時針方向度數，負值代碼逆時針方向度數
• android:pivotX               縮放起點X軸座標，可以是數值、百分數、百分數p 三種樣式，比如 50、50%、50%p，具體意義已在scale標籤中講述，這裏就不再重講
• android:pivotY               縮放起點Y軸座標，可以是數值、百分數、百分數p 三種樣式，比如 50、50%、50%p

[html] view plain copy 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:fromDegrees="0"  
4.     android:toDegrees="-650"  
5.     android:pivotX="50%"  
6.     android:pivotY="50%"  
7.     android:duration="3000"  
8.     android:fillAfter="true">  
9.       
10. </rotate>  

圍繞自身從0度逆時針旋轉650度                            圍繞自身從0度順時針旋轉650度

android:fromDegrees="0"                                       android:fromDegrees="0"

android:toDegrees="-650"                                      android:toDegrees="650"

     

2、從Animation類繼承的屬性

• android:duration        動畫持續時間，以毫秒爲單位 
• android:fillAfter          如果設置爲true，控件動畫結束時，將保持動畫最後時的狀態
• android:fillBefore       如果設置爲true,控件動畫結束時，還原到開始動畫前的狀態
• android:fillEnabled    與android:fillBefore 效果相同，都是在動畫結束時，將控件還原到初始化狀態
• android:repeatCount 重複次數
• android:repeatMode 重複類型，有reverse和restart兩個值，reverse表示倒序回放，restart表示重新放一遍，必須與repeatCount一起使用才能看到效果。因爲這裏的意義是重複的類型，即回放時的動作。
• android:interpolator  設定插值器，其實就是指定的動作效果，比如彈跳效果等，不在這小節中講解，後面會單獨列出一單講解。

與scale標籤意義一樣，就不再綴述。

五、translate標籤 —— 平移

1、自身屬性

• android:fromXDelta     起始點X軸座標，可以是數值、百分數、百分數p 三種樣式，比如 50、50%、50%p，具體意義已在scale標籤中講述，這裏就不再重講
• android:fromYDelta    起始點Y軸從標，可以是數值、百分數、百分數p 三種樣式；
• android:toXDelta         結束點X軸座標
• android:toYDelta        結束點Y軸座標

[html] view plain copy 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <translate xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:fromXDelta="0"   
4.     android:toXDelta="-80"  
5.     android:fromYDelta="0"  
6.     android:toYDelta="-80"  
7.     android:duration="2000"  
8.     android:fillBefore="true">  
9. </translate>  

2、從Animation類繼承的屬性

• android:duration        動畫持續時間，以毫秒爲單位 
• android:fillAfter          如果設置爲true，控件動畫結束時，將保持動畫最後時的狀態
• android:fillBefore       如果設置爲true,控件動畫結束時，還原到開始動畫前的狀態
• android:fillEnabled    與android:fillBefore 效果相同，都是在動畫結束時，將控件還原到初始化狀態
• android:repeatCount 重複次數
• android:repeatMode 重複類型，有reverse和restart兩個值，reverse表示倒序回放，restart表示重新放一遍，必須與repeatCount一起使用才能看到效果。因爲這裏的意義是重複的類型，即回放時的動作。
• android:interpolator  設定插值器，其實就是指定的動作效果，比如彈跳效果等，不在這小節中講解，後面會單獨列出一單講解。

與scale標籤意義一樣，就不再綴述。

六、set標籤——定義動作合集

前面我們講解了各個標籤動畫的意義及用法，但他們都是獨立對控件起作用，假設我現在想上面的textView控件做一個動畫——從小到大，旋轉出場，而且透明度也要從0變成1，即下面的這個效果，該怎麼辦？

這就需要對指定的控件定義動作合集，Set標籤就可以將幾個不同的動作定義成一個組；

屬性：

set標籤自已是沒有屬性的，他的屬性都是從Animation繼承而來，但當它們用於Set標籤時，就會對Set標籤下的所有子控件都產生作用。

屬性有：（從Animation類繼承的屬性）

• android:duration        動畫持續時間，以毫秒爲單位 
• android:fillAfter          如果設置爲true，控件動畫結束時，將保持動畫最後時的狀態
• android:fillBefore       如果設置爲true,控件動畫結束時，還原到開始動畫前的狀態
• android:fillEnabled    與android:fillBefore 效果相同，都是在動畫結束時，將控件還原到初始化狀態
• android:repeatCount 重複次數
• android:repeatMode 重複類型，有reverse和restart兩個值，reverse表示倒序回放，restart表示重新放一遍，必須與repeatCount一起使用才能看到效果。因爲這裏的意義是重複的類型，即回放時的動作。
• android:interpolator  設定插值器，其實就是指定的動作效果，比如彈跳效果等，不在這小節中講解，後面會單獨列出一單講解。

與scale標籤意義一樣，就不再綴述。

上面這個效果，所對應的XML代碼爲：

[html] view plain copy 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:duration="3000"  
4.     android:fillAfter="true">  
5.       
6.   <alpha   
7.     android:fromAlpha="0.0"  
8.     android:toAlpha="1.0"/>  
9.     
10.   <scale  
11.     android:fromXScale="0.0"  
12.     android:toXScale="1.4"  
13.     android:fromYScale="0.0"  
14.     android:toYScale="1.4"  
15.     android:pivotX="50%"  
16.     android:pivotY="50%"/>  
17.     
18.   <rotate  
19.     android:fromDegrees="0"  
20.     android:toDegrees="720"  
21.     android:pivotX="50%"  
22.     android:pivotY="50%"/>  
23.          
24. </set>  

七、實例——如何將動畫XML文件應用於控件中

上面我僅僅是列出了每個標籤及其屬性的意義及應用之後的效果演示，但上面是如何將定義動畫的xml應用到textView控件中的卻遲遲沒說，這一小節，就以scale動畫爲例，講述如何將定義好的scle動作添加到指定控件中。

先看最終效果圖：

1、新建工程、新建scale動畫文件（scaleanim.xml）

新建一個工程，並且在res文件夾下，新建一個anim文件夾，然後再新建一個scaleanim.xml文件，結構如圖所示：

scaleanim.xml的代碼爲：（從TextView中心點，從0放大到1.4倍，反覆一次，最後還原到初始化狀態）

[html] view plain copy 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <scale xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:fromXScale="0.0"  
4.     android:toXScale="1.4"  
5.     android:fromYScale="0.0"  
6.     android:toYScale="1.4"  
7.     android:pivotX="50%"  
8.     android:pivotY="50%"  
9.     android:duration="700"   
10.     android:fillBefore="true"  
11.     android:repeatCount="1"  
12.     android:repeatMode="restart"  
13. />  

2、XML佈局文件

[html] view plain copy 

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical"  
6.     tools:context="com.harvic.animation_demo.MainActivity" >  
7.   
8.     <Button android:id="@+id/btn_animation"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="wrap_content"  
11.         android:layout_margin="10dip"  
12.         android:text="scale animation"/>  
13.     <TextView  
14.         android:id="@+id/tv"  
15.         android:layout_width="100dip"  
16.         android:layout_height="200dip"  
17.         android:background="#ff00ff"   
18.         android:text="@string/hello_world"  
19.         android:layout_gravity="center_horizontal"/>  
20.   
21. </LinearLayout>  

3、JAVA代碼

[java] view plain copy 

1. public class MainActivity extends Activity {  
2.   
3.     Button scaleBtn ;  
4.     Animation scaleAnimation;  
5.       
6.     TextView tv;  
7.     @Override  
8.     protected void onCreate(Bundle savedInstanceState) {  
9.         super.onCreate(savedInstanceState);  
10.         setContentView(R.layout.activity_main);  
11.           
12.         scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scaleanim);  
13.         scaleBtn = (Button)findViewById(R.id.btn_animation);  
14.         tv =(TextView)findViewById(R.id.tv);  
15.           
16.         scaleBtn.setOnClickListener(new View.OnClickListener() {  
17.               
18.             @Override  
19.             public void onClick(View v) {  
20.                 // TODO Auto-generated method stub  
21.                 tv.startAnimation(scaleAnimation);  
22.             }  
23.         });  
24.           
25.     }  
26.   
27. }  

（1）通過scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scaleanim);從XML文件中獲取動畫

（2）利用startAnimation將動畫傳遞給指定控件顯示。