Exemples de MotionLayout

Essayer Compose
Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser des animations dans Compose.
Animations dans Compose →

Ce document contient des exemples d'utilisation de MotionLayout. Chaque exemple inclut une vidéo illustrant le mouvement, ainsi que le code correspondant pour la scène de mouvement et les mises en page.

Mouvement de base

Cet exemple contient une seule vue que vous pouvez toucher et faire glisser pour la déplacer horizontalement.

Figure 1. Faire glisser une vue

Attribut personnalisé : backgroundColor

Cet exemple est semblable à l'exemple de mouvement de base. En plus du mouvement de base, la couleur d'arrière-plan de la vue change lorsque la vue se déplace.

Figure 2. Faire glisser une vue tout en modifiant sa couleur d'arrière-plan

ImageFilterView : transition d'image

Cet exemple montre comment faire passer la valeur de saturation d'un ImageFilterView.

Figure 3. Faire glisser une image tout en modifiant sa saturation

Position de l'image clé

Cet exemple utilise <KeyFrameSet> pour modifier la position Y de la vue pendant le mouvement.

Figure 4. Faire glisser une vue et modifier sa position Y

Interpolation d'image clé

Cet exemple s'appuie sur l'exemple de position d'image clé, en ajoutant une rotation et une mise à l'échelle à la transition de la vue.

Figure 5. Faire glisser une vue et modifier sa position Y, sa rotation et sa mise à l'échelle

Cycle d'image clé

Cet exemple ajoute des éléments <KeyCycle> pour ajouter un mouvement ondulatoire à la vue.

Figure 6. Faire glisser une vue avec un mouvement ondulatoire tout en modifiant sa couleur.

CoordinatorLayout (1/2)

Cet exemple ajoute un MotionLayout à un AppBarLayout existant pour ajouter un mouvement à la barre d'application. Cet exemple est décrit plus en détail dans Introduction à MotionLayout (partie III).

Figure 7. Faire défiler le contenu pendant que la barre d'application se développe

CoordinatorLayout (2/2)

Cet exemple ajoute un MotionLayout à un AppBarLayout existant pour ajouter un mouvement à la barre d'application.

Figure 8. Faire défiler le contenu pendant que la barre d'application se développe et que le texte s'anime dans la barre d'application et en dehors

DrawerLayout (1/2)

Cet exemple montre comment ajouter un mouvement à un DrawerLayout. Cet exemple est décrit plus en détail dans Introduction à MotionLayout (partie III).

Figure 9. Développement de `DrawerLayout`.

DrawerLayout (2/2)

Cet exemple montre comment ajouter un mouvement à un DrawerLayout.

Figure 10. Développement de `DrawerLayout` avec du texte de menu animé

Panneau latéral

Cet exemple montre comment afficher un panneau latéral lorsque vous faites glisser la zone de contenu principale vers la droite.

Figure 11. Affichage d'un panneau latéral en faisant glisser le contenu principal

Parallaxe

Cet exemple illustre un arrière-plan en parallaxe, où différentes couches d'arrière-plan se déplacent à des vitesses différentes.

Figure 12. Effet de parallaxe dans l'image d'en-tête

ViewPager

Cet exemple montre comment ajouter un mouvement lorsque vous balayez entre les onglets ViewPager. Cet exemple est décrit plus en détail dans Introduction à MotionLayout (partie III).

Figure 13. Effet de parallaxe dans l'image d'en-tête lors du balayage d'un `ViewPager`.

ViewPager : Lottie

Cet exemple montre comment ajouter un mouvement lorsque vous balayez entre les onglets ViewPager.

Figure 14. Image montrant un effet Lottie dans l'image d'en-tête lors du balayage d'un `ViewPager`.

Mouvement complexe (1/3)

Cet exemple combine des éléments des exemples précédents pour illustrer un mouvement complexe.

Figure 15. Combinaison d'effets pour créer un mouvement complexe

Mouvement complexe (2/3)

Cet exemple combine des éléments des exemples précédents pour illustrer un mouvement complexe.

Figure 16. Combinaison d'effets pour créer un mouvement complexe

Mouvement complexe (3/3)

Cet exemple combine des éléments des exemples précédents pour illustrer un mouvement complexe.

Figure 17. Combinaison d'effets pour créer un mouvement complexe

Transition de fragment (1/2)

Cet exemple montre comment utiliser MotionLayout pour effectuer une transition entre des fragments.

Figure 18. Transition de fragment

Transition de fragment (2/2)

Cet exemple montre comment utiliser MotionLayout pour effectuer une transition entre des fragments.

Figure 19. Transition de fragment

Mouvement de type YouTube

Cet exemple montre comment passer d'une vue compacte à une expérience plein écran avec du contenu supplémentaire.

Figure 20. Transition de fragments semblable à YouTube.

KeyTrigger

Cet exemple montre comment afficher et masquer un bouton d'action flottant lorsque la transition dépasse un seuil de progression.

Figure 21. Afficher et masquer un bouton d'action flottant

Plusieurs États

Cet exemple montre comment utiliser l'état pour déterminer le mouvement à appliquer.

Figure 22. Différents mouvements en fonction de l'état