L'easing en animation : ease in, ease out et les courbes
L'easing est la manière dont une valeur animée accélère et ralentit entre les keyframes, au lieu de se déplacer à une vitesse constante. Un easing permet à un mouvement de démarrer en douceur, de s'arrêter en douceur, ou les deux — comme le font réellement les objets ayant une masse — et il est défini par la courbe d'interpolation entre deux clés.
La réponse courte
L'easing contrôle l'accélération entre les keyframes. Un mouvement linéaire se déplace à vitesse constante et s'arrête brusquement ; un mouvement avec easing accélère à partir d'une clé et décélère vers la suivante. Comme les outils ne s'accordent pas sur la signification de « ease in », il est plus clair de parler de démarrage lent (accélération) ou de fin lente (décélération). Les poignées de Bézier sur chaque clé façonnent précisément l'easing, et une poignée tirée au-delà de la valeur de la clé crée un overshoot.
Pourquoi la vitesse constante semble fausse
Les objets réels ont une masse. Une voiture n'atteint pas sa vitesse de croisière instantanément, et une porte ne s'arrête pas net sur son cadre. Un mouvement qui démarre et s'arrête à pleine vitesse semble mécanique, sans poids ou généré par ordinateur, même si le public ne peut pas dire pourquoi.
Les animateurs de Disney ont nommé ce principe « slow in » et « slow out » — l'un des douze principes d'animation énoncés dans The Illusion of Life. Plus de dessins près du début et de la fin d'un mouvement et moins au milieu le font accélérer et décélérer. Dans les logiciels 3D, le même effet provient de la courbe entre les clés plutôt que de dessins supplémentaires.
Ease in et ease out ont des significations opposées
C'est la source de confusion la plus courante, et ce n'est pas de votre faute. En CSS et dans les fonctions d'easing de Robert Penner, largement copiées, « ease-in » signifie que le mouvement démarre lentement et accélère, et « ease-out » signifie qu'il démarre rapidement et ralentit jusqu'à l'arrêt. La courbe appartient à l'ensemble du mouvement entre deux clés.
Dans After Effects et de nombreux outils basés sur les clés, l'easing appartient plutôt à une clé : « easing into » une clé signifie ralentir à l'approche du mouvement, et « easing out of » une clé signifie démarrer lentement lorsque le mouvement la quitte. Ainsi, un « ease in » d'After Effects sur la dernière clé et un « ease-out » CSS sur le mouvement produisent la même décélération sous des noms opposés. Décrire le mouvement — démarrage lent, fin lente, lent aux deux extrémités — évite l'ambiguïté.
Types d'interpolation et poignées de Bézier
L'interpolation linéaire trace une ligne droite entre les clés : vitesse constante et changement brusque à chaque clé. L'interpolation constante, stepped ou hold maintient la valeur jusqu'à la clé suivante puis saute, ce qui est utile pour le blocking, les clignements et tout ce qui doit être instantané. L'interpolation de Bézier ou spline trace une courbe lisse à travers les clés, et c'est là que l'easing prend tout son sens.
Une clé de Bézier possède deux poignées, l'une contrôlant la courbe arrivant à la clé et l'autre la contrôlant en la quittant. Une poignée plate signifie une vitesse nulle à la clé — un easing. Une poignée plus longue maintient cette lenteur sur une plus grande partie du mouvement. Des poignées alignées traversent la clé en douceur ; des poignées séparées créent un changement de direction brusque, comme un rebond. Tirez une poignée pour que la courbe dépasse la valeur de la clé et que le mouvement dépasse sa cible avant de revenir.
Les familles d'easing standard
Les équations d'easing de Penner, publiées au début des années 2000, sont devenues le vocabulaire commun pour les courbes nommées : sine, quad, cubic, quart, quint, expo et circ, chacune sous une forme in, out et in-out, allant du subtil (sine) au violent (expo). Back dépasse sa cible avant de se stabiliser. La plupart des outils d'animation et des bibliothèques CSS proposent une version de cet ensemble, généralement approximée par des courbes de Bézier cubiques.
Elastic et bounce sont les exceptions. Elles oscillent plusieurs fois au cours d'un même mouvement, ce qu'une seule courbe de Bézier cubique ne peut pas faire, de sorte que les outils les construisent à partir de plusieurs clés ou les génèrent de manière procédurale.
Quel easing utiliser
Appliquez un easing aux deux extrémités pour la plupart des mouvements qui démarrent et s'arrêtent : un travelling de caméra, un objet qui glisse en place, un mouvement de tête. Utilisez une fin lente pour les éléments qui arrivent et se stabilisent, et un démarrage lent pour les éléments qui se lancent. Gardez linéaire pour les mouvements qui doivent être constants — un ventilateur qui tourne, un convoyeur, le milieu d'un cycle en boucle — et pour les clés que le mouvement doit traverser directement. Utilisez hold pour les claquements, les clignements et le blocking.
L'easing dans Mixos Studio
Sélectionnez une clé et l'en-tête de la timeline propose Linéaire, Ease in, Ease out, Ease et Hold. Ils suivent la convention basée sur les clés : Ease in ralentit le mouvement arrivant à la clé, Ease out le ralentit en le quittant, et Ease fait les deux — l'Easy Ease d'After Effects. Lorsque la timeline est sélectionnée, F9 applique Ease, ⇧F9 Ease in et ⌘⇧F9 Ease out.
Courbe… ouvre les familles de Penner de Sine à Back, recherchables par sensation et par nom, ainsi que toutes les courbes que vous avez enregistrées. Le mode Courbes dessine les pistes comme des courbes avec des poignées de Bézier que vous faites glisser directement, overshoot inclus. Elastic et bounce ne sont délibérément pas dans la liste des courbes ; les générateurs de ressort et de rebond sous + Mouvement produisent ce type de mouvement à la place.
Questions fréquemment posées
Que signifient ease in et ease out ?
Les deux décrivent des changements de vitesse progressifs, mais les outils les utilisent dans des sens opposés. En CSS et dans les fonctions de Penner, ease-in est un démarrage lent et ease-out une fin lente. Dans After Effects et d'autres outils basés sur des clés, un easing vers une clé ralentit le mouvement à son arrivée, et un easing depuis une clé le ralentit à son départ.
Quelle est la différence entre l'interpolation linéaire et l'interpolation de Bézier ?
L'interpolation linéaire déplace une valeur à vitesse constante et change brusquement à chaque clé. L'interpolation de Bézier dessine une courbe lisse à travers les clés, avec des poignées qui contrôlent l'accélération et la décélération du mouvement, ce qui rend l'easing possible.
Qu'est-ce qu'une clé de maintien ?
Une clé avec interpolation constante (stepped) : la valeur reste exactement là où elle est jusqu'à la clé suivante, puis saute. Elle est utilisée pour le blocking, les clignements, les coupes et tout ce qui doit être instantané plutôt que progressif.
Comment faire un overshoot en animation ?
Soit ajouter une clé au-delà de la cible et une clé de stabilisation après, soit tirer la poignée de Bézier pour que la courbe dépasse la valeur de la clé et revienne. Une courbe d'interpolation de type « back » fait la même chose qu'un préréglage.
Pourquoi mon animation semble-t-elle robotique ?
Généralement parce qu'elle est linéaire : vitesse constante, avec des démarrages et des arrêts brusques à chaque clé. Appliquer un easing aux démarrages et aux arrêts, et décaler des parties du mouvement de quelques frames pour qu'elles ne bougent pas toutes en même temps, résout la plupart des problèmes.
Animez un mouvement, puis essayez Linéaire, Ease et Back sur les mêmes deux clés — la différence est plus facile à voir qu'à décrire.