動畫簡介

嘗試 Compose 方法
Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何在 Compose 中使用動畫。

動畫可以加入視覺提示,通知使用者應用程式目前的運作情形。當 UI 變更狀態時 (例如載入新內容或有新動作時),這類動畫就特別實用。動畫也會讓應用程式看起來更精緻,進而提升應用程式的外觀與風格。

Android 會根據所需的動畫類型提供不同的動畫 API。本文件提供在 UI 中加入動作的總覽。

如要進一步瞭解使用動畫的時機,另請參閱有關動態效果的質感設計指南

將點陣圖製作成動畫

圖 1:可繪項目動畫。

如要為圖示或插圖等點陣圖圖形建立動畫,請使用可繪項目動畫 API。這些動畫通常與可繪製資源以靜態方式定義,但您也可以在執行階段定義動畫行為。

舉例來說,向使用者傳達兩項相關動作的好方法,是將播放按鈕設為動畫,使用者輕觸該按鈕時就會變成暫停按鈕。

詳情請參閱「以動畫方式呈現可繪項目圖形」。

為 UI 顯示設定和動作加上動畫效果

圖 2. 當對話方塊顯示並消失時,其動畫效果會降低 UI 變更的困擾。

當您需要變更版面配置中檢視畫面的顯示設定或位置時,最好加入細微的動畫,協助使用者瞭解 UI 的變化。

如要移動、顯示或隱藏目前版面配置中的檢視畫面,您可以使用 Android 3.0 (API 級別 11) 以上版本提供的 android.animation 套件提供的屬性動畫系統。這些 API 會在一段時間內更新 View 物件的屬性,並在屬性變更時持續遮蓋檢視畫面。舉例來說,當您變更位置屬性時,檢視畫面會在畫面上移動。變更 Alpha 屬性時,檢視畫面會淡入或淡出。

如果想建立這些動畫,最簡單的方法是在版面配置中啟用動畫。這樣一來,當您變更檢視畫面的顯示設定時,系統就會自動套用動畫。詳情請參閱「自動以動畫方式更新版面配置」。

如要瞭解如何使用屬性動畫系統建構動畫,請參閱「屬性動畫總覽」。您還可以查看下列頁面,建立常見的動畫:

物理動作

圖 3. 使用 ObjectAnimator 建構的動畫。

圖 4. 使用以物理為基礎的 API 建構的動畫。

請盡可能將真實的物理特性套用至動畫,讓動畫呈現自然視覺效果。例如,當目標變更時,它們應該保持動力,並在任何變更時順利轉換。

為了提供這些行為,Android 支援資料庫包含以物理為基礎的動畫 API,且這些 API 採用物理法律來控管動畫的呈現方式。

以下是兩個常見的物理動畫:

非以物理為基礎的動畫 (例如使用 ObjectAnimator API 建構的動畫) 相當靜態,且有固定時間長度。如果目標值發生變更,您必須在目標值變更時取消動畫、以新的值重新設定動畫,並新增目標值。如圖 3 所示,這項程序會在動畫中突然出現停格,並在之後分段移動。

使用 DynamicAnimation 等以物理為基礎的動畫 API 建立的動畫會由強制驅動。目標值的變更會導致強制改變。新的強制執行速度會套用至現有的速率,進而持續轉換至新目標。這個程序會產生更自然的動畫,如圖 4 所示。

以動畫呈現版面配置變更

圖 5. 藉由變更版面配置或開始新活動,可以達成展示更多詳細資料的動畫。

在 Android 4.4 (API 級別 19) 以上版本中,當您在目前活動或片段中切換版面配置時,可以使用轉換架構建立動畫。您只需指定開始和結束版面配置,以及要使用的動畫類型即可。接著,系統會判斷並執行兩個版面配置之間的動畫。您可以用這個方法替換整個 UI,或是移動或取代部分檢視畫面。

舉例來說,當使用者輕觸某個項目查看詳細資訊時,您可以將版面配置替換成項目詳細資料,套用如圖 5 所示的轉場效果。

開始和結束的版面配置皆儲存在 Scene 中,但起始場景通常是根據目前的版面配置自動決定。您可以建立 Transition 向系統說明所需的動畫類型,然後呼叫 TransitionManager.go(),接著系統會執行動畫來切換版面配置。

詳情請參閱「使用轉場功能以動畫方式變更版面配置」。如需程式碼範例,請參閱 BasicTransition

在活動之間建立動畫

在 Android 5.0 (API 級別 21) 以上版本中,您還可以建立動畫,以便在活動之間轉換。這以上一節所述的相同轉換架構為基礎,但可讓您在不同活動中的版面配置之間建立動畫。

您可以套用簡單的動畫,例如從側邊滑動新活動或將其淡入,但也可以建立動畫,在每個活動中的共用檢視畫面之間轉換。舉例來說,當使用者輕觸某個項目查看更多資訊時,您可以轉換成新活動,其中動畫會順暢地呈現該項目來填滿螢幕畫面,如圖 5 所示的動畫。

和平常一樣,您可以呼叫 startActivity(),但向其傳遞 ActivityOptions.makeSceneTransitionAnimation() 提供的一系列選項。這個選項組合可能包含不同活動之間共用的檢視畫面,以便轉換架構在動畫播放期間能夠連結這些檢視畫面。

如需其他資源,請參閱: