Exemples de MotionLayout

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

Ce document contient des exemples d'utilisation de MotionLayout. Chaque exemple comprend 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 à mesure qu'elle se déplace.

Figure 2. Faire glisser une vue alors que sa couleur d'arrière-plan change.

ImageFilterView : transition d'image

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

Figure 3. Déplacement d'une image pendant que sa saturation change.

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 des images clés

Cet exemple s'appuie sur l'exemple Position des images clés, en ajoutant une rotation et une mise à l'échelle à la transition de vue.

Figure 5. Faire glisser une vue et modifier sa position Y, sa rotation et son échelle

Cycle d'images clés

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

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

CoordinatorLayout (1/2)

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

Figure 7. Défilement du contenu pendant que la barre d'application se développe.

CoordinatorLayout (2/2)

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

Figure 8. Défilement du contenu pendant que la barre d'application se développe et que le texte s'anime dans et hors de la barre d'application.

DrawerLayout (1/2)

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

Figure 9. Développement de "DrawerLayout".

DrawerLayout (2/2)

Cet exemple montre comment ajouter du mouvement à un DrawerLayout.

Figure 10 Développement de "DrawerLayout" avec un 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, dans lequel différentes couches d'arrière-plan se déplacent à des vitesses différentes.

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

ViewPager

Cet exemple montre comment ajouter un mouvement lorsque vous balayez l'écran pour passer d'un onglet ViewPager à un autre. Cet exemple est décrit plus en détail dans la section Introduction à MotionLayout (partie III).

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

ViewPager – Lottie

Cet exemple montre comment ajouter un mouvement lorsque vous balayez l'écran pour passer d'un onglet ViewPager à un autre.

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 d'exemples précédents pour illustrer un mouvement complexe.

Figure 15 Combiner des effets pour créer un mouvement complexe

Mouvement complexe (2/3)

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

Figure 16 Combiner des effets pour créer un mouvement complexe

Mouvement complexe (3/3)

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

Figure 17 Combiner des 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 semblable à celui de YouTube

Cet exemple montre la transition entre une vue compacte et une expérience en plein écran avec du contenu supplémentaire.

Figure 20. Transition des fragments semblable à YouTube.

KeyTrigger

Cet exemple montre comment afficher et masquer un bouton d'action flottant lorsque la transition franchit 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.