Android 動畫Animation
動畫分為檢視動畫(view animation)和屬性動畫(property animation),檢視動畫又分為幀動畫和補間動畫
檢視動畫控制元件(iv)點選事件(OnClickListener介面)觸發位置在原位置
1.幀動畫(Frame animation)
res/drawable/xxx.xml
<animation-list ... android:oneshot="true"> // false
<item android:drawable="@drawable/..."
android:duration="200"/> // 顯示時間
... // 按先後順序寫
</animation-list>
iv.setBackgroundResource(R.drawable.xxx);
((AnimationDrawable)iv.getBackground()).start(); // View類的start()
2.補間動畫(Tween animation)
分為平移、縮放、透明、旋轉和混合
res/anim/xxx.xml
a.平移(TranslateAnimation)
<translate ...
android:fromXDelta="0"
android:fromYDelta="0" //圖片起始位置座標(00為左上角)
android:toXDelta="500"
android:toYDelta="500"
android:duration="2000" // 5個必要屬性
android:fillAfter="true" // 保持動畫最後那個狀態
android:repeatCount="1" // 執行兩次,"infinite":永久
android:repeatMode="restart"/> // "reverse" 兩種重複模式
pubic void translate(View view) {
iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.xxx));
}
a.2 程式碼構造平移動畫
public void translate(View view){
TranslateAnimation animation = new TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta); // float
// fromXDelta = toXDelta = fromYDelta = 0;toYDelta = -500; // 移動Y
animation.setDuration(2000);
animation.setFillAfter(true);
animation.setRepeatCount(1); // Animation.INFINITE
animation.setRepeatMode(Animation.RESTART);
iv.startAnimation(animation);
animation = new TranslateAnimation(
fromXType, fromXValue, // Animation.RELATIVE_TO_SELF, 0
toXType, toXValue, // Animation.RELATIVE_TO_PARENT, 0
fromYType, fromYValue, // Animation.RELATIVE_TO_SELF, 0
toYType, toYValue, // Animation.RELATIVE_TO_PARENT, 倍數
);
注意第四排引數,結束Y位置 = 原來動畫Y + toYValue*佈局的高度
改第四排引數為:// Animation.RELATIVE_TO_SELF, 倍數 後,結束Y位置 = 原來動畫Y + toYValue*控制元件的高度/佈局的高度
}
b.縮放(ScalaAnimation)
<scale ... // 屬性都是相對於圖片本身,1212是以圖片左上角為原點的縮放倍數
android:fromXScale="0" // "1"
android:toXScale="1" // "2"
android:fromYScale="0" // "1"
android:toYScale="1" // "2"
android:duration="2000" // 5個必要屬性
android:povotX="50%"
android:povotY="50%" //縮放中心(預設為控制元件左上角),百分數:不能為小數,為控制元件寬/高的百分比
android:fillAfter="true" // 保持動畫最後那個狀態
android:repeatCount="1" // 執行兩次,"infinite":永久
android:repeatMode="restart"/> // "reverse" 兩種重複模式
public void scale(View view) {
iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.xxx));
}
b.2 程式碼實現縮放動畫
public void scale(View view) {
每個動畫都有的屬性:
1.構造方法 ScalAnimation animation = new ScalAnimation(fromX, toX, fromY, toY); // 1, 0, 1, 0
2.時間: animation.setDuration(2000);
3.是否停留 // 345可省略
4.重複次數
5.重複模式
6.讓控制元件展示動畫 img.setAnimation(animation);
animation = new ScalAnimation(1, 0, 1, 0, pivotX, pivotY); // pivotX = iv.getWidth()/2; pivotY = iv.getHeight()/2; // iv表示控制元件
animation = new ScalAnimation(1, 0, 1, 0,
pivotXType, pivotX, // Animation.RELATIVE_TO_SELF, 0.5f
pivotYType, pivotY); // Animation.RELATIVE_TO_PARENT, 0.5f
}
c.透明(AlphaAnimation)
<alpha ...
android:fromAlpha="1" // 完全不透明(原圖),[0,1]的小數,不能是百分數
android:toAlpha="0" // 完全透明(消失)
android:duration="2000"/>
public void alpha(View view) {
iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.xxx));
}
c.2 程式碼實現透明動畫
public void alpha(View view) {
AlphaAnimation animation = new AlphaAnimation(1,0.2f);
animation.setDuration(2000);
animation.setFillAfter(true);
iv.startAnimation(animation);
}
d.旋轉(RotateAnimation)
<rotate ...
fromDegress="0"
toDegress="360"
pivotX="50%" // 100%
pivotY="50%" // 100%
duration="2000"/>
public void rotate(View view) {
iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.xxx));
}
d.2 程式碼實現旋轉動畫
public void rotate(View view) {
RotateAnimation animation = new RotateAnimation(0,360);
animation = new RotateAnimation(0, -360, iv.getWidth()/2, iv.getHeight()/2);
animation = new RotateAnimation(0, 720,
Animation.RELATIVE_TO_PARENT, 0.5f,
Animation.RELATIVE_TO_PARENT, 0.5f); // ps: 不是螢幕中心
animation.setDuration(2000);
iv.startAnimation(animation);
}
e.混合(AnimationSet)
<set ... > // 動畫集合
<translate />
<rotate />
...
</set>
public void mix(View view) {
iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.xxx));
}
e.2 程式碼實現動畫集合
AnimationSet set = new AnimationSet(false); // 為true時set可設定所有型別動畫的屬性
set.addAnimation(translateAnimation);
...
iv.startAnimation(set);
2.2 動畫監聽器
animation.setAnimationListener(new AnimationListener() {
public void onAnimationStart(Animation animation) {}
public void onAnimationRepeat(Animation animation) {}
public void onAnimationEnd(Animation animation) {}
})