Comprendre les états

Les états sont l’un des fondamentaux de PandaSuite. Ils vous permettent de créer des animations et des interactions en faisant varier l’apparence et le contenu de vos écrans sans créer de nouvelles pages.

Qu’est-ce qu’un état ?

Un état est une version spécifique de votre écran ou de votre composant. Imaginez un bouton qui change de couleur au survol, un menu qui s’ouvre et se ferme, ou un panneau d’information qui apparaît : chaque version représente un état différent.

Le passage d’un état à un autre crée une transition animée, ce qui permet d’enrichir l’expérience utilisateur sans multiplier les écrans.

Exemples d’utilisation des états

Les états sont utiles pour :

• Afficher ou masquer du contenu : un menu déroulant, une fenêtre d’information, des détails supplémentaires
• Créer des effets au survol : un bouton qui change de style quand on passe la souris dessus
• Animer des transitions visuelles : un logo qui se déplace, un élément qui apparaît en fondu
• Gérer différentes versions d’interface : basculer entre thèmes ou modes d’affichage
• Créer des séquences d’étapes : un tutoriel, un questionnaire, une présentation

Où trouver les états ?

Les états sont disponibles à plusieurs niveaux dans PandaSuite :

• États d’écran : pour créer des variations globales d’un écran complet
• Composant Multi-état : pour animer des objets ou groupes d’objets de manière localisée
• Avant-plans et arrière-plans : pour créer des variations sur ces éléments transversaux
• Composant Pop-up : pour créer des effets d’entrée et de sortie

Types d’états : lié ou vierge

Lorsque vous créez un nouvel état, vous avez le choix entre deux options :

État lié (recommandé pour les transitions)

Un état lié est une copie d’un état existant. Les deux états restent connectés par des liens automatiques. Un symbole de lien apparaît sous le nom pour indiquer la référence.

Pourquoi utiliser un état lié ?

• Pour créer des transitions animées entre deux versions d’un écran
• Les objets restent synchronisés : si vous modifiez un élément dans l’état parent, le changement s’applique automatiquement à l’état lié
• Vous ne changez que ce qui doit être différent, le reste reste identique

État vierge (pour des variations indépendantes)

Un état vierge est un nouvel état complètement indépendant, sans lien avec les autres états. Utilisez-le quand vous voulez créer une version totalement différente sans transition animée.

Comment fonctionnent les états liés ?

Quand vous créez un état lié, trois types de liens sont automatiquement établis pour chaque objet :

• Taille & Position : les dimensions et l’emplacement de l’objet
• Propriétés : la couleur, l’opacité, le masque, etc.
• Actions : les interactions définies sur l’objet

Principe de fonctionnement

Par défaut, tout est synchronisé : si vous modifiez un objet dans l’état parent, le changement s’applique automatiquement à l’état lié.

Pour créer une transition : modifiez une propriété de l’objet dans l’état lié (par exemple, changez sa position, sa taille ou son opacité). Lors du passage d’un état à l’autre, l’objet s’animera progressivement entre les deux versions.

Gérer les liens entre états

Vous pouvez visualiser et rétablir les liens depuis la fenêtre Objets :

Dans cette fenêtre, vous verrez des icônes de liens pour chaque objet. Si un lien est rompu, vous pouvez le rétablir manuellement.

Éléments qui peuvent être animés

Vous pouvez créer des transitions avec :

• Images : position, taille, opacité, rotation, masque
• Textes : position, taille, opacité, couleur (le grossissement proportionnel n’est pas pris en compte)
• Formes : position, taille, opacité, couleur, rotation
• Composants : position, taille, opacité, rotation

Déclencher un changement d’état

Il existe deux façons principales de passer d’un état à un autre :

Changement automatique

Pour qu’un état change automatiquement (par exemple, dès l’affichage de l’écran) :

1. Sélectionnez l’état de départ
2. Ouvrez le panneau Actions
3. Choisissez le déclencheur Affichage de l’état
4. Sélectionnez l’action Changer d’état et choisissez l’état de destination

Changement sur interaction utilisateur

Pour qu’un état change suite à une action de l’utilisateur (clic, survol, etc.) :

1. Sélectionnez l’objet qui déclenche l’action (bouton, zone interactive, etc.)
2. Ouvrez le panneau Actions
3. Choisissez le déclencheur approprié : Tape / Clique, Survol, Balayage, etc.
4. Sélectionnez l’action Changer d’état et choisissez l’état de destination

Personnaliser la transition

Lors de la configuration de l’action, vous pouvez personnaliser l’animation :

• Délai : temps d’attente avant le début de la transition
• Durée : temps d’exécution de l’animation
• Type d’animation : courbe d’accélération (linéaire, ease-in, ease-out, etc.) ou effet spring

Pour en savoir plus sur les options d’animation : Animations

Pour le composant Multi-état

Si vous utilisez le composant Multi-état, la procédure est légèrement différente :

1. Sélectionnez l’objet déclencheur
2. Choisissez l’action Agir sur un composant
3. Sélectionnez le composant Multi-état
4. Choisissez l’action souhaitée : Changer d’état, État suivant, État précédent, etc.

État par défaut

Par défaut, le premier état (État 1) s’affiche lors du premier chargement de l’écran.

Comportement lors de la navigation

Lorsque l’utilisateur quitte un écran puis y revient, l’écran s’affiche dans le dernier état consulté, pas nécessairement dans l’état 1. Ce comportement permet de maintenir le contexte de navigation.

Forcer un état au retour

Pour qu’un écran s’affiche toujours dans un état spécifique lors de chaque visite :

1. Sélectionnez l’état souhaité
2. Cliquez sur l’icône punaise 📌 dans le panneau des états
3. Ou définissez-le dans la fenêtre Propriétés

Une fois configuré, cet état s’affichera systématiquement, même si l’utilisateur était dans un autre état lors de sa dernière visite.

Supprimer un état

Pour supprimer un état, cliquez sur l’icône de la corbeille dans le panneau des états.