動畫簡介

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

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

Android 會根據您想要的動畫類型,提供不同的動畫 API。本文件將概略說明可用於為 UI 新增動畫的各種方式。

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

以動畫呈現點陣圖

圖 1. 可繪項目動畫。

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

舉例來說,如果想向使用者說明兩個動作之間的關聯,不妨為播放按鈕加上動畫效果,讓使用者在輕觸時看到該按鈕轉變為暫停按鈕。

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

為 UI 顯示設定和動作製作動畫

圖 2. 對話方塊出現和消失時,加入細微的動畫效果,可讓 UI 變更不那麼突兀。

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

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

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

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

物理運動

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

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

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

為提供這些行為,Android 支援資料庫包含了以物理為基礎的動畫 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() 提供的一組選項。這個選項組合可能會包含活動之間共用的檢視畫面,以便轉換架構在動畫期間連結這些檢視畫面。

如需其他資源,請參閱: