Android四大視圖動畫圖文詳解

Android四大視圖動畫圖文詳解

Android中的動畫分為視圖動畫(View Animation)、屬性動畫（Property Animation）以及Drawable動畫。

Android從最初的版本就支持視圖動畫，視圖動畫顧名思義，就是應用在視圖View上的動畫。視圖動畫的核心類是android/view/animation/Animation，該類是一個抽象類，該類有五個子類，分別是AlphaAnimation、TranslateAnimation、RotateAnimation、ScaleAnimation、AnimationSet。AlphaAnimation可以讓View實現透明度漸變效果，TranslateAnimation可以讓View實現平移動畫效果，RotateAnimation可以讓View實現旋轉動畫效果，ScaleAnimation可以讓View實現伸縮動畫效果，AnimationSet可以讓將多個視圖動畫組合起來應用到某個View上，從而實現復雜的動畫效果。動畫既可以用代碼實現，也可以用XML文件定義動畫。

本文下面的示例代碼都是對一個TextView進行的操作，對應的layout文件如下所示：

說明：下文會涉及各種坐標系，這裡先提一個基礎知識，下面提及的各種坐標系的都是X正半軸水平向右，Y軸正半軸垂直向下的。

---

AlphaAnimation

AlphaAnimation可以讓View實現透明度漸變效果。其使用方法如下所示：

//1.0表示完全不透明，0.0表示完全透明
float fromAlpha = 1.0f;
float toAlpha = 0.0f;
//1.0 => 0.0表示View從完全不透明漸變到完全透明
Animation animation = new AlphaAnimation(fromAlpha, toAlpha);
//設置動畫持續時間為3000毫秒
animation.setDuration(3000);
//通過View的startAnimation方法將動畫立即應用到View上
textView.startAnimation(animation);

界面如下所示：

下面對以上代碼進行一下解釋：

AlphaAnimation的構造函數方法簽名是<喎?http://www.Bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> public AlphaAnimation (float fromAlpha, float toAlpha)

fromAlpha表示動畫開始時View的透明度alpha值，toAlpha表示動畫結束時View的透明度alpha值。在以上代碼中，我們將fromAlpha設置為1.0，表示動畫開始時TextView完全不透明，即完全可見；將toAlpha設置為0.0，表示動畫結束時TextView完全透明，即完全不可見。這就實現了TextView從完全可見到完全不可見的透明度漸變效果。

我們還要通過Animation的setDuration方法設置動畫的持續時間，單位為毫秒，我們在上面的代碼中設置的是3000毫秒，即動畫持續三秒。

最後我們調用View的startAnimation方法將動畫綁定到TextView上並立即開始動畫效果。

由此我們可見，使用視圖動畫其實比較簡單，基本流程是：

創建Animation某個子類的實例 通過Animation的setDuration方法設置動畫持續時間 最後通過View的startAnimation方法啟動動畫

在使用其他視圖動畫時流程跟上面基本一致，只是最開始動畫的構造函數傳入的參數不同而已。

之前提到，除了可以用代碼創建動畫外，還可以用XML文件定義動畫，我們可以用下面的XML文件定義上述動畫：

定義視圖動畫的XML文件是放在res/anim文件夾下的，此處我設置動畫的文件名是alpha.xml，如下圖所示：

然後我們可以通過AnimationUtils.loadAnimation()方法根據XML資源文件得到一個Animation對象，如下所示：

Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
textView.startAnimation(animation);

當我們需要更改動畫效果的參數的時候，我們只需要更新動畫XML文件即可，無需更改代碼，所以用XML文件定義動畫比用代碼生成一個動畫對象可維護性更好一些。但是有些情況下，我們創建動畫的參數可能是在運行時才動態決定的，那這樣就無法用XML定義動畫了，只能用代碼創建動畫對象。在後面的文章中，大部分動畫都給出了對應的XML文件定義。

---

TranslateAnimation

TranslateAnimation可以讓View實現平移動畫效果。
TranslateAnimation有兩個常用的構造函數，分別是：

public TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)

public TranslateAnimation (int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)

我們分別研究一下這兩個構造函數。

public TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
該構造函數的使用方法如下所示：

int fromXDelta = 0;
int toXDelta = getResources().getDisplayMetrics().widthPixels / 2;
int fromYDelta = 0;
int toYDelta = 0;
//讓動畫在水平位置上沿X軸平移toXDelta個像素
Animation animation = new TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta);
//設置動畫持續時間為3000毫秒
animation.setDuration(3000);
//通過View的startAnimation方法將動畫立即應用到View上
textView.startAnimation(animation);

界面如下所示:
seo8L3A+DQo8cD50b1hEZWx0YSCx7cq+tq+7rb3hyvjKsVZpZXfP4LbU09rUrcC0zrvWw1jW4be9z/K1xMar0sbX+LHqPC9wPg0KPHA+ZnJvbVlEZWx0YSCx7cq+tq+7rb+qyrzKsVZpZXfP4LbU09rUrcC0zrvWw1nW4be9z/K1xMar0sbX+LHqPC9wPg0KPHA+dG9ZRGVsdGEgse3Kvravu6294cr4yrFWaWV3z+C21NPa1K3AtM671sNZ1uG3vc/ytcTGq9LG1/ix6jwvcD4NCjxwPtKyvs3Kx8u1o6y5udTsuq/K/cDvw+a1xNXiy8S49mRlbHRht9bBv7a8ysfP4LbU09pWaWV31K3AtM671sO1xM/gttTX+LHqxqvSxrfWwb+jrNXiwO/L+cu1tcQmbGRxdW87Vmlld9StwLTOu9bDJnJkcXVvO9a4tcTKx1ZpZXfU2ravu62/qsq8x7C1xLP1yrzOu9bDoaPO0sPH1NrKvsD91tBmcm9tWURlbHRhus10b1lEZWx0YSC2vMno1sPOqjCjrLHtyr5UZXh0Vmlld7K7u+HU2lnW4be9z/LJz8a90saho2Zyb21YRGVsdGEgyejWw86qMLHtyr62r7utv6rKvMqxo6xUZXh0Vmlld7XEWNf4serT67P1yry1xFjX+LHq0rvWwqGjdG9YRGVsdGEgse3KvsHLVGV4dFZpZXfP8tPSxqvSxrXEvuDA66GjPC9wPg0KPHA+yrW8ysnPo6y21LjDubnU7Lqvyv2jrEFuZHJvaWTDu9PQzOG5qbbU06a1xFhNTM7EvP62qNLlo6y1q8rHz8LD5rXEubnU7Lqvyv3T0M/g06a1xFhNTM7EvP62qNLloaM8L3A+DQo8cD5wdWJsaWMgVHJhbnNsYXRlQW5pbWF0aW9uIChpbnQgZnJvbVhUeXBlLCBmbG9hdCBmcm9tWFZhbHVlLCBpbnQgdG9YVHlwZSwgZmxvYXQgdG9YVmFsdWUsIGludCBmcm9tWVR5cGUsIGZsb2F0IGZyb21ZVmFsdWUsIGludCB0b1lUeXBlLCBmbG9hdCB0b1lWYWx1ZSk8YnIgLz4NCrjDubnU7Lqvyv3P4LHI09rWrsewtcS5udTsuq/K/cC0y7W4/LzTwem77qOsyrnTw7e9t6jI58/Cy/nKvqO6PC9wPg0KPHByZSBjbGFzcz0="brush:java;"> //設置fromX int fromXType = Animation.ABSOLUTE; float fromXValue = textView.getX(); //設置toX int toXType = Animation.RELATIVE_TO_PARENT; float toXValue = 0.5f; //設置fromY int fromYType = Animation.ABSOLUTE; float fromYValue = textView.getY(); //設置toY int toYType = Animation.RELATIVE_TO_SELF; float toYValue = 3.0f; //創建動畫 Animation animation = new TranslateAnimation( fromXType, fromXValue, toXType, toXValue, fromYType, fromYValue, toYType, toYValue); //設置動畫持續時間為3000毫秒 animation.setDuration(3000); //通過View的startAnimation方法將動畫立即應用到View上 textView.startAnimation(animation);

界面如下所示：

下面對以上代碼進行說明:

該構造函數有八個參數，其中可以分為四組，（fromXType、fromXValue）決定了動畫開始時View的X坐標，（toXType、toXValue）決定了動畫結束時View的X坐標，（fromYType、fromYValue）決定了動畫開始時View的Y坐標，（toYType、toYValue）決定了動畫結束時View的Y坐標。這四組參數就完整地定義了平移動畫開始和結束時View的坐標位置。

由於這四組參數參數取值類似，所以我們主要研究其中一組即可，我們以fromXType和fromXValue進行說明，fromXType的取值類型決定了如何設置fromXValue的值。fromXType的取值有三種，分別是:ABSOLUTE、RELATIVE_TO_PARENT和RELATIVE_TO_SELF。

ABSOLUTE
當fromXType取值為ABSOLUTE時，表示fromXValue的值是在該View的父控件的坐標系的絕對值，比如fromXValue為200，表示動畫開始時，View的左側到其父控件左側的距離是200個像素。

RELATIVE_TO_PARENT
當fromXType取值為RELATIVE_TO_PARENT時，表示fromXValue的值是相對於其父控件尺寸的百分比。比如fromXValue為0，表示動畫開始時，View的左側緊靠父控件的左側；fromXValue為0.5時，表示動畫開始時，View的左側位置在父控件水平方向中間的位置；fromXValue為1時，表示動畫開始時，View的左側位置與父控件的右側位置完全重合。

RELATIVE_TO_SELF
當fromXType取值為RELATIVE_TO_SELF時，表示fromXValue的值是相對於其自身尺寸的百分比。比如fromXValue為0，表示動畫開始時，View的X坐標和初始位置的X坐標相同；fromXValue為0.5時，表示動畫開始時，View的左側位置在初始View狀態下水平方向中間的位置，即向右偏移了View寬度的一半；fromXValue為1時，表示動畫開始時，View的左側位置正好與初始View狀態下的右側位置重合，即向右偏移了正好View的寬度大小的距離。

有了以上理論基礎，我們再看一下我們上面的代碼。

設置fromX

int fromXType = Animation.ABSOLUTE;
float fromXValue = textView.getX();

我們將fromXType設置為ABSOLUTE，然後將fromXValue的值設置為textView.getX()，這樣的意義是動畫開始時，TextView的X坐標與TextView初始狀態下X坐標相同。

設置toX

int toXType = Animation.RELATIVE_TO_PARENT;
float toXValue = 0.5f;

我們將toXType設置為RELATIVE_TO_PARENT，將toXValue設置為0.5，表示動畫結束時，TextView的左側將會處於其父控件RelativeLayout的水平中間位置。

設置fromY

int fromYType = Animation.ABSOLUTE;
float fromYValue = textView.getY();

將fromYType設置為ABSOLUTE，將fromYValue設置為textView.getY()，這樣的意義是動畫開始時，TextView的Y坐標與TextView初始狀態下Y坐標相同。

設置toY

int toYType = Animation.RELATIVE_TO_SELF;
float toYValue = 3.0f;

我們將toYType設置為RELATIVE_TO_SELF，將toYValue設置為為3，表示當動畫結束時，TextView的Y坐標將變成其高度的三倍。

我們設置的fromX和toX兩組參數會使得TextView在X水平方向上向右滑動；fromY和toY兩組參數會使得TextView在Y垂直方向上向下滑動，大家可以仔細觀看上面的動態圖理解一下。

上述動畫對應的XML文件如下所示：

以上XML文件中fromXDelta、toXDelta、fromYDelta、toYDelta四個參數都是float類型的參數，這幾個值可以以%結尾，也可以以%p結尾，也可以沒有其他額外結尾。

無結尾
fromXDelta和fromYDelta都只是一個簡單的float值，沒有其他額外的結尾，這樣的值表示的意思是該值對應的類型是Animation.ABSOLUTE，即表示的絕對值，即android:fromXDelta=0與以下代碼等價：

int fromXType = Animation.ABSOLUTE; 
float fromXValue = 0；

以%p結尾
toXDelta的值是50%p，以%p結尾，此處的p是Parent的縮寫，說明值的類型是Animation.RELATIVE_TO_PARENT，即該值表示相對於其父控件寬度的50%，android:toXDelta=50%p等價於以下代碼：

int toXType = Animation.RELATIVE_TO_PARENT;
float toXValue = 0.5f;

以%結尾
toYDelta的值是300%，以%結尾，此處的%是相對於控件自身的，即值對應的類型是Animation.RELATIVE_TO_SELF，android:toYDelta=300%等價於以下代碼：

int toYType = Animation.RELATIVE_TO_SELF;
float toYValue = 3.0f;

---

RotateAnimation

RotateAnimation可以讓View在XY平面內實現旋轉動畫效果。
RotateAnimation有三個常用的構造函數，分別是：

public RotateAnimation (float fromDegrees, float toDegrees)

public RotateAnimation (float fromDegrees, float toDegrees, float pivotX, float pivotY)

public RotateAnimation (float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

旋轉動畫需要兩種類型的參數：動畫的旋轉軸以及動畫的旋轉角度。RotateAnimation的三個構造函數的主要區別在於確定動畫旋轉軸的參數不同，我們具體看一下。

public RotateAnimation (float fromDegrees, float toDegrees)
該構造函數只需要傳入動畫開始時的旋轉角度以及動畫結束時的旋轉角度即可，toDegrees與fromDegrees的差值即旋轉過的角度，不需要額外傳入參數設置旋轉軸。這種情況下，動畫的旋轉軸就是View的左上角點。該構造函數使用方法如下所示：

//以View左上角為旋轉軸，創建旋轉60度的動畫
Animation animation = new RotateAnimation(0, 60);
//設置動畫持續時間
animation.setDuration(3000);
//通過View的startAnimation方法將動畫立即應用到View上
textView.startAnimation(animation);

界面如下所示：

我們看到，TextView以其左上角點為旋轉軸沿著順時針方向旋轉了60度。

上述動畫對應的XML文件如下所示：

public RotateAnimation (float fromDegrees, float toDegrees, float pivotX, float pivotY)
很多情況下用View的左上角點作為旋轉軸不能滿足實際需求，那麼我們就可以利用該構造函數傳入旋轉軸的位置坐標(pivotX,pivotY)。需要說明的是，此處的坐標(pivotX,pivotY)指的是View自身的局部坐標系中的坐標。所謂的View自身的局部坐標系就是以View自身的左上角為坐標原點的坐標系。該構造函數的使用方法如下所示：

//以View中心點作為旋轉軸，創建旋轉60度的動畫
float pivotX = textView.getWidth() / 2;
float pivotY = textView.getHeight() / 2;
Animation animation = new RotateAnimation(0, 90, pivotX, pivotY);
//設置動畫持續時間
animation.setDuration(3000);
//通過View的startAnimation方法將動畫立即應用到View上
textView.startAnimation(animation);

界面如下所示：

在上面的代碼中，我們將TextView長度的一半作為旋轉軸的pivotX，將TextView高度的一半作為旋轉軸的pivotY，這樣TextView就以自身的中心點作為旋轉軸順時針旋轉了90度。

假設TextView的getWidth()和getHeight()返回的寬度、高度分別是是200像素和100像素，那麼上述動畫對應的XML文件如下所示：

此處XML文件中pivotX和pivotY的取值規則與之前提到的Translate動畫的XML文件中fromXDelta等參數的取值規則相同。此處XML文件中pivotX和pivotY的取值都是簡單的float類型，表示該值的類型是Animation.ABSOLUTE。 其實此處如果將pivotX和pivotY的值都設置為50%也能達到以TextView中心點旋轉的目的，以%結尾表示值的類型是Animation.RELATIVE_TO_SELF，50%表示相對於TextView自身的中心點。

public RotateAnimation (float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

該構造函數是最靈活的一種方式。pivotXType和pivotYType可取值ABSOLUTE或RELATIVE_TO_SELF或RELATIVE_TO_PARENT，其取值決定了對應的pivotXValue和pivotYValue的取值意義。該構造函數中的旋轉軸坐標的取值規則與上面介紹的TranslateAnimation的最後一個構造函數中坐標的取值規則完全一樣，在此不再贅述。此處給出一段示例代碼：

//以View的父控件中心點作為旋轉軸，創建旋轉360度的動畫
int pivotXType = Animation.RELATIVE_TO_PARENT;
float pivotXValue = 0.5f;
int pivotYType = Animation.RELATIVE_TO_PARENT;
float pivotYValue = 0.5f;
Animation animation = new RotateAnimation(
    0, 360,
    pivotXType, pivotXValue,
    pivotYType, pivotYValue
);
//設置動畫持續時間
animation.setDuration(3000);
//通過View的startAnimation方法將動畫立即應用到View上
textView.startAnimation(animation);

界面如下所示：

上面我們將pivotXType和pivotYType的值都設置為RELATIVE_TO_PARENT，然後將pivotXValue和pivotYValue都設置為0.5，這樣TextView的旋轉動畫將會以其父控件RelativeLayout的中心點作為旋轉軸旋轉360度。

上述動畫對應的XML文件如下所示：

此處XML文件中pivotX和pivotY的取值規則與之前提到的Translate動畫的XML文件中fromXDelta等參數的取值規則相同。pivotX和pivotY的值都以%p結尾，表示取值類型是Animation.RELATIVE_TO_PARENT，50%p即表示相對於父控件的中心。

---

ScaleAnimation

ScaleAnimation可以讓View實現伸縮動畫效果，它有三個常用的構造函數，分別是：

public ScaleAnimation (float fromXScale, float toScaleX, float fromYScale, float toScaleY)

public ScaleAnimation (float fromXScale, float toScaleX, float fromYScale, float toScaleY, float pivotX, float pivotY)

public ScaleAnimation (float fromXScale, float toScaleX, float fromYScale, float toScaleY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

ScaleAnimation需要兩種類型的參數：縮放動畫的中心點以及XY兩個方向的縮放比例。View會基於動畫的縮放中心按照指定的縮放比例進行縮放。ScaleAnimation的三個構造函數的主要區別在於確定動畫的縮放中心，我們具體研究一下。

public ScaleAnimation (float fromXScale, float toScaleX, float fromYScale, float toScaleY)

該構造函數只需要傳入View在X軸、Y軸上動畫開始以及結束的縮放比例，fromXScale和toScaleX分別表示動畫開始和結束時X軸的縮放比例，fromYScale和toScaleY表示動畫開始和結束時Y軸的縮放比例。不需要額外傳入參數設置動畫的縮放中心。這種情況下，動畫的縮放中心就是View的左上角點。該構造函數的使用方法如下所示：

//以View左上角作為縮放中心，水平方向擴大一倍，垂直方向縮小為原來的一半
float fromXScale = 1.0f;
float toScaleX = 2.0f;
float fromYScale = 1.0f;
float toScaleY = 0.5f;
Animation animation = new ScaleAnimation(fromXScale, toScaleX, fromYScale, toScaleY);
//設置動畫持續時間
animation.setDuration(3000);
//通過View的startAnimation方法將動畫立即應用到View上
textView.startAnimation(animation);

界面如下所示：

如上圖所示，TextView以其左上角點作為縮放中心，在X軸方向擴大了一倍，在Y軸方向縮減為原來的一半。

上述動畫對應的XML文件如下所示：

public ScaleAnimation (float fromXScale, float toScaleX, float fromYScale, float toScaleY, float pivotX, float pivotY)

很多情況下用View的左上角點作為縮放中心不能滿足實際需求，那麼我們就可以利用該構造函數傳入動畫縮放中心的位置坐標(pivotX,pivotY)。需要說明的是，此處的坐標(pivotX,pivotY)指的是View自身的局部坐標系中的坐標。所謂的View自身的局部坐標系就是以View自身的左上角為坐標原點的坐標系。該構造函數的使用方法如下所示：

//以View中心點作為縮放中心，水平方向和垂直方向都縮小為原來的一半
float fromXScale = 1.0f;
float toScaleX = 0.5f;
float fromYScale = 1.0f;
float toScaleY = 0.5f;
float pivotX = textView.getWidth() / 2;
float pivotY = textView.getHeight() / 2;
Animation animation = new ScaleAnimation(
    fromXScale, toScaleX,
    fromYScale, toScaleY,
    pivotX, pivotY
);
    //設置動畫持續時間
    animation.setDuration(3000);
    //通過View的startAnimation方法將動畫立即應用到View上
    textView.startAnimation(animation);

界面如下所示：

在上面的代碼中，我們將TextView的中心點作為動畫的縮放中心，如上圖所示，TextView基於該縮放中心在水平方向和垂直方向都縮小為原來的一半。

假設TextView的getWidth()和getHeight()返回的寬度、高度分別是是200像素和100像素，那麼上述動畫對應的XML文件如下所示：

此處XML文件中pivotX和pivotY的取值規則與之前提到的Translate動畫的XML文件中fromXDelta等參數的取值規則相同。此處XML文件中pivotX和pivotY的取值都是簡單的float類型，表示該值的類型是Animation.ABSOLUTE。 其實此處如果將pivotX和pivotY的值都設置為50%也能達到以TextView中心點縮放的目的，詳見下文。

public ScaleAnimation (float fromXScale, float toScaleX, float fromYScale, float toScaleY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

該構造函數是最靈活的一種方式。pivotXType和pivotYType可取值ABSOLUTE或RELATIVE_TO_SELF或RELATIVE_TO_PARENT，其取值決定了對應的pivotXValue和pivotYValue的取值意義。該構造函數中的旋轉軸坐標的取值規則與上面介紹的TranslateAnimation的最後一個構造函數中坐標的取值規則完全一樣，在此不再贅述。此處給出一段示例代碼：

//以View中心點作為縮放中心，水平方向和垂直方向都縮小為原來的一半
float fromXScale = 1.0f;
float toScaleX = 0.5f;
float fromYScale = 1.0f;
float toScaleY = 0.5f;
int pivotXType = Animation.RELATIVE_TO_SELF;
float pivotXValue = 0.5f;
int pivotYType = Animation.RELATIVE_TO_SELF;
float pivotYValue = 0.5f;
Animation animation = new ScaleAnimation(
    fromXScale, toScaleX,
    fromYScale, toScaleY,
    pivotXType, pivotXValue,
    pivotYType, pivotYValue
);
//設置動畫持續時間
animation.setDuration(3000);
//通過View的startAnimation方法將動畫立即應用到View上
textView.startAnimation(animation);

上面的代碼實現的效果跟第二個構造函數中給出的代碼實現的效果完全一致，只不過這次設置了pivotXType和pivotYType，並將其值都設置為RELATIVE_TO_SELF，且pivotXValue和pivotYValue都設置為0.5，這樣就將TextView的中心點設置成了動畫的縮放中心。效果參考第二個構造函數中的效果圖。

上述動畫對應的XML文件如下所示：

以%結尾表示值的類型是Animation.RELATIVE_TO_SELF，此處pivotX和pivotY都取值50%，表示相對於TextView自身的中心點進行縮放。如果以%p結尾，那麼表示值的類型是Animation.RELATIVE_TO_PARENT。