MotionLayout 範例

本文件提供 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 簡介 (第 III 部分)。

圖 9.正在展開「DrawerLayout」。

DrawerLayout (2/2)

這個範例說明如何在 DrawerLayout 中加入動態效果。

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

側邊面板

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

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

視差

這個範例說明不同背景圖層以不同速度移動的視差背景。

圖 12.標頭圖片中的視差效果。

ViewPager

以下範例說明在 ViewPager 分頁滑動時，如何新增動態效果。如要進一步瞭解這個範例，請參閱 MotionLayout 簡介 (第 III 部分)。

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

ViewPager - Lottie

以下範例說明在 ViewPager 分頁滑動時，如何新增動態效果。

圖 14.標題圖片中顯示 Lottie 效果的圖片，同時滑動「ViewPager」。

複雜運動 (1/3)

這個範例結合前述範例中的元素來示範複雜的動作。

圖 15.結合特效創造複雜的動態效果。

複雜運動 (2/3)

這個範例結合前述範例中的元素來示範複雜的動作。

圖 16.結合特效創造複雜的動態效果。

複雜運動 (3/3)

這個範例結合前述範例中的元素來示範複雜的動作。

圖 17.結合特效創造複雜的動態效果。

片段轉換 (1/2)

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

圖 18.片段轉換。

片段轉換 (2/2)

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

圖 19.片段轉換。

類似 YouTube 的動作

這個範例說明如何轉換精簡檢視畫面與全螢幕體驗，並搭配額外內容。

圖 20.片段轉換方式與 YouTube 類似。

金鑰觸發條件

這個範例說明如何在轉場效果超過進度門檻時顯示或隱藏懸浮動作按鈕。

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

多州

這個範例說明如何使用狀態來決定要套用的動作。

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