Réalisez des animations sur vos objets ou vos écrans en créant une transition entre deux états. Vous pouvez contrôler la durée, la délai, l'opacité, le déplacement et la taille de vos éléments.

Le principe des états

Les états font partie des fondamentaux de PandaSuite. Ils vous permettent d'animer vos objets et vos écrans à l'aide de transitions.

Ils sont partout : il y a des états dans les écrans, les avant-plans et arrière-plans et dans certains composants : la Pop-Up et le Multi-état. Ils s’utilisent de la même façon et conservent les mêmes caractéristiques.

Qu'est-ce qu'un état ?

Un état est une scène particulière, une sorte de photographie à un instant "t" d'un ou de plusieurs objets. Quand vous créez un état lié et que vous changez la disposition de vos objets, une transition s'applique et vos objets s'animent.

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.

Les différents types d'états

Il existe deux types d'états : les états vierges et les états liés. L'état vierge est un état totalement indépendant. L'état lié conserve toutes les caractéristiques de l’état de référence et un lien avec cet autre état : c'est lui qui vous permet de réaliser des animations.

Créer un état lié 

Sélectionnez l'état et cliquez sur le bouton orange : cre_er_un_e_tat_lie_.png

Un nouvel état se créé, sous son nom se trouve le nom de l'état d'origine.

cre_er_un_e_tat_lie_.gif

Vous pouvez le déplacer dans la liste où vous voulez.

Créer une transition

Pour créer l'animation entre vos deux états, il ne vous reste plus qu'à créer une action interactive.

Choisissez un déclencheur et choisissez l'action Aller à l'état sélectionné ou Agir sur composant > Pop-up/Multi-étatAller à l'état sélectionné  si votre état est dans un composant. Votre transition est créée automatiquement.

Vous pouvez attribuer un délai et une durée à votre transition.

Les liens entre états

Quand vous créez un état B basé sur un état A, l’état A devient le parent de l'état B. 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. Il existe trois liens qui agissent sur les objets :

  • Taille & Position
  • Propriétés
  • Interactivités

liens_e_tat_lie_.png

Rétablissez à tout moment les caractéristiques originales depuis la fenêtre Objets en cliquant sur l'icône du lien.

liens_entre_e_tat.png

Attention : si vous importez un nouvel objet ou que vous coupez l'objet, les liens sont rompus et l'objet devient totalement indépendant. Aucune transition ne sera possible sur cet objet.

Mettre un état par défaut

Par défaut, l'état 1 s'affiche au lancement de votre écran.

Pour choisir un autre état par défaut, cliquez sur l'icône punaise dans la fenêtre Écrans 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 animation.

Les types de transition

Fade / Effet d'apparition

Créez un effet de fade in / out en modifiant l'opacité de vos objets. L'opacité se trouve dans la barre d'outils. Dans le premier état, choisissez une opacité de 0% pour votre objet et rétablissez la à 100% sur l'état lié.

opacite_.pngParamétrez l'opacité depuis la barre d'outils

 

fade_in.gifEffet d'apparition d'un écran d'accueil

 

Slide / Effet de déplacement

Créez des effets de déplacement de vos objets. Vous pouvez placer des objets hors champ. Choisissez la trajectoire de déplacement. Vous pouvez le combiner avec l'opacité pour accentuer l'effet d'apparition de vos objets.

 

Positionnez_les_objets_hors_champ.pngPositionnez vos objets hors champ

 

slide_effect.gifEffet de déplacement sur une écran d'accueil


Zoom

Les états vous permettent également de facilement réaliser un effet de zoom. Pour cela, il suffit d'agrandir l'objet dans l'état lié. C'est parfait pour vos projets de carte interactive. 

Si vous souhaitez créer plusieurs zones de zoom, créez un état lié par zone depuis votre état initial et placez une zone interactive au-dessus de chaque zone qui redirige vers le bon état.

agrandir_la_carte.pngAgrandissez la carte sur l'état lié

 

zoom_effect.gif

Effet de zoom sur la carte


Crop / Effet de masque

Vous pouvez également utiliser les états pour animer vos masques (sur vos images et vos groupes). C'est ce qui a permis de réaliser ce joli effet éventail sur l'application Louvrissime

redimensionner_masque.pngRedimensionnez la largeur du masque sur les états liés


effet_crop.gif
Effet menu éventail à l'aide du masque

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 16 sur 19

Créez des apps et expériences interactives sans ligne de code

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

S'inscrire (gratuit)