このトピックでは、MotionLayout の使用方法の例を紹介します。各例には、モーションのアニメーション GIF のほか、モーションのシーンとレイアウトに対応するコードを掲載しています。
基本的なモーション
この例は、タップして水平方向にドラッグできる単一のビューを示します。
カスタム属性 - backgroundColor
この例は基本的なモーションと似ています。基本的なモーションに加え、ビューの移動に伴ってビューの背景色を変更します。
ImageFilterView - 画像の遷移
この例は、ImageFilterView の彩度の値の遷移方法を示します。
キーフレームの位置
この例は、<KeyFrameSet> を使用して、移動するビューの Y 位置を変更します。
キーフレームの補間
この例は、キーフレームの位置の例で示されているビューの遷移に、回転とサイズ変更を加えます。
キーフレームの循環
この例は、<KeyCycle> 要素を追加して、波のようなモーションをビューに追加します。
CoordinatorLayout（1/2）
この例は、MotionLayout を既存の AppBarLayout に追加して、アプリバーにモーションを追加します。この例については、MotionLayout の概要（パート III）に詳しい説明があります。
CoordinatorLayout（2/2）
この例は、MotionLayout を既存の AppBarLayout に追加して、アプリバーにモーションを追加します。
DrawerLayout（1/2）
この例は、DrawerLayout にモーションを追加する方法を示します。この例については、MotionLayout の概要（パート III）に詳しい説明があります。
DrawerLayout（2/2）
この例は、DrawerLayout にモーションを追加する方法を示します。
サイドパネル
この例は、メイン コンテンツ領域を右にドラッグしたときにサイドパネルを表示する方法を示します。
パララックス
この例は、複数の背景レイヤが異なる速度で移動するパララックスの背景を示します。
ViewPager
この例は、ViewPager タブの切り替え時にモーションを追加する方法を示します。この例については、MotionLayout の概要（パート III）に詳しい説明があります。
ViewPager - Lottie
この例は、ViewPager タブの切り替え時にモーションを追加する方法を示します。
複雑なモーション（1/3）
この例は、これまでの例の要素を組み合わせた複雑なモーションを示します。
複雑なモーション（2/3）
この例は、これまでの例の要素を組み合わせた複雑なモーションを示します。
複雑なモーション（3/3）
この例は、これまでの例の要素を組み合わせた複雑なモーションを示します。
フラグメントの遷移（1/2）
この例は、MotionLayout を使ったフラグメント間の遷移方法を示します。
フラグメントの遷移（2/2）
この例は、MotionLayout を使ったフラグメント間の遷移方法を示します。
YouTube のようなモーション
この例は、追加のコンテンツを含む、コンパクトなビューと全画面表示の間の遷移を示します。
KeyTrigger
この例は、遷移が進行状況のしきい値を上回ったときと下回ったときにフローティング操作ボタンの表示と非表示を切り替える方法を示します。
複数状態
この例は、状態を使用して、適用するモーションを決定する方法を示します。