詳解Android動畫之Tween Animation

前面講了動畫中的Frame動畫，今天就來詳細講解一下Tween動畫的使用。

同樣，在開始執行個體示範之前，先引用官方文檔中的一段話：

Tween動畫是操作某個控件讓其展現出旋轉、漸變、移動、縮放的這麼一種轉換過程，我們成為補間動畫。我們可以以XML形式定義動畫，也可以編碼實作。

如果以XML形式定義一個動畫，我們按照動畫的定義文法完成XML，并放置于/res/anim目錄下，檔案名可以作為資源ID被引用；如果由編碼實作，我們需要使用到Animation對象。

如果用定義XML方式實作動畫，我們需要熟悉一下動畫XML文法：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:interpolator="@[package:]anim/interpolator_resource"  
4.     android:shareInterpolator=["true" | "false"] >  
5.     <alpha  
6.         android:fromAlpha="float"  
7.         android:toAlpha="float" />  
8.     <scale  
9.         android:fromXScale="float"  
10.         android:toXScale="float"  
11.         android:fromYScale="float"  
12.         android:toYScale="float"  
13.         android:pivotX="float"  
14.         android:pivotY="float" />  
15.     <translate  
16.         android:fromX="float"  
17.         android:toX="float"  
18.         android:fromY="float"  
19.         android:toY="float" />  
20.     <rotate  
21.         android:fromDegrees="float"  
22.         android:toDegrees="float"  
25.     <set>  
26.         ...  
27.     </set>  
28. </set>  

XML檔案中必須有一個根元素，可以是<alpha>、<scale>、<translate>、<rotate>中的任意一個，也可以是<set>來管理一個由前面幾個元素組成的動畫集合。

<set>是一個動畫容器，管理多個動畫的群組，與之相對應的Java對象是AnimationSet。它有兩個屬性，android:interpolator代表一個插值器資源，可以引用系統自帶插值器資源，也可以用自定義插值器資源，預設值是勻速插值器；稍後我

會對插值器做出詳細講解。android:shareInterpolator代表<set>裡面的多個動畫是否要共享插值器，預設值為

true，即共享插值器，如果設定為false，那麼<set>的插值器就不再起作用，我們要在每個動畫中加入插值器。

<alpha>是漸變動畫，可以實作fadeIn和fadeOut的效果，與之對應的Java對象是AlphaAnimation。android:fromAlpha屬性代表起始alpha值，浮點值，範圍在0.0和1.0之間，分别代表透明和完全不透

明，android:toAlpha屬性代表結尾alpha值，浮點值，範圍也在0.0和1.0之間。

<scale>是縮放動畫，可以實作動态調控件尺寸的效果，與之對應的Java對象是ScaleAnimation。android:fromXScale屬性代表起始的X方向上相對自身的縮放比例，浮點值，比如1.0代表自身無變化，0.5代表起始時縮小一倍，2.0

代表放大一倍；android:toXScale屬性代表結尾的X方向上相對自身的縮放比例，浮點值；android:fromYScale屬性代表起始

的Y方向上相對自身的縮放比例，浮點值；android:toYScale屬性代表結尾的Y方向上相對自身的縮放比例，浮點

值；android:pivotX屬性代表縮放的中軸點X坐标，浮點值，android:pivotY屬性代表縮放的中軸點Y坐标，浮點值，對于這兩個屬

性，如果我們想表示中軸點為圖像的中心，我們可以把兩個屬性值定義成0.5或者50%。

<translate>是位移動畫，代表一個水準、垂直的位移。與之對應的Java對象是TranslateAnimation。android:fromXDelta屬性代表起始X方向的位置，android:toXDelta代表結尾X方向上的位

置，android:fromYScale屬性代表起始Y方向上的位置，android:toYDelta屬性代表結尾Y方向上的位置，以上四個屬性都支

持三種表示方式：浮點數、num%、num%p；如果以浮點數字表示，代表相對自身原始位置的像素值；如果以num%表示，代表相對于自己的百分比，比如

toXDelta定義為100%就表示在X方向上移動自己的1倍距離；如果以num%p表示，代表相對于父類元件的百分比。

<rotate>是旋轉動畫，與之對應的Java對象是RotateAnimation。android:fromDegrees屬性代表起始角度，浮點值，機關：度；android:toDegrees屬性代表結尾角度，浮點值，機關：度；android:pivotX屬性代表旋轉中

心的X坐标值，android:pivotY屬性代表旋轉中心的Y坐标值，這兩個屬性也有三種表示方式，數字方式代表相對于自身左邊緣的像素值，num%

方式代表相對于自身左邊緣或頂邊緣的百分比，num%p方式代表相對于父容器的左邊緣或頂邊緣的百分比。

另外，在動畫中，如果我們添加了android:fillAfter="true"後，這個動畫執行完之後保持最後的狀态；android:duration="integer"代表動畫持續的時間，機關為毫秒。

如果要把定義在XML中的動畫應用在一個ImageView上，代碼是這樣的：

[java] view plaincopy

1. ImageView image = (ImageView) findViewById(R.id.image);  
2. Animation testAnim = AnimationUtils.loadAnimation(this, R.anim.test);  
3. image.startAnimation(testAnim);  

下面重點介紹一下插值器的概念：

首先要了解為什麼需要插值器，因為在補間動畫中，我們一般隻定義關鍵幀（首幀或尾幀），然後由系統自動生成中間幀，生成中間幀的這個過程可以成為“插值”。插值器定義了動畫變化的速率，提供不同的函數定義變化值相對于時間的變化規則，可以定義各種各樣的非線性變化函數，比如加速、減速等。下面是幾

種常見的插值器：

Interpolator對象	資源ID	功能作用
AccelerateDecelerateInterpolator	@android:anim/accelerate_decelerate_interpolator	先加速再減速
AccelerateInterpolator	@android:anim/accelerate_interpolator	加速
AnticipateInterpolator	@android:anim/anticipate_interpolator	先回退一小步然後加速前進
AnticipateOvershootInterpolator	@android:anim/anticipate_overshoot_interpolator	在上一個基礎上超出終點一小步再回到終點
BounceInterpolator	@android:anim/bounce_interpolator	最後階段彈球效果
CycleInterpolator	@android:anim/cycle_interpolator	周期運動
DecelerateInterpolator	@android:anim/decelerate_interpolator	減速
LinearInterpolator	@android:anim/linear_interpolator	勻速
OvershootInterpolator	@android:anim/overshoot_interpolator	快速到達終點并超出一小步最後回到終點

然後我們可以這樣使用一個插值器：

1. <set android:interpolator="@android:anim/accelerate_interpolator">  
2. ...  

1. <alpha android:interpolator="@android:anim/accelerate_interpolator"  
2.     .../>  

如果隻簡單地引用這些插值器還不能滿足需要的話，我們要考慮一下個性化插值器。我們可以建立一個插值器資源修改插值器的屬性，比如修改AnticipateInterpolator的加速速率，調整CycleInterpolator的循環次數等。為了完成這種需求，我們需要建立XML

資源檔案，然後将其放于/res/anim下，然後再動畫元素中引用即可。我們先來看一下幾種常見的插值器可調整的屬性：

<accelerateDecelerateInterpolator> 無

<accelerateInterpolator> android:factor 浮點值，加速速率，預設為1

<anticipateInterploator> android:tension 浮點值，起始點後退的張力、拉力數，預設為2

<anticipateOvershootInterpolator> android:tension 同上 android:extraTension 浮點值，拉力的倍數，預設為1.5（2  * 1.5）

<bounceInterpolator> 無

<cycleInterplolator> android:cycles 整數值，循環的個數，預設為1

<decelerateInterpolator> android:factor 浮點值，減速的速率，預設為1

<linearInterpolator> 無

<overshootInterpolator> 浮點值，超出終點後的張力、拉力，預設為2

下面我們就拿最後一個插值器來舉例：

2. <overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:tension="7.0"/>  

上面的代碼中，我們把張力改為7.0，然後将此檔案命名為my_overshoot_interpolator.xml，放置于/res/anim下，我們就可以引用到自定義的插值器了：

1. <scale xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:interpolator="@anim/my_overshoot_interpolator"  

如果以上這些簡單的定義還不能滿足我們的需求，那麼我們就需要考慮一下自己定義插值器類了。

我們可以實作Interpolator接口，因為上面所有的Interpolator都實作了Interpolator接口，這個接口定義了一個方法：float getInterpolation(float input);

此方法由系統調用，input代表動畫的時間，在0和1之間，也就是開始和結束之間。

線性（勻速）插值器定義如下：

1. public float getInterpolation(float input) {  
2.     return input;  
3. }  

加速減速插值器定義如下：

2.     return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;  

有興趣的話，大家可以嘗試一下自定義一個插值器。

講了這麼久的概念，下面我們就結合執行個體來示範一下幾種Tween動畫的應用。

先來介紹一下旋轉動畫的使用，布局檔案/res/layout/rotate.xml如下：

2. <LinearLayout  
3.   xmlns:android="http://schemas.android.com/apk/res/android"  
4.   android:orientation="vertical"  
5.   android:layout_width="fill_parent"  
6.   android:layout_height="fill_parent"  
7.   android:background="#FFFFFF">  
8.   <ImageView  
9.         android:id="@+id/piechart"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:layout_gravity="center_horizontal"  
13.         android:src="@drawable/piechart"/>  
14.   <Button  
15.         android:id="@+id/positive"  
16.         android:layout_width="fill_parent"  
18.         android:text="順時針"  
19.         android:onClick="positive"/>  
21.         android:id="@+id/negative"  
24.         android:text="逆時針"  
25.         android:onClick="negative"/>       
26. </LinearLayout>  

我們定義了一個ImageView，用于顯示一個餅狀圖，示範旋轉動畫，然後定義了兩個按鈕，用以運作編碼實作的動畫。動畫定義檔案/res/anim/rotate.xml如下：

3.     android:interpolator="@android:anim/accelerate_decelerate_interpolator">  
5.         android:fromDegrees="0"  
6.         android:toDegrees="+360"  
7.         android:pivotX="50%"  
8.         android:pivotY="50%"  
9.         android:duration="5000"/>  

最後再來看一下RotateActivity.java代碼：

1. package com.scott.anim;  
2. import android.app.Activity;  
3. import android.os.Bundle;  
4. import android.view.View;  
5. import android.view.animation.Animation;  
6. import android.view.animation.AnimationUtils;  
7. import android.view.animation.LinearInterpolator;  
8. import android.view.animation.RotateAnimation;  
9. public class RotateActivity extends Activity {  
10.     private int currAngle;  
11.     private View piechart;  
12.     @Override  
13.     public void onCreate(Bundle savedInstanceState) {  
14.         super.onCreate(savedInstanceState);  
15.         setContentView(R.layout.rotate);  
16.         piechart = findViewById(R.id.piechart);  
17.         Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);  
18.         piechart.startAnimation(animation);  
19.     }  
20.     public void positive(View v) {  
21.         Animation anim = new RotateAnimation(currAngle, currAngle + 180, Animation.RELATIVE_TO_SELF, 0.5f,  
22.                 Animation.RELATIVE_TO_SELF, 0.5f);  
23.         /** 勻速插值器 */  
24.         LinearInterpolator lir = new LinearInterpolator();  
25.         anim.setInterpolator(lir);  
26.         anim.setDuration(1000);  
27.         /** 動畫完成後不恢複原狀 */  
28.         anim.setFillAfter(true);  
29.         currAngle += 180;  
30.         if (currAngle > 360) {  
31.             currAngle = currAngle - 360;  
32.         }  
33.         piechart.startAnimation(anim);  
35.     public void negative(View v) {  
36.         Animation anim = new RotateAnimation(currAngle, currAngle - 180, Animation.RELATIVE_TO_SELF, 0.5f,  
44.         currAngle -= 180;  
45.         if (currAngle < -360) {  
46.             currAngle = currAngle + 360;  

然後，看一下漸變動畫，布局檔案/res/layout/alpha.xml如下：

2. <FrameLayout  
8.       android:id="@+id/splash"  
9.       android:layout_width="fill_parent"  
10.       android:layout_height="fill_parent"  
11.       android:layout_gravity="center"  
12.       android:src="@drawable/splash"/>  
15.       android:layout_height="wrap_content"  
16.       android:layout_gravity="bottom"  
17.       android:text="alpha"  
18.       android:onClick="alpha"/>    
19. </FrameLayout>  

動畫定義檔案/res/anim/alpha.xml如下：

2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
4.         android:fromAlpha="0.0"  
5.         android:toAlpha="1.0"  
6.         android:duration="3000"/>  

AlphaActivity.java代碼如下：

4. import android.util.Log;  
6. import android.view.animation.AlphaAnimation;  
8. import android.view.animation.Animation.AnimationListener;  
10. import android.widget.ImageView;  
11. public class AlphaActivity extends Activity implements AnimationListener {  
12.     private ImageView splash;  
14.     protected void onCreate(Bundle savedInstanceState) {  
16.         setContentView(R.layout.alpha);  
17.         splash = (ImageView) findViewById(R.id.splash);  
18.         Animation anim = AnimationUtils.loadAnimation(this, R.anim.alpha);  
19.         anim.setAnimationListener(this);  
20.         splash.startAnimation(anim);  
22.     public void alpha(View view) {  
23.         Animation anim = new AlphaAnimation(1.0f, 0.0f);  
24.         anim.setDuration(3000);  
29.     public void onAnimationStart(Animation animation) {  
30.         Log.i("alpha", "onAnimationStart called.");  
33.     public void onAnimationEnd(Animation animation) {  
34.         Log.i("alpha", "onAnimationEnd called");  
37.     public void onAnimationRepeat(Animation animation) {  
38.         Log.i("alpha", "onAnimationRepeat called");  

接着看一下位移動畫，布局檔案/res/layout/translate.xml如下：

6.   android:layout_height="fill_parent">  
8.     android:id="@+id/trans_image"  
9.     android:layout_width="wrap_content"  
10.     android:layout_height="wrap_content"  
11.     android:layout_weight="1"  
12.     android:src="@drawable/person"/>  
14.     android:id="@+id/trans_button"  
15.     android:layout_width="fill_parent"  
17.     android:layout_gravity="bottom"  
18.     android:text="translate"  
19.     android:onClick="translate"/>  

動畫定義檔案/res/anim/translate.xml如下：

3.     android:interpolator="@android:anim/bounce_interpolator">  
5.         android:fromXDelta="0"  
6.         android:fromYDelta="0"  
7.         android:toXDelta="200"  
8.         android:toYDelta="300"  
9.         android:duration="2000"/>  

然後TranslateActivity.java代碼如下：

7. import android.view.animation.OvershootInterpolator;  
8. import android.view.animation.TranslateAnimation;  
10. public class TranslateActivity extends Activity {  
11.     private ImageView trans_iamge;  
15.         setContentView(R.layout.tanslate);  
16.         trans_iamge = (ImageView) findViewById(R.id.trans_image);  
17.         Animation anim = AnimationUtils.loadAnimation(this, R.anim.translate);  
19.         trans_iamge.startAnimation(anim);  
21.     public void translate(View view) {  
22.         Animation anim = new TranslateAnimation(200, 0, 300, 0);  
23.         anim.setDuration(2000);  
25.         OvershootInterpolator overshoot = new OvershootInterpolator();  
26.         anim.setInterpolator(overshoot);  

最後，我們再來看以下縮放動畫，布局檔案/res/layout/scale.xml如下：

8.     android:id="@+id/scale_image"  
11.     android:layout_gravity="center"  
15.     android:id="@+id/scale_button"  
19.     android:text="scale"  
20.     android:onClick="sclae"/>  

動畫定義檔案/res/anim/scale.xml如下：

5.         android:fromXScale="1.0"  
6.         android:toXScale="2.0"  
7.         android:fromYScale="1.0"  
8.         android:toYScale="2.0"  
9.         android:pivotX="0.5"  

然後ScaleActivity.java代碼如下：

7. import android.view.animation.BounceInterpolator;  
8. import android.view.animation.ScaleAnimation;  
10. public class ScaleActivity extends Activity {  
11.     private ImageView scale_iamge;  
15.         setContentView(R.layout.scale);  
16.         scale_iamge = (ImageView) findViewById(R.id.scale_image);  
17.         Animation anim = AnimationUtils.loadAnimation(this, R.anim.scale);  
19.         scale_iamge.startAnimation(anim);  
21.     public void sclae(View view) {  
22.         Animation anim = new ScaleAnimation(2.0f, 1.0f, 2.0f, 1.0f,   
23.                 Animation.RELATIVE_TO_SELF, 0.5f,   
27.         BounceInterpolator bounce = new BounceInterpolator();  
28.         anim.setInterpolator(bounce);  

幾種動畫運作效果如下圖所示：