Le composant Multi-état

Le composant Multi-état permet de créer une animation sur un objet ou une partie de l'écran à l'aide de transitions.

Le composant Multi-état est un composant très flexible. Il vous permet de créer plusieurs états d'un objet ou d'un ensemble d'objets. C'est grâce à ce composant que vous pouvez créer vos éléments UI tels que les boutons (avec effet d'animation), toggle boutons, drop-down... et de nombreuses animations.

Dans l'exemple ci-dessus, le composant Multi-état comprend 2 états :

un premier état dans lequel le contenu de la bulle est présente, mais non visible (opacité à 0%),
et un deuxième état lié au premier dans lequel ce contenu devient visible (opacité à 100%). C'est au clic sur le bouton que le multi-état passe d'un état à un autre.

💡 Il est indispensable de maîtriser les transitions et les états liés pour créer des animations grâce au composant Multi-état. Nous vous invitons à consulter cet article au préalable : Transitions.

Insérer un composant Multi-état

Cliquez sur Composants et choisissez le Multi-état.

Double-cliquez sur la zone du composant pour éditer le contenu : un premier état est automatiquement créé. Vous pouvez insérer tout type de contenu à l'intérieur : images, formes, texte et même des composants.

Ajouter de nouveaux états

Pour créer des effets d'apparition et de transition, il est nécessaire de créer de nouveaux états. Si vous souhaitez une transition entre ces états, ceux-ci doivent être liés.

Vous pouvez créer un nombre illimité d'états et naviguer entre vos états depuis la fenêtre de gauche.

Définir un état par défaut

Dans les propriétés, vous pouvez sélectionner un état par défaut, c'est-à-dire l’état qui sera automatiquement affiché au chargement du composant. Si vous ne définissez rien et que l'utilisateur retourne sur cet écran, le composant se trouvera sur le dernier état affiché.

Changer l'état du composant Multi-état

Comme n'importe quel composant, il est possible d'utiliser le composant Multi-état comme déclencheur ou d'ajouter des actions sur ce composant.

Pour changer l'état de ce composant, sélectionnez un déclencheur (par exemple un bouton) et sélectionnez l'action Agir sur un composant. Sélectionnez le composant Multi-état et vous avez le choix parmi les actions suivantes :

Sélectionner un état : sélectionnez un état dans la liste
État suivant : vous avez la possibilité de définir un intervalle et d'activer le Mode boucle
État précédent : vous avez la possibilité de définir un intervalle et d'activer le Mode boucle
État aléatoire

Pour déclencher une action depuis le composant Multi-état, sélectionnez ce composant et ouvrez la fenêtre Actions. En plus des déclencheurs standards (Tape clic, Survol entrant, Touche....), vous pouvez déclencher une action à l'affichage de chaque état. C'est ainsi que vous pouvez changer automatiquement l'état sans action de l'utilisateur.

Exemples d'utilisations du composant Multi-état

Bouton hover

Créez deux états liés et créez une action de changement d'état au survol entrant et une autre au survol sortant

Toggle

Créez deux états liés et créez une action de changement d'état au clic.