Multi-état

Le composant Multi-État permet de gérer des animations sur des objets individuels ou des ensembles d’objets.

Il est idéal pour créer des effets interactifs tels que des boutons avec différents états (normal, survol, cliqué), des effets d’apparition ou de transformation d’éléments visuels. Pour des animations plus globales qui affectent l’ensemble de l’écran, il est préférable d’utiliser les états d’écran ou les avant-plans.

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.

Cas d’utilisation

• Boutons interactifs : créez des boutons avec des états visuels différents (normal, survolé, cliqué).
• Effets d’apparition/disparition : animez des objets pour les faire apparaître ou disparaître en douceur.
• Transitions d’éléments : gérez des changements de forme, de taille ou de couleur d’un objet.
• Variations locales dans une interface : une carte qui se retourne, un panneau qui bascule entre « vide » et « rempli », une section qui passe de « aperçu » à « détails » sans toucher au reste de l’écran.

Mise en place du composant

Insertion du composant

• Cliquez sur Composants et choisissez le Multi-état.
• Placez le composant à l’endroit de votre choix.
• 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.

Vous pouvez également utiliser l’option Convertir en Multi-État disponible via le menu de l’application (Mise en page > Convertir en Multi-état) pour transformer un groupe d’éléments existants en un composant Multi-État.

Ajout de nouveaux états

Pour ajouter un nouvel état :

• Vous devez être à l’intérieur de ce composant
• Rendez-vous dans la zone d’édition du composant, à gauche de l’écran.
• Cliquez sur le bouton + pour ajouter un nouvel état lié et sur la flèche déroulante, pour choisir entre un nouvel état lié ou indépendant.

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

Caractéristiques du composant

É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é.

Événements déclencheurs

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.

Actions interactives

Pour agir sur 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

Bonnes pratiques

Nous vous recommandons de bien renommer chaque état.

Gardez les comportements indépendants sur des Multi-états distincts

Un Multi-état affiche toujours un seul état courant, et cet état est l’instantané complet d’un moment : passer à un état applique d’un coup tout ce qui y est enregistré. C’est ce qui permet d’animer plusieurs propriétés à la fois, mais cela signifie aussi qu’un même Multi-état ne peut représenter qu’une seule chose à la fois.

Lorsqu’un même élément doit refléter deux comportements qui évoluent indépendamment, un seul Multi-état ne suffit pas. Prenez une barre d’onglets : chaque onglet a un aspect actif ou inactif qui change à chaque navigation, et un onglet peut aussi afficher une pastille de notification qui dépend de vos données. Si un seul Multi-état gère les deux, changer d’onglet remet chaque onglet sur son aspect inactif et la pastille disparaît avec lui, car le composant ne peut afficher qu’un seul état à la fois et l’état inactif ne porte pas la pastille.

Donnez à chaque comportement son propre Multi-état, afin que chacun conserve son état courant :

• un Multi-état pour l’aspect actif ou inactif, piloté par la navigation ;
• un Multi-état distinct pour la pastille, piloté par vos données (par exemple avec un composant Condition ou un binding).

Changer d’onglet ne touche jamais à la pastille, et mettre à jour la pastille ne change jamais l’aspect actif.

Lorsque le second élément se pose sur le premier, comme la pastille placée sur l’onglet, imbriquez son Multi-état dans l’onglet. Quand le parent change d’état, il ré-applique la position, la taille et l’apparence aux objets qu’il partage entre ses états, mais il ne réinitialise pas un Multi-état imbriqué : la pastille conserve son propre état pendant que l’onglet se déplace ou change d’apparence autour d’elle. Pour cela, gardez la pastille comme le même objet partagé entre les états du parent (utilisez des états liés) plutôt qu’une copie distincte dans chaque état.

Exemples pratiques

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.

Drop-down

Pop-over