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 の概要（パート 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. 状態に応じたさまざまなモーション。