動畫簡介

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

動畫可以加入視覺提示,讓使用者知道應用程式的目前情況。在使用者介面變更狀態時 (例如載入新內容或有新操作時),這種功能就特別實用。動畫還能讓應用程式看起來更精緻,提升外觀與風格。

Android 包含不同的 Animation API,視您需要的動畫類型而定。本文件概略說明在 UI 中加入動作的不同方式。

如要進一步瞭解何時應使用動畫,請參閱 Material Design 動畫指南。

為點陣圖加上動畫

圖 1. 可繪項目動畫。

如要為點陣圖圖形 (例如圖示或插圖) 加上動畫效果,請使用可繪項目 Animation API。通常,這些動畫是以可繪製資源靜態定義,但您也可以在執行階段定義動畫行為。

舉例來說,如要向使用者傳達兩個動作相關,可以將播放按鈕設為動畫,在輕觸時轉換為暫停按鈕。

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

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

圖 2. 對話方塊出現和消失時,加入細微的動畫效果,可讓 UI 變化更自然。

如需變更版面配置中檢視畫面的顯示設定或位置,建議加入細微動畫,協助使用者瞭解 UI 的變化。

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

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

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

符合物理原理的動態

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

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

請盡可能將真實世界的物理現象套用至動畫,讓動畫看起來更自然。舉例來說,當目標變更時,應維持動量,並在任何變更期間順暢轉換。

為提供這些行為,Android 支援資料庫包含物理動畫 API,可依據物理定律控制動畫的呈現方式。

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

非以物理為基礎的動畫 (例如使用 ObjectAnimator API 建構的動畫) 相當靜態,且持續時間固定。如果目標值有所變更,您必須在目標值變更時取消動畫,並以新值做為新的起始值重新設定動畫,然後新增目標值。從視覺上看,這個程序會導致動畫突然停止,隨後出現不連貫的動作,如圖 3 所示。

使用以物理為基礎的 Animation API (例如 DynamicAnimation) 建構的動畫是由力驅動。目標值變更會導致作用力變更。新的力道會套用至現有速度,進而持續轉換至新的目標。這個程序會產生更自然的動畫,如圖 4 所示。

以動畫呈現版面配置變更

圖 5. 如要顯示更多詳細資料,可以變更版面配置或啟動新活動,藉此呈現動畫。

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

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

起始和結束版面配置會分別儲存在 Scene 中,但起始場景通常會根據目前的版面配置自動決定。您需要建立 Transition,告知系統您想要的動畫類型,然後呼叫 TransitionManager.go(),系統就會執行動畫來切換版面配置。

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

在活動之間加入動畫

在 Android 5.0 (API 級別 21) 以上版本中,您也可以建立在活動之間轉換的動畫。這項功能是以先前章節所述的相同轉場架構為基礎,但可讓您在不同活動的版面配置之間建立動畫。

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

和往常一樣,您會呼叫 startActivity(),但會傳遞 ActivityOptions.makeSceneTransitionAnimation() 提供的選項組合。這組選項可能包含在活動之間共用的檢視畫面,以便轉換架構在動畫期間連結這些檢視畫面。

如需其他資源,請參閱: