Android 動畫之補間動畫(View Animation)
Android 中補間動畫包括下面四種:
1.透明度動畫 (AlphaAnimation)
2.縮放動畫 (ScaleAnimation)
3.平移動畫 (TranslateAnimation)
4.旋轉動畫 (RotateAnimation)
補間動畫是專門針對View 的。只能應用於View。
具體使用
AlphaAnimation
補間動畫可以使用Java程式碼建立也可以使用xml檔案建立。在Java程式碼中建立透明度動畫:
AlphaAnimation alphaAnimation = new AlphaAnimation(1f, 0f); alphaAnimation.setDuration(1000); imageView.startAnimation(alphaAnimation);
使用xml檔案建立,需要在res資料夾下新建一個anim資料夾,所有的補間動畫全部放在此資料夾下。
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="1"
android:toAlpha="0"
android:duration="1000">
</alpha>
屬性含義: fromAlpha 動畫開始時View的透明度 1為完全不透明 0為完全透明 取值為0~1 toAlpha 動畫結束時View的透明度 duration 動畫持續時間 單位為毫秒
在Java程式碼中使用AnimationUtils來載入動畫並開始該動畫:
Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);
imageView.startAnimation(alphaAnimation);
ScaleAnimation
在Java程式碼中建立縮放動畫
ScaleAnimation scaleAnimation = new ScaleAnimation(1f, 2f, 1f, 2f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); scaleAnimation.setDuration(1000); imageView.startAnimation(scaleAnimation);
使用xml檔案建立,
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1"
android:toXScale="2"
android:fromYScale="1"
android:toYScale="2"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000">
</scale>
屬性含義: fromXScale 動畫開始時X軸方向上的縮放係數 toXScale 動畫結束時X軸方向上的縮放係數 fromYScale 動畫開始時Y軸方向上的縮放係數 toYScale 動畫結束時Y軸方向上的縮放係數 pivotX X軸方向上的縮放的軸點 值可以是具體值 百分比 百分比p(如50%p) 例如50 代表pivotX 為當前執行動畫的View的左上角加上50px為軸點。 50%代表當前執行動畫的View的左上角加上View寬的50%為軸點。50%p代表當前執行動畫的View的左上角加上該View的父View寬的50%為軸點。 pivotY Y軸方向上的縮放的軸點。取值同pivotX。
在Java程式碼中載入並開始該動畫
Animation scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_anim);
imageView.startAnimation(scaleAnimation);
TranslateAnimation
在Java程式碼中建立平移動畫
TranslateAnimation translateAnimation = new
TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 0.5f);
translateAnimation.setDuration(1000);
imageView.startAnimation(translateAnimation);
使用xml檔案建立,
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="50%"
android:fromYDelta="0"
android:toYDelta="50%"
android:duration="1000" >
</translate>
屬性含義: fromXDelta 動畫開始時X軸方向上的移動距離。值可以是具體值 百分比 百分比p(如50%p) toXDelta 動畫結束時X軸方向上的移動距離。值可以是具體值 百分比 百分比p(如50%p) fromYDelta 動畫結束時Y軸方向上的移動距離。值可以是具體值 百分比 百分比p(如50%p) toYDelta 動畫結束時Y軸方向上的移動距離。值可以是具體值 百分比 百分比p(如50%p)
在Java程式碼中載入並開始該動畫
Animation translateAnimation = AnimationUtils.loadAnimation(this,
R.anim.translate_anim);
imageView.startAnimation(translateAnimation);
RotateAnimation
在Java程式碼中建立旋轉動畫
RotateAnimation rotateAnimation = new RotateAnimation(0f, 180f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(1000);
imageView.startAnimation(rotateAnimation);
使用xml檔案建立,
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="180"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000">
</rotate>
屬性含義: fromDegrees 動畫開始時的角度 toDegrees 動畫結束時的角度 正直表示順時針旋轉 負值表示逆時針旋轉 pivotX 旋轉的中心點X軸座標 取值和ScaleAnimation 的pivotX一樣 pivotY 旋轉的中心點Y軸座標
在Java程式碼中載入並開始該動畫
Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_anim);
imageView.startAnimation(rotateAnimation);
注意:scaleAnimation 和 rotateAnimation 中的pivotX 和 pivotY可以看成是一個釘子釘在該座標點上在進行縮放或旋轉。在計算pivotX和pivotY的值的時候要注意。不管是具體指,還是百分比 或 百分比p。都是以進行動畫的View的左上角為原點來計算。即50%是以該View的中間位置作為軸點。但是50%p就不是以該View的父View的中心位置作為軸點。而是以該View的左上角加上該View的父View的寬高的一半作為軸點。這一點需要注意。
AnimationSet
Android 還提供了一個AnimationSet類來組合使用補間動畫。
在Java程式碼中使用AnimationSet
AnimationSet set1 = new AnimationSet(true);
AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
alphaAnimation.setDuration(1000);
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(1000);
AnimationSet set2 = new AnimationSet(true);
set2.addAnimation(new RotateAnimation(0, 360,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f));
set2.addAnimation(new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0,
Animation.RELATIVE_TO_SELF, 0.5f));
set2.setDuration(2000);
set2.setStartOffset(1000);
set1.addAnimation(alphaAnimation);
set1.addAnimation(scaleAnimation);
set1.addAnimation(set2);
//開始動畫
imageView.startAnimation(set1);
同樣我們可以在xml檔案中建立AnimationSet
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="true">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="1000"/>
<scale
android:fromXScale="1.0"
android:toXScale="0.5"
android:fromYScale="1.0"
android:toYScale="0.5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"/>
<set android:shareInterpolator="true"
android:startOffset="1000"
android:duration="2000">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%" />
<translate
android:fromXDelta="0"
android:toXDelta="50%"
android:fromYDelta="0"
android:toYDelta="50%" />
</set>
</set>
上面的屬性一看就懂。不做過多解釋。
補間動畫還提供了一些控制動畫的方法。 setRepeatCount(int repeatCount); 設定動畫的播放次數. 不包括第一次執行的次數. 比如設定為1.表示動畫執行2次.如果要讓動畫一直重複,可以傳入一個小於0的數.如 -1。 setRepeatMode(int repeatMode); 設定動畫的重複播放的模式,包括Animation.RESTART(重複播放) Animation.REVERSE(倒序播放) setFillAfter(boolean fillAfter) 設定動畫在執行完畢後是否停留在最後一幀,預設為false。 setStartOffset(long startOffset) 設定動畫延時。
監聽動畫的執行 我們有時候需要在動畫執行開始前 執行結束後執行一些操作可以監聽檢視動畫的執行。呼叫Animation.setAnimationListener(); 比如我們要監聽TranslateAnimation動畫
TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 0.5f);
translateAnimation.setDuration(1000);
translateAnimation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
imageView.startAnimation(translateAnimation);