# Animations

> Explorez les animations dans PandaSuite Studio, découvrez les courbes d'accélération et les animations spring pour enrichir votre expérience utilisateur grâce à des propriétés physiques.

https://docs.pandasuite.com/fr/essentials/interactions/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.

[Image : Construction d'une courbe de Bézier cubique à t = 0 : quatre points de contrôle, de P0 à P3, reliés par des segments]

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.

[Image : Grille de 25 courbes d'easing, de Linear à Ease in-out Back, avec les variantes Sine, Quad, Cubic, Quart, Quint, Expo et Circ]

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](https://medium.com/kaliberinteractive/how-i-transitioned-from-ease-to-spring-animations-5a09eeca0325), 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.

[Vidéo : un poids suspendu à un ressort rebondit puis se stabilise, à côté des réglages masse, tension et friction]

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éées à 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

[Image : Action Next state avec un délai, une durée et une animation Easing au préréglage Ease In Out ; Spring est l'autre type]