Exemples de MotionLayout

Ce document contient des exemples d'utilisation de MotionLayout. Chaque exemple comprend une vidéo illustrant le mouvement, ainsi que le code correspondant à la scène de mouvement et aux 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 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 : Vous pouvez faire glisser une vue pendant que sa couleur d'arrière-plan change.

ImageFilterView – Transition d'image

Cet exemple montre comment effectuer la transition de la valeur de saturation d'un élément ImageFilterView.

Figure 3 : Vous pouvez faire glisser 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 : Déplacement d'une vue et modification de sa position Y

Interpolation d'image clé

Cet exemple s'appuie sur l'exemple Position de l'image clé et ajoute une rotation et une mise à l'échelle à la transition de vue.

Figure 5 : Déplacement d'une vue et modification de sa position Y, de sa rotation et de son échelle

Cycle d'images clés

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

Figure 6 : Déplacement d'une vue en ondulation 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 Présentation de 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 : Le contenu défile pendant que la barre d'application se développe et le texte s'anime à l'intérieur et à l'extérieur de la barre d'application.

DrawerLayout (1/2)

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

Figure 9 : Développement de "DrawerLayout".

DrawerLayout (2/2)

Cet exemple montre comment ajouter du mouvement à une DrawerLayout.

Figure 10 : "DrawerLayout" a été développé 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 parallaxe, dans lequel différentes couches d'arrière-plan se déplacent à des vitesses différentes.

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

ViewPager

Cet exemple montre comment ajouter du mouvement lorsque vous faites glisser votre doigt sur l'écran pour passer d'un onglet à l'autre dans ViewPager. Cet exemple est décrit plus en détail dans la section Présentation de MotionLayout (partie III).

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

ViewPager – Lottie

Cet exemple montre comment ajouter du mouvement lorsque vous faites glisser votre doigt sur l'écran pour passer d'un onglet à l'autre dans 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 : Combiner des 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 : Combiner des 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 : 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

Animation similaire à YouTube

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

Figure 20 : La transition des fragments est semblable à celle de YouTube.

Déclencheur de touche

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

Multi-états

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

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