MotionLayout の例

このドキュメントでは、MotionLayout の使用方法の例を紹介します。各サンプルには、モーションを示す動画と、モーション シーンとレイアウトに対応するコードが含まれています。

基本的なモーション

この例には、タップしてドラッグすることで水平方向に移動できる 1 つのビューが含まれています。

図 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.「ViewPager」をスワイプしたときのヘッダー画像内の Lottie 効果を示す画像。

複雑なモーション（1/3）

この例では、前の例の要素を組み合わせて、複雑な動きを示しています。

図 15.エフェクトを組み合わせて複雑なモーションを作成。

複雑なモーション（2/3）

この例では、前の例の要素を組み合わせて、複雑な動きを示しています。

図 16.エフェクトを組み合わせて複雑なモーションを作成。

複雑なモーション（3/3）

この例では、前の例の要素を組み合わせて、複雑な動きを示しています。

図 17.エフェクトを組み合わせて複雑なモーションを作成。

フラグメントの遷移（1/2）

この例は、MotionLayout を使用してフラグメント間を移行する方法を示しています。

図 18.フラグメントの遷移

フラグメントの遷移（2/2）

この例は、MotionLayout を使用してフラグメント間を移行する方法を示しています。

図 19.フラグメントの遷移

YouTube のようなモーション

この例は、コンパクト ビューと追加コンテンツによるフルスクリーン エクスペリエンスの切り替えを示しています。

図 20.フラグメントの移行は YouTube と同様です。

KeyTrigger

この例では、遷移が進行状況のしきい値を超えたときに、フローティング アクション ボタンの表示と非表示を切り替える方法を示しています。

図 21.フローティング アクション ボタンの表示と非表示を切り替えます。

複数状態

この例は、状態を使用して、適用するモーションを決定する方法を示します。

図 22.状態に応じたさまざまなモーション。