Métier
Courbes d’accélération (easing) : le réglage qui change tout
L’easing règle l’accélération d’un mouvement. Linéaire, ease-in, ease-out : ce que chaque courbe fait, quand l’utiliser et les erreurs à éviter.
Un objet réel ne démarre ni ne s’arrête d’un coup. Il accélère, puis ralentit. L’easing, ou courbe d’accélération, décrit cette variation de vitesse au fil du mouvement. C’est souvent le premier réglage qui sépare une animation fluide d’une animation raide.
Les trois familles de base
- Linéaire : vitesse constante. Mécanique, utile pour une rotation continue ou un défilement régulier, rarement ailleurs.
- Ease-in : départ lent, fin rapide. Convient à un élément qui sort de l’écran.
- Ease-out : départ rapide, fin lente. Convient à un élément qui entre : il arrive vif et se pose doucement.
- Ease-in-out : lent, rapide, lent. Pour un déplacement d’un point à un autre à l’écran.
Pourquoi l’entrée en ease-out ?
Un élément qui arrive doit capter l’œil tout de suite, puis laisser lire. Un départ rapide attire l’attention, une fin douce laisse le temps de lire. Un élément qui part, au contraire, doit s’effacer sans attirer l’œil : on commence lentement, on finit vite.
La durée compte autant que la courbe
Une bonne courbe avec une durée trop longue fait traîner. Trop courte, elle fait claquer. Pour un film vertical court, les mouvements d’interface sont brefs ; ceux de caméra, plus amples, demandent plus de temps.
Erreurs courantes
- Tout animer en linéaire.
- Utiliser la même courbe pour chaque mouvement sans se demander s’il entre ou s’il sort.
- Mettre une durée identique à tous les éléments d’un groupe, ce qui supprime le chevauchement.
- Une courbe très marquée sur un mouvement minuscule : l’œil n’y voit que du saccadé.
Dans MotionMaker
Le moteur applique des courbes choisies selon le rôle du mouvement : arrivée vive, glissement doux, traversée de caméra. Elles se combinent avec l’anticipation et le chevauchement pour donner un rythme cohérent au film.
À quoi ressemble une courbe d’accélération
On représente un easing par un graphique : le temps en abscisse, la progression du mouvement en ordonnée, de 0 (au départ) à 1 (à l’arrivée). Une droite donne un mouvement linéaire. Une courbe qui démarre à plat puis se redresse donne un départ lent. Une courbe qui se redresse tout de suite puis s’aplatit donne une arrivée douce.
La pente de la courbe en un point est la vitesse à cet instant. C’est tout le secret : régler un easing, c’est dessiner la vitesse d’un mouvement dans le temps.
Les courbes de Bézier cubiques
Dans le web, la plupart des courbes sont décrites par quatre nombres, ceux de la fonction cubic-bezier(x1, y1, x2, y2). Ils placent deux points de contrôle qui plient la courbe. Les mots-clés usuels en sont des cas particuliers :
| Mot-clé | Courbe | Sensation |
|---|---|---|
| linear | droite | Vitesse constante, mécanique |
| ease | cubic-bezier(0.25, 0.1, 0.25, 1) | Départ assez vif, arrivée douce (valeur par défaut en CSS) |
| ease-in | cubic-bezier(0.42, 0, 1, 1) | Départ lent, fin rapide |
| ease-out | cubic-bezier(0, 0, 0.58, 1) | Départ rapide, arrivée douce |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | Lent, rapide, lent |
Vous pouvez dessiner vos propres courbes : en poussant le deuxième point de contrôle vers le haut, on obtient un dépassement, c’est-à-dire une arrivée qui va un peu trop loin avant de revenir. C’est ainsi qu’on fabrique une impression de ressort sans simuler de physique.
Courbes et ressorts
Il existe une autre famille : les mouvements à ressort, décrits non par une courbe fixe mais par une raideur, un amortissement et une masse. Un ressort rebondit naturellement si l’amortissement est faible, et se pose sans rebond s’il est fort. Le moteur de rendu de MotionMaker, Remotion, propose les deux approches : l’interpolation avec courbe et le ressort. Le choix dépend du rôle du mouvement.
- Courbe : quand on veut une durée précise (un titre qui doit être posé avant un temps fort).
- Ressort : quand on veut une impression de matière (un bouton, une carte qui se pose).
Choisir selon le rôle du mouvement
Plutôt que de régler chaque élément un par un, on gagne à décider d’une règle par rôle, puis à s’y tenir dans tout le film.
| Rôle | Courbe conseillée | Pourquoi |
|---|---|---|
| Entrée d’un titre | Ease-out marqué | Arrive vite, se pose doucement, laisse lire |
| Sortie d’un élément | Ease-in | S’efface sans attirer l’œil |
| Déplacement d’un point à un autre | Ease-in-out | Démarre et s’arrête sans à-coup |
| Rotation continue ou défilement | Linéaire | La vitesse constante est le but |
| Élément « matériel » | Ressort ou dépassement léger | Donne du poids |
| Mouvement de caméra | Ease-in-out ample | Évite l’effet « glissière » |
Courbe, durée et distance vont ensemble
Une même courbe ne produit pas la même impression selon la distance parcourue. Sur une très courte distance, un ease-out très marqué donne un à-coup : l’œil voit un saut, pas une décélération. Sur une grande distance, une courbe douce paraît traîner. Plus un objet parcourt de chemin, plus la durée peut s’allonger, mais pas proportionnellement : un déplacement deux fois plus long ne demande pas une durée deux fois plus grande.
L’easing de la caméra
Les mouvements de caméra ont leur propre logique. Une caméra réelle accélère et ralentit avec de l’inertie. Un fouetté de caméra, qui traverse rapidement le plan d’un côté à l’autre, laisse une traînée dont la longueur dépend de la vitesse réelle atteinte ; une traversée vers l’avant s’accompagne d’un flou de profondeur. Dans les deux cas, c’est la courbe de vitesse qui rend le mouvement crédible. Voir aussi les transitions de MotionMaker.
Cinq tests pour vérifier vos courbes
- Test du ralenti : lisez le film à vitesse réduite ; un mouvement linéaire se voit tout de suite.
- Test de la coupe : si un mouvement s’arrête net, la courbe n’a pas de fin douce.
- Test du groupe : tous les éléments d’un groupe bougent-ils pareil ? Décalez-les (voir chevauchement).
- Test de la durée : un mouvement qui laisse le temps de lire ? un mouvement qui traîne ?
- Test de cohérence : les mêmes rôles utilisent-ils les mêmes courbes dans tout le film ?
Une courbe réussie ne se remarque pas : elle donne l’impression que les choses bougent comme elles devraient. Quand elle est ratée, tout le film paraît raide, quelle que soit la qualité du reste.