動畫簡介

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

動畫可以加入視覺提示,通知使用者應用程式發生的事件。在 UI 變更狀態時 (例如載入新內容或有新動作時),這類提示特別實用。動畫還能讓應用程式看起來更精緻,進而提升應用程式的外觀與風格。

Android 可根據您想使用的動畫類型,提供不同的動畫 API。本說明文件概略說明您可以在 UI 中加入動態效果的不同方式。

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

為點陣圖套用動畫效果

圖 1 可繪項目動畫。

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

舉例來說,如要向使用者說明兩項動作彼此相關,最好的做法是為播放按鈕加入動畫效果,該按鈕會在使用者輕觸時轉換成暫停按鈕。

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

為 UI 顯示設定和動作建立動畫效果

圖 2. 如果在對話方塊顯示和消失時,顯示一些細微的動畫效果,會降低 UI 變更的不協調程度。

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

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

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

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

物理運動

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

圖 4. 以物理式 API 為基礎的動畫

盡可能為動畫套用真實世界物理,讓動畫呈現自然的外觀。例如,當目標改變時,他們應維持動力,並在任何變更期間順利轉換。

為提供這些行為,Android 支援資料庫加入了以物理為基礎的動畫 API,這些 API 會利用物理法來控制動畫的顯示方式。

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

以非物理為基礎的動畫 (例如使用 ObjectAnimator API 建構的動畫) 會相當靜態,且時間長度也固定。如果目標值有所變更,您必須在變更目標值時取消動畫,並以新的起始值重新設定動畫,並加入新的目標值。就視覺上而言,這個程序會在動畫中造成突如其來的停格,之後則會有不連續的動作,如圖 3 所示。

使用以物理為基礎的動畫 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() 提供的一組選項。這組選項可能包含活動之間共用哪些檢視畫面,以便轉換架構在動畫期間連結這些檢視畫面。

如需其他資源,請參閱: