Animations

Les animations sont une des richesses des applications. Elles transforment la navigation de l'utilisateur en une expérience plaisante et différenciante. Il existe plusieurs types d'animations : les courbes d'accélérations (easing) ou les animations spring qui incorporent des propriétés physiques.

Découvrez le fonctionnement de ces animations et comment les paramétrer dans PandaSuite Studio.

Les courbes d'accélération (ou easing)

Pour illustrer les courbes d'accélération, on utilise souvent l'exemple d'une voiture. Pour se rendre d'un point A à un point B, la voiture n'a pas une vitesse constante : elle met un peu de temps à démarrer puis atteint sa pleine vitesse avant de décélérer et de s'arrêter. C'est ce qu'on appelle l'ease in et l'ease out. 

Pour représenter ces courbes d'accélération, on utilise la courbe de Béziers qui est définie par 4 points. 

Représentation de la courbe de Béziers

Dans PandaSuite, vous avez accès aux principales fonctions d'easing et vous avez la possibilité d'éditer manuellement les paramètres de la courbe de Bézier pour ajuster ces effets.

Principales fonctions d'easing

Les animations spring

Les animations spring sont plus réalistes car elles intègrent des propriétés physiques, telles que la tension, la masse, le frottement et la vitesse. 

Si l'on reprend l'exemple du très bon article de Kaliber Interactive, imaginons un ressort suspendu à un plafond avec un plomb au bout. Si le ressort est au repos, il est à son point de repos (ou à l'équilibre). Tirez le balancier vers le bas.

React-spring visualizer (Kaliber Interactive)

L'animation spring est définie en fonction d'une valeur d'amortissement. Cette valeur est comprise entre 0 et 1. Plus ce chiffre sera proche de 1, plus l'animation sera stable. 

Créer une animation 

Les animations sont créés à l'aide des états. Ces états se retrouvent dans les écrans, les avant/arrière-plans, les composants Multi-états & Pop-up. 

Pour créer une animation, créez au préalable 2 états puis rendez-vous dans la fenêtre des Actions. 

Choisissez le déclencheur de votre choix et l'action Aller à l'état ou Agir sur un composant > Aller à l'état.

Choisissez un délai, une durée et le type d'animation : Easing ou Spring.

• Pour les animations Easing, vous avez le choix entre plusieurs types et vous pouvez personnaliser la courbe de Béziers. 
• Pour les animations Spring, vous pouvez paramétrer la valeur d'amortissement : 
  • Pas de rebond : 1
  • Peu de rebond : 0,75
  • Rebond moyen : 0,5
  • Grand rebond 0,2