Android動畫技術點總結(一)——View動畫

摘要： 快捷連結： Android動畫技術點總結(二)——逐幀動畫 一般來說，Android常用動畫有三種，View動畫、逐幀動畫、屬性動畫。現在最火熱的當然是屬性動畫，我這裡整理下對，View動畫和逐幀動畫使用和理解，屬性動畫太龐大，慢慢整理。 1.View動畫 Vi...

一般來說，Android常用動畫有三種，View動畫、逐幀動畫、屬性動畫。現在最火熱的當然是屬性動畫，我這裡整理下對，View動畫和逐幀動畫使用和理解，屬性動畫太龐大，慢慢整理。

1.View動畫

View動畫，是Android SDK最早支援的一類動畫，它們都繼承android.view.animation.Animation，分為四種：

動畫名稱	對應xml標籤	對應子類	效果描述
平移動畫	<translate/>	TranslateAnimation	將View在X軸、Y軸方向移動
透明度動畫	<alpha/>	AlphaAnimation	改變View的透明度
旋轉動畫	<rotate/>	RotateAnimation	旋轉View
縮放動畫	<scale/>	ScaleAnimation	將View放大或者縮小

• View動畫可以使用簡單的xml標籤來配置，也可以使用Java程式碼建立，效果並無區別，建議使用xml便籤配置，可讀取性要好一些；

• 使用xml需要在res目錄下建立anim目錄，在anim目錄下建立View動畫的xml檔案。

  

  anim目錄.png

下面詳細介紹。

1.1 平移動畫

xml配置方式

<!--translate.xml-->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1500"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="200"
android:toYDelta="0">

</translate>


//在activity中載入
Animation translate = AnimationUtils.loadAnimation(this, R.anim.translate);
image.startAnimation(translate);

• android:fromXDelta.................起始X座標，float型別
• android:fromYDelta.................起始Y座標，float型別
• android:toXDelta.....................結束X座標，float型別
• android:toYDelta.....................結束Y座標，float型別

Java程式碼

TranslateAnimation translateAnimation = new TranslateAnimation(0,200,0,0);
translateAnimation.setDuration(1500);
image.startAnimation(translateAnimation);

備註

• 4個座標都是相對於View自身的位置；
• 座標的值可以為負；
• View動畫變換的只是View的影像，View本身還在原來的地方從來沒有動過，如果給動畫設定了 android:fillAfter="true"，View執行完動畫留在結束位置，但其點選事件是無效的，點選最初的位置卻可以觸發點選。

1.2 透明度動畫

xml配置方式

<!--alpha.xml-->
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1500"
android:fromAlpha="0.1"
android:toAlpha="1.0">

</alpha>

//在activity中載入
Animation alpha = AnimationUtils.loadAnimation(this, R.anim.alpha);
image.startAnimation(alpha);

• android:fromAlpha.................起始透明度，float型別
• android:toAlpha.....................結束透明度，float型別

Java程式碼

AlphaAnimation alphaAnimation = new AlphaAnimation(0.1f,1.0f);
alphaAnimation.setDuration(1500);
image.startAnimation(alphaAnimation);

備註

• 透明度的值均為float，可以為負數，但是透明度 小於0 的效果與 等於0 的效果相同，透明度 大於1 的效果與 等於1 的效果相同，所以 alpha<0 和 alpha>1 均沒有意義；但是 alpha<0 和 alpha>1 這部分數仍然佔據動畫時間，舉個例子：如果設定透明度動畫從-100到1.0變化，時間為1000ms，那麼動畫執行的大部分時間（約901ms）內是看是看不到View的。

1.3 旋轉動畫

xml配置方式

<!--rotate.xml-->
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1500"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360">

</rotate>

//在activity中載入
Animation rotate = AnimationUtils.loadAnimation(this, R.anim.rotate);
image.startAnimation(rotate);

• android:fromDegrees.................旋轉起始角度，float型別
• android:toDegrees.....................旋轉結束角度，float型別
• android:pivotX............................旋轉中心軸X座標，float，百分數，百分數+p
• android:pivotY............................旋轉中心軸Y座標，float，百分數，百分數+p

Java程式碼

RotateAnimation rotateAnimation = new RotateAnimation(0f,360f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
rotateAnimation.setDuration(1500);
image.startAnimation(rotateAnimation);

以引數最長的構造方法為例

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

• fromDegrees................................起始角度
• toDegrees....................................結束角度
• pivotXType...................................旋轉中心軸X座標型別
• pivotXValue..................................旋轉中心軸X座標引數
• pivotYType...................................旋轉中心軸Y座標型別
• pivotYValue..................................旋轉中心軸Y座標引數

1.4 縮放動畫

xml配置方式

<!--scale.xml-->
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1500"
android:fromXScale="0.5"
android:fromYScale="0.5"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.5"
android:toYScale="1.5">

</scale>

//在activity中載入
Animationscale = AnimationUtils.loadAnimation(this, R.anim.scale);
image.startAnimation(scale);

• android:fromXScale...................................起始橫向縮放值
• android:fromYScale...................................起始豎直縮放值
• android:pivotX...........................................縮放中線軸X座標
• android:pivotY...........................................縮放中線軸Y座標
• android:toXScale......................................結束橫向縮放值
• android:toYScale......................................結束豎直縮放值

Java程式碼

ScaleAnimation scaleAnimation = new ScaleAnimation(0.5f,1.5f,0.5f,1.5f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
scaleAnimation.setDuration(1500);
image.startAnimation(scaleAnimation);

以引數最全的構造方法為例

public ScaleAnimation(
float fromX,
float toX, 
float fromY,
float toY, 
int pivotXType, 
float pivotXValue,
int pivotYType,
float pivotYValue
);

• fromX.................................................起始橫向縮放值
• toX.....................................................結束橫向縮放值
• fromY.................................................起始豎直縮放值
• toY.....................................................結束豎直縮放值
• pivotXType........................................縮放中線軸X座標型別
• pivotXValue.......................................縮放中線軸X座標值
• pivotYType........................................縮放中線軸Y座標型別
• pivotYValue.......................................縮放中線軸Y座標值

1.5 關於中心軸座標

xml配置時

引數型別	引數值
float	View左上點座標+引數值
百分數	View左上點座標+View寬高的百分比
百分數+p	View左上點座標+View父View寬高的百分比

Java程式碼建立

座標型別

座標型別引數	描述
Animation.ABSOLUTE	座標引數=View左上點座標+引數值
Animation.RELATIVE_TO_SELF	座標 = View左上點座標 + View寬高x座標引數值
Animation.RELATIVE_TO_PARENT	座標 = View左上點座標 + View父View寬高x座標引數值

1.6 動畫集合（AnimationSet）

View動畫框架提供AnimationSet，方便我們播放多個動畫時使用，下面將上述四個動畫何在一起執行，產生了 暴擊！！！

至於為什麼產生了這樣的效果呢，聰明的小夥伴應該已經猜到了。平移動畫和旋轉動畫同時執行時，旋轉中心軸時時不變的，但是View的動畫影像位置已經變了，具體這裡不分析了。

xml配置時

<!--anim_set.xml-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="true">
<translate
android:duration="1500"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="200"
android:toYDelta="0">

</translate>
<scale
android:duration="1500"
android:fromXScale="0.5"
android:fromYScale="0.5"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.5"
android:toYScale="1.5">

</scale>
<rotate
android:duration="1500"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360">

</rotate>
<alpha
android:duration="1500"
android:fromAlpha="0.1"
android:toAlpha="1.0">

</alpha>
</set>


//在activity中載入
Animation animationSet = AnimationUtils.loadAnimation(this,R.anim.anim_set);
image.startAnimation(animationSet);

• android:shareInterpolator...................................是否共享時間插值器，預設為true

Java程式碼

AnimationSet animationSet = new AnimationSet(true);

TranslateAnimation translateAnimation = new TranslateAnimation(0,200,0,0);
AlphaAnimation alphaAnimation = new AlphaAnimation(0.1f,1.0f);
RotateAnimation rotateAnimation = new RotateAnimation(0f,360f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
ScaleAnimation scaleAnimation = new ScaleAnimation(0.5f,1.5f,0.5f,1.5f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);

animationSet.addAnimation(translateAnimation);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(alphaAnimation);

animationSet.setDuration(1500);

image.startAnimation(animationSet);

1.6 通用屬性

除了不同動畫的特有屬性，他們還有許多通用屬性，四種View動畫和動畫集合都可以使用。

xml	Java方法	引數型別（預設值）	描述
android:duration	setDuration	long，預設0	動畫執行一次的時間，單位毫秒（ms）
android:fillAfter	setFillAfter	boolean，預設false	View在動畫執行結束是否停留在最後一幀,，預設為否（false）
android:fillBefore	setFillBefore	boolean，預設false	View在動畫執行前，是否設定為第一幀的狀態，在AnimationSet中無效，在android:startOffset大於0的時候才能體現的出來，預設為是（true）
android:fillEnabled	setFillEnabled	boolean，預設false	設定動畫與開始時間的間隔時間的毫秒數，即延遲時間
android:startOffset	setStartOffset	long，預設0	設定fillBefore屬性是否有效，預設為無效（false）
android:repeatCount	setRepeatCount	int，-1為無數次，預設0	動畫重複次數（執行次數=重複次數+1），在AnimationSet中無效
android:repeatMode	setRepeatMode	常量[ Animation.RESTART ， Animation.REVERSE ]， xml(restart，reverse)， 預設為Animation.RESTART（xml為"restart"）	動畫重複模式，RESTART為每次正序播放，REVERSE為正序和倒敘間隔播放
android:zAdjustment	setZAdjustment	常量[ Animation.ZORDER_NORMAL ， Animation.ZORDER_TOP ， Animation.ZORDER_BOTTOM ]， xml(normal，top，bottom)， 預設為[Animation.ZORDER_NORMAL（xml為normal）	設定動畫在Z軸的位置，貌似僅適用於視窗動畫
-	start	-	啟動動畫，一般不直接呼叫
-	cancel	-	取消動畫，AnimationSet無效
-	isInitialized	-	動畫是否初始化完成，AnimationSet無效
-	setAnimationListener	Animation.AnimationListener	設定動畫監聽器，因為AnimationSet無法設定repeatCount，所以無法回撥onAnimationRepeat

animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
//動畫開始回撥
Log.d("TAG", "onAnimationStart");
}

@Override
public void onAnimationEnd(Animation animation) {
//動畫結束回撥
Log.d("TAG", "onAnimationEnd");
}

@Override
public void onAnimationRepeat(Animation animation) {
//動畫重複回撥
Log.d("TAG", "onAnimationRepeat");
}
});

1.7 使用場景

1.7.1 View使用

如同上面的例子

1.7.2 Activity的轉換動畫

例如，使用overridePendingTransition方法

overridePendingTransition(R.anim.enter, R.anim.exit);

必須放在startActivity或者finish方法之後

1.7.3 Fragment轉換動畫

使用FragmentTransaction.setCustomAnimations()方法

1.7.4 Layou動畫

<LinearLayout 
android:layout_width="match_parent"
android:layout_height="match_parent"

android:layoutAnimation="@anim/layoutAnimation"

android:orientation="vertical">
</LinearLayout>


<!--layout_animation.xml-->
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:animation="@anim/enter"
android:animationOrder="normal"
android:delay="0.2">

</layoutAnimation>