動畫簡介

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

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

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

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

為點陣圖套用動畫效果

圖 1. 可繪項目動畫。

如要為圖示或插圖等點陣圖圖形製作動畫,請使用可繪製動畫 API。這類動畫通常是以靜態方式定義及擁有可繪項目 但您也可以在執行階段定義動畫行為。

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

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

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

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

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

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

想要用最簡單的方式製作這些動畫,您可以在 版面配置,如此一來,當您變更檢視畫面的顯示設定時,系統就會套用 。詳情請參閱「自動為版面配置更新項目加上動畫」。

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

物理運動

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

圖 4. 以物理為基礎的動畫 相互整合

盡可能將真實世界的物理學套用至動畫 自然流暢舉例來說,在目標變更時,他們應維持動能,並在任何變更期間順利轉換。

為提供這些行為,Android 支援資料庫包含了以物理為基礎的動畫 API,可依據物理定律控制動畫的發生方式。

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

非以物理為基礎的動畫 (例如使用 ObjectAnimator API 建構的動畫) 相當靜態,且有固定的時間長度。如果指定值有所變更,您必須在指定值變更時取消動畫、以新值做為新的開始值重新設定動畫,然後新增新的指定值。流程圖 導致動畫出現突發的停靠站,之後則有不連續的動作。 如圖 3 所示

使用以物理為基礎的動畫 API (例如 DynamicAnimation) 建立的動畫,是由力所驅動。目標值的變化會導致力道發生變化。而 同時以現有速率施展 新的目標這項程序會使動畫看起來更自然 如圖 4 所示

以動畫呈現版面配置變更

圖 5. 動畫:您可以使用 您可以變更版面配置或開始新活動。

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

舉例來說,如果使用者輕觸某個項目查看更多資訊,您可以替換 版面配置和商品詳細資料,並依照 圖 5.

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

詳情請參閱「使用轉場功能,以動畫呈現版面配置變更」。如需程式碼範例,請參閱: 基本轉換 ,直接在 Google Cloud 控制台實際操作。

在活動之間加入動畫效果

在 Android 5.0 (API 級別 21) 以上版本中,您也可以建立 需要切換活動根據相同的轉場效果 可讓您建立動畫 在個別活動中切換版面配置。

您可以套用簡易動畫,例如前往 移動或淡出,但您也可以建立動畫,在 共用檢視次數。舉例來說,當使用者輕觸項目查看更多資訊時,您可以透過動畫轉換至新活動,讓該項目無縫放大並填滿畫面,如圖 5 所示。

像往常一樣, startActivity()、 但將 Google Cloud 提供的 ActivityOptions.makeSceneTransitionAnimation()。 這個選項組合可能會包含活動之間共用的檢視畫面,以便轉換架構在動畫期間連結這些檢視畫面。

如需其他資源,請參閱: