Easing
L’easing contrôle la manière dont une propriété animée évolue dans le temps. Il détermine si un mouvement garde une vitesse constante, accélère, ralentit ou combine ces comportements.
L’easing modifie le rythme d’une animation entre ses états clés. Deux objets peuvent partir ensemble, parcourir la même distance et arriver ensemble, tout en produisant des impressions différentes parce que leur vitesse évolue différemment.
Il ne concerne pas seulement la position : l’échelle, la rotation et l’opacité peuvent aussi utiliser l’easing. La documentation d’Adobe sur l’easing décrit son utilisation pour ajuster la vitesse de variation d’une animation.
Les principaux types d’easing
- Linéaire : des variations égales sur des durées égales. Utile pour un mouvement qui doit garder un rythme constant.
- Ease-in : un départ lent suivi d’une accélération. Il peut aider un élément à prendre de la vitesse en quittant le cadre.
- Ease-out : un départ plus rapide, puis un ralentissement. Il peut aider une carte ou une étiquette à arriver et à se stabiliser à l’endroit où elle doit être lue.
- Ease-in-out : départ lent, accélération, puis ralentissement. Utile lorsque le début et la fin du mouvement sont tous deux visibles.
Ces noms décrivent des familles de courbes. Des courbes portant le même nom peuvent sembler plus douces ou plus brusques. L’exemple emploie des courbes simples pour rendre la différence visible ; il ne compare pas les réglages par défaut de logiciels.
Comment choisir l’easing en motion design
- Définissez ce que le mouvement doit communiquer. L’objet entre-t-il, sort-il, se stabilise-t-il ou avance-t-il régulièrement ?
- Fixez les positions et la durée. Gardez-les identiques lors de la comparaison pour juger l’évolution de la vitesse.
- Regardez le mouvement entier. Un démarrage lent peut retarder une information importante ; un ralentissement final trop long peut alourdir une transition courte.
- Vérifiez les éléments voisins. Une carte sélectionnée peut se stabiliser tandis que les autres lui font de la place. Les mouvements doivent sembler coordonnés, même avec des courbes différentes.
Dans iArt, décrivez le comportement plutôt que de demander seulement une animation « fluide » : une entrée rapide suivie d’un arrêt progressif, ou un déplacement régulier sans accélération. Précisez la durée. Pour un exemple de cartes coordonnées, consultez comment créer une animation de carrousel 3D.
Easing, images clés, interpolation et ressorts
Les images clés définissent les états importants, comme les positions initiale et finale. L’interpolation produit les états intermédiaires ; l’easing règle la progression entre eux. Un ressort modélise une réponse avec des propriétés telles que la raideur et l’amortissement ; il peut dépasser la cible avant de se stabiliser. L’easing n’exige pas de rebond, et tous les mouvements n’en ont pas besoin.
À découvrir aussi : animation JavaScript, typographie cinétique. Pour le texte, consultez comment animer du texte.