MotionLayout 範例

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

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

基本動態

這個範例包含單一檢視區塊，您可以觸控並拖曳該檢視區塊，在水平方向移動。

圖 1. 拖曳檢視畫面。

自訂屬性 - backgroundColor

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

圖 2. 拖曳檢視區塊，同時變更背景顏色。

ImageFilterView - 圖片轉換

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

圖 3. 拖曳圖片時，圖片的飽和度會隨之變化。

主要畫面格位置

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

圖 4. 拖曳檢視區塊並變更其 Y 座標。

主要畫面格插值

這個範例以「主要畫面格位置」範例為基礎，在檢視區塊轉場效果中新增旋轉和縮放功能。

圖 5. 拖曳檢視區塊，並變更其 Y 座標、旋轉角度和比例。

主要畫面格週期

這個範例會新增 <KeyCycle> 元素，為檢視區塊新增波浪狀動作。

圖 6. 以波浪狀動作拖曳檢視區塊，同時變更顏色。

CoordinatorLayout (1/2)

這個範例會將 MotionLayout 新增至現有的 AppBarLayout，為應用程式列新增動態效果。如需這個範例的詳細說明，請參閱「MotionLayout 簡介 (第 III 部分)」。

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

CoordinatorLayout (2/2)

這個範例會將 MotionLayout 新增至現有的 AppBarLayout，為應用程式列新增動態效果。

圖 8. 捲動內容時，應用程式列會展開，文字則會以動畫效果移入和移出應用程式列。

DrawerLayout (1/2)

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

圖 9. 展開 `DrawerLayout`。

DrawerLayout (2/2)

這個範例說明如何為 DrawerLayout 新增動態效果。

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

側邊面板

本例示範如何將主要內容區域向右拖曳時顯示側邊面板。

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

視差

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

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

ViewPager

這個範例說明如何在 ViewPager 分頁之間滑動時新增動作。如需這個範例的詳細說明，請參閱「MotionLayout 簡介 (第 III 部分)」。

圖 13. 在滑動 `ViewPager` 時，標頭圖片會產生視差效果。

ViewPager - Lottie

這個範例說明如何在 ViewPager 分頁之間滑動時新增動態效果。

圖 14. 圖片：在滑動 `ViewPager` 時，標題圖片會顯示 Lottie 效果。

複雜動作 (1/3)

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

圖 15. 結合多種效果，創造複雜的動作。

複雜動作 (2/3)

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

圖 16. 結合效果，創造複雜的動作。

複雜動作 (3/3)

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

圖 17. 結合效果，創造複雜的動作。

Fragment 轉場 (1/2)

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

圖 18. 片段轉場。

Fragment 轉場 (2/2)

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

圖 19. 片段轉場。

類似 YouTube 的動態效果

這個範例示範如何在精簡檢視畫面和全螢幕體驗之間轉換，並顯示額外內容。

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

KeyTrigger

這個範例示範如何顯示及隱藏懸浮動作按鈕，方法是在轉場效果跨越進度門檻時執行這項操作。

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

多個州/省

本例示範如何使用狀態判斷要套用哪種動作。

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