Transitions
Les transitions permettent de créer une animation douce entre les différents états d'un écran ou d'un objet. Personnalisez l'état initial et l'état final de votre animation, ajoutez un délai, une durée et choisissez un type d'animation (easing ou spring) pour obtenir le rendu idéal.
Dans cet article
Etats
L'état est un concept fondamental pour votre application. Il existe des états à plusieurs niveaux : dans les écrans, l'avant-plan et l'arrière-plan, et dans les composants Pop-up et Multi-état.
Par défaut, chaque écran et chaque objet ne comprennent qu'un seul état. Pour créer une transition entre ces états, vous devez créer un ou plusieurs états liés.
Type d'états
Il existe 2 types d'états :
- L'état simple est indépendant : il vous permet de créer différentes dispositions mais vous ne pouvez pas personnaliser la transition.
- L'état lié conserve toutes les caractéristiques de l'état initial. Tous les objets sont reliés entre ces deux états et toute modification apportée à l'état initial s'applique à l'état final. C'est ainsi que vous créez des transitions.
Caractéristiques des états liés
Lorsque vous créez un état lié, l’état initial devient le parent de l'état lié. Tous les objets sont reliés entre ces deux états et toute modification apportée à l'état initial s'applique alors à l'état lié. Par contre, toute modification sur l'état lié ne remonte pas à l'état initial.
Concrètement, il existe trois liens qui relient les objets :
- Taille & Position
- Propriétés
- Interactivités
Vous pouvez éditer et rétablir ces liens depuis la fenêtre Objets.
⚠️ Si vous importez un nouvel objet dans l'état lié ou que vous coupez/collez un objet entre deux états, les liens sont rompus et l'objet devient totalement indépendant. Aucune transition ne sera possible sur cet objet.
Transitions dans un écran
Voici un exemple de transition sur un écran d'accueil - cela donne du dynamisme et de la modernité dès le démarrage de l'application.
- Préparez l'état initial de votre écran : insérez les objets et préparez le design.
- Rendez-vous dans la fenêtre Ecrans et cliquez sur le bouton orange pour créer un état lié.
- Dans cet état lié, changez la disposition des éléments.
- Choisissez le déclencheur de cette transition dans la fenêtre Actions :
- Si la transition se déclenche automatiquement, sélectionnez l'état et le déclencheur Affichage de l'état.
- Si elle est liée à une action utilisateur, sélectionnez l'objet et son événement déclencheur.
- Choisissez l'action : Changer l'état de l'écran > Aller à l'état suivant. Vous pouvez ajouter un délai, une durée, un type d'animation, un intervalle et activer le mode Boucle.
Transitions d'objets
Si vous souhaitez animer seulement un ou plusieurs objets, vous pouvez utiliser le composant Multi-état. Il vous permet de personnaliser vos éléments UI et leurs transitions : boutons, checkbox, drop-down...
Voici un exemple de transition sur un bouton au hover :
- Insérez un composant Multi-état
- Préparez l'état initial de votre bouton (fond jaune)
- Cliquez sur le bouton orange pour créer un état lié.
- Dans cet état lié, changez la couleur du bouton (fond orange)
- Sélectionnez le composant et choisissez le déclencheur Survol entrant (hover in).
- Choisissez l'action : Agir sur un composant > Multi-état > Aller à l'état suivant. Vous pouvez ajouter un délai, une durée, un type d'animation, un intervalle et activer le mode Boucle.
Exemples de transition
Vous pouvez réaliser toutes sortes de transitions grâce à la maîtrise des états.
Apparition (Fade In-Out)
Pour réaliser un effet d'apparition, il faut modifier l'opacité de vos objets. Si vous souhaitez réaliser un fade-in, définissez l'opacité de votre objet à 0% sur l'état initial et à 100% sur l'état lié.
Déplacement (Slide)
Pour réaliser un effet de déplacement, il faut déplacer vos objets entre l'état initial et l'état lié. Vous pouvez également les placer hors champ et le combiner avec l'opacité pour accentuer l'effet d'apparition.
Zoom
Pour créer un effet de zoom (par exemple pour vos cartes interactives), il faut agrandir l'objet dans l'état lié.
💡 Si vous souhaitez créer plusieurs zones de zoom, il vous faut créer un état lié par zone. Ensuite, placez un composant Zone interactive et créez le lien vers le bon état.
Masque (crop)
Pour réaliser vos effets de masque et notamment le menu éventail, il faut modifier la taille du masque entre vos états.
