Android動畫了解—視圖動畫

視圖動畫

視圖動畫 包含 補間動畫(Tween Animation) 與 逐幀動畫(Frame Animation)

1. 補間動畫(Tween Animation)

XML實現	代碼實現
alpha 透明度動畫	AlphaAnimation
scale 縮放動畫	ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)
translate 移動動畫	TranslateAnimation
rotate 旋轉動畫	RotateAnimation
set 動畫集合	AnimationSet

// 代碼實現
TranslateAnimation translateAnim = new TranslateAnimation(0, 300, 0, -50);
translateAnim.setFillAfter(true);
translateAnim.setDuration(1000);
view.startAnimation(translateAnim);

透明的效果

看看XML的DEMO

// XML實現 => res/anim/translate_anim.xml
// 動畫集合 set,包含了 alpha(透明) + rotate(旋轉)
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
	// 透明度 0.0 ~ 1.0 的過渡
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
	// 旋轉(以中心旋轉(0~720)
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="720" />
</set>
// 在代碼中進行設置 xml 動畫文件
Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate_anim);
view.startAnimation(animation);

// 代碼翻譯XML
AnimationSet set = new AnimationSet(true);
set.addAnimation(new AlphaAnimation(...));
set.addAnimation(new RotateAnimation(...));
set.setDuration(3000);
view.startAnimation(set);

幾個屬性的含義

XML標籤屬性	代碼屬性	含義
android:duration	setDuration(long)	時間，毫秒，動畫執行的時間
android:fillAfter	setFillAfter(boolean)	如果爲true，動畫結束，保持結束時的狀態
android:fillBefore	setFillBefore(boolean)	如果爲true，動畫結束，恢復到初開始的狀態
android:fillEnabled	setFillEnable(boolean)	同setFillBefore類似，都是動畫結束，恢復最初狀態
android:repeatCount	setRepeatCount(int)	動畫重複次數(大於等於 0)，值爲 小於0 或 Animation.INFINITE 時，無限循環
android:repeatMode	setRepeatMode(int)	動畫重複的類型 reverse(倒序回放)， restart(從新開始)，必須與 repeatCount一起使用，纔有效果
android:interpolator	setInterpolator(Interpolator)	插值器(在屬性動畫的章節中一起講解)

// 以 中間的位置 進行 縮放(1.0 ~ 1.2 ~ 1.0 ~ 1.2) 動畫
ScaleAnimation scaleAnim = new ScaleAnimation(
	1.0f, 1.2f, 1.0f, 1.2f,
	Animation.RELATIVE_TO_SELF, 0.5f, 
	Animation.RELATIVE_TO_SELF, 0.5f);

其它相關屬性

ScaleAnimation，AlphaAnimation 等 繼承Animation，Animation 除了提供上面相關的函數外，
還提供了 cancel()取消動畫 ，reset()將控件恢復到動畫開始前的狀態

還可以設置動畫相關的監聽 Animation.setAnimationListener(new Animation.AnimationListener() { ... Start ... End ... }

AnimationListener 的 回調包含如下幾個：

• onAnimationStart(Animation animation) 動畫開始時
• onAnimationEnd(Animation animation) 動畫結束時
• onAnimationRepeat(Animation animation) 動畫重複時，一般設置了 repeatCount 的重複次數，纔會觸發

// 示例代碼
translateAnim.setAnimationListener(new Animation.AnimationListener() {
	@Override
	public void onAnimationStart(Animation animation) {
	}

	@Override
	public void onAnimationEnd(Animation animation) {
	}

	@Override
	public void onAnimationRepeat(Animation animation) {
	}
});

場景小劇場
有一個小場景，是我們公司的 一個 HDMI信號界面，就是這種水波紋，還有一些信號覆蓋的也有類似的動畫效果… …

還有界面上看到的一些進度條愛的魔力轉圈圈，比如
還有我們看到的一些應用的過渡效果。

當然，使用的場景很多，這裏只是列舉幾個… …

2. 逐幀動畫(Frame Animation)

通俗的理解就是，一幀挨一幀地播放圖片，就像放電影/動畫片一樣，可以通過XML實現，也可以通過代碼實現；

XML實現

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" | "true">
    <item android:drawable="@drawable/img000001" android:duration="60(integer)"/>
    ... ...
</animation-list>

• android:oneshot 如果定義爲 true，動畫只執行一次，反之，一直循環
• android:drawable 指定此幀動畫的圖片資源
• android:duration 幀動畫持續的時間，整數，單位毫秒ms

舉個栗子(XML)：

# playing_test_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/img000001" android:duration="60"/>
    <item android:drawable="@drawable/img000002" android:duration="60"/>
 	... ...
</animation-list>

# 佈局 xml 文件
<ImageView android:src="@drawable/playing_test_anim"/>
        
# 代碼執行
AnimationDrawable animDrawable = (AnimationDrawable) imageView.getDrawable();     
animDrawable.start();

AnimationDrawable 幾個常用函數

函數名稱	含義
start	開始播放
stop	停止播放
int getDuration(int index)	得到指定 index 幀的時間
Drawable getFrame(int index)	得到指定 index 幀對應的 Drawable 對象
int getNumberOfFrames()	獲取 所有幀的數量
boolean isRunning()	是否正在播放
setOneShot(boolean oneShot)	true 執行一次，false 循環播放
boolean isOneShot()	返回 true 執行一次，返回 false 循環播放
addFrame(Drrawable frame, int duration)	添加一幀，並設置持續時間

代碼實現

關鍵函數：addFrame(Drrawable frame, int duration)

舉個小栗子(代碼)：

final AnimationDrawable animationDrawable = new AnimationDrawable();
for (int i = 1; i < 28; i++) {
	int id = getResources().getIdentifier("img00000" + i, "drawable", getPackageName());
    Drawable drawable = getResources().getDrawable(id);
    animationDrawable.addFrame(drawable, 60);
}
animationDrawable.setOneShot(false);
imageView.setImageDrawable(animationDrawable);
animationDrawable.start();

場景小劇場
幀動畫 會在 製作 較爲複雜的個性化動畫效果 出現，比如 引導動畫，還有類似的開機動畫 等等

小總結
Frame Animation（逐幀動畫）相對來說
優點：比較簡單（使用簡單、方便），實際開發中使用的頻率還是比較高的。
缺點： 一方面是因爲會造成OOM，另一方面會顯得很卡，另另一方面也是資源圖片也會很多；如果複雜而且幀數比較多的動畫不太建議使用逐幀動畫

現在 技術上 層出不窮，已經出現了很多可以替代的方案，比如 SVG動畫，Lottie庫 等。

參考資料

Android動畫-View動畫的使用場景

---

Android動畫了解—爲什麼需要動畫<=上個章節 下個章節=> Android動畫了解—屬性動畫(Property Animation)