Comprendre les états
Les états sont l'un des fondamentaux de PandaSuite. Ils vous permettent de mieux contrôler et d'animer vos écrans. Vous pouvez créer des états dans vos écrans, vos avant-plans/arrière-plans et de manière plus localisée avec le composant Multi-état. On passe d'un état à un autre en utilisant des interactions ou des transitions.
Les états chez PandaSuite sont un concept central qui permet de gérer la variabilité de l'apparence et du contenu des composants dans une application interactive. Un état est essentiellement une configuration spécifique d'un composant ou d'un ensemble d'objets. Le passage d'un état à un autre permet de changer ce que l'utilisateur voit ou peut faire sur l'écran, sans avoir à créer de nouvelles pages ou écrans.
Les états sont utiles dès que vous souhaitez apporter des changements à un écran ou à une partie de votre écran.
Créer un état lié
Quand vous créez un nouvel état lié, une copie de cet état est ajoutée et les deux états sont automatiquement liés. Un symbole de lien apparaît sous le nom et indique l'état de référence.
Vous pouvez également créer un état vierge, un état vierge totalement indépendant.
Le principe est le même au sein d'un composant Multi-état.
Caractéristique de l'état lié
Quand vous créez un état lié sur un autre état, l’état initial devient le parent de l'état lié. Tous les objets sont alors liés entre ces deux états. Par défaut toute modification sur l'état A est automatiquement appliquée à l'état B. Pour créer une transition, il vous faut apporter une modification sur l'état B. Concrètement entre ces deux états, trois liens sont créés pour chaque objet :
- Taille & Position
- Propriétés
- Actions
Si vous changez la taille ou la position d'un objet entre ces états, une transition s'applique et cet objet s'anime.
Vous pouvez identifier ces liens et les rétablir depuis la fenêtre des Objets :
Attention : si vous importez un nouvel objet sur l'état lié ou que vous faites une action de copier/coller, les liens sont rompus et l'objet devient totalement indépendant. Aucune transition ne sera possible sur cet objet.
Vous pouvez créer des transitions à partir de tout type d'objets graphiques (images, texte, composants). Seul le grossissement du texte n'est pas pris en compte.
Changer d'état
Pour changer d'état d'écran, il faut créer une action.
Pour un changement d'état automatique, sélectionnez l'état initial et cliquez sur Actions : Affichage de l'état > Changer d'état.
Si celui-ci est lié à une action utilisateur (par exemple un clic sur le bouton), sélectionnez le bouton et cliquez sur Actions : Tape / Clique > Changer d'état.
Vous pouvez attribuer un délai, une durée et une animation (courbe d'accélération, spring) à votre transition. Pour en savoir plus : Animations
Si vous utilisez le composant Multi-état, choisissez l'action : Agir sur un composant > Multi-état > Changer d'état.
Etat par défaut
L'état 1 s'affiche au premier chargement de votre écran. Lorsque l'utilisateur revient sur cet écran, il retourne sur le dernier état affiché.
Pour définir un état par défaut, cliquez sur l'icône punaise ou rendez-vous dans la fenêtre Propriétés.
Supprimer un état
Pour supprimer un état, cliquez sur la poubelle. Attention aux liens entre parent et enfant pour ne pas supprimer une transition.