MotionLayout 範例

試試 Compose 的方式

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

Compose 中的動畫 →

本文件提供 MotionLayout 的使用範例。每個範例都包含示範動作的影片，以及動畫場景和版面配置的對應程式碼。

基本動作

這個範例包含單一檢視畫面，您可以觸碰並拖曳來水平移動。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 1. 拖曳檢視畫面。

自訂屬性 - backgroundColor

這個範例與「基本動作」範例類似。除了基本動作之外，檢視畫面的背景顏色也會隨著檢視畫面移動而變更。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 2. 拖曳檢視畫面時，其背景顏色會變更。

ImageFilterView - 圖片轉場效果

本範例說明如何轉換 ImageFilterView 的飽和度值。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 3. 拖曳圖片時，其飽和度會發生變化。

主要畫面格位置

本範例使用 <KeyFrameSet> 在動作期間變更檢視畫面的 Y 位置。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 4. 拖曳檢視畫面並變更其 Y 位置。

主要影格插補

本範例以主要影格位置範例為基礎，為檢視畫面轉場效果新增旋轉和縮放效果。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 5. 拖曳檢視畫面並變更其 Y 位置、旋轉和縮放。

主影格週期

這個範例會新增 <KeyCycle> 元素，為檢視畫面加入波浪般的動作。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 6. 拖曳具有波浪動作的檢視畫面，同時變更其顏色。

CoordinatorLayout (1/2)

這個範例會將 MotionLayout 新增至現有的 AppBarLayout，以便在應用程式列中加入動畫效果。如需進一步瞭解這個範例，請參閱 MotionLayout 簡介 (第 3 部分)。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 7. 在應用程式列展開時捲動內容。

CoordinatorLayout (2/2)

這個範例會將 MotionLayout 新增至現有的 AppBarLayout，以便在應用程式列中加入動畫效果。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 8. 捲動內容時，應用程式列會展開，文字會在應用程式列中進出顯示動畫。

DrawerLayout (1/2)

本範例說明如何為 DrawerLayout 新增動作。如需進一步瞭解這個範例，請參閱「MotionLayout 簡介 (第 III 部分)」一文。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 9. 展開 `DrawerLayout`。

DrawerLayout (2/2)

本範例說明如何為 DrawerLayout 新增動作。

• 查看 版面配置 XML。
• 查看主要內容的 MotionScene XML。
• 查看選單的 MotionScene XML。

圖 10. 使用動畫選單文字展開「DrawerLayout」。

側邊面板

本範例說明如何在將主要內容區域拖曳至右側時，顯示側邊面板。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 11. 拖曳主要內容來顯示側邊面板。

視差

這個範例展示了視差背景，其中不同的背景圖層以不同速度移動。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 12. 頁首圖片中的視差效果。

ViewPager

這個範例說明如何在 ViewPager 分頁之間滑動時加入動畫效果。如需進一步瞭解這個範例，請參閱 MotionLayout 簡介 (第 3 部分)。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 13. 滑動 `ViewPager` 時，標頭圖片中的視差效果。

ViewPager - Lottie

這個範例說明如何在 ViewPager 分頁之間滑動時加入動畫效果。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 14. 在滑動 `ViewPager` 時，顯示標頭圖片中 Lottie 效果的圖片。

複雜動作 (1/3)

這個範例結合了先前範例中的元素，以展示複雜的動畫。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 15. 結合特效來創造複雜的動作。

複雜動作 (2/3)

這個範例結合了先前範例中的元素，以展示複雜的動畫。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 16. 結合特效來創造複雜的動作。

複雜動作 (3/3)

這個範例結合了先前範例中的元素，以展示複雜的動畫。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 17. 結合特效來創造複雜的動作。

片段轉場 (1/2)

這個範例說明如何使用 MotionLayout 在片段之間進行轉換。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 18. 片段轉場效果。

片段轉場 (2/2)

這個範例說明如何使用 MotionLayout 在片段之間進行轉換。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 19. 片段轉場效果。

類似 YouTube 的動作

這個範例說明如何在精簡檢視畫面和全螢幕體驗之間切換，並顯示其他內容。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 20. 類似 YouTube 的片段轉場效果。

KeyTrigger

本範例說明如何在轉場超過進度門檻時，顯示及隱藏浮動動作按鈕。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 21. 顯示及隱藏懸浮動作按鈕。

多州/省

本例說明如何使用狀態判斷要套用的動作。

• 查看 版面配置 XML。
• 查看 MotionScene XML。

圖 22. 根據狀態顯示不同的動作。