Courbes cubic-bezier

Comment ça marche

1. Choisissez une courbe nommée, ou tapez quatre nombres.
2. Lisez le tableau : où en est le mouvement à chaque dixième du temps.
3. Réglez la durée sur celle que vous animez réellement, pour que les millisecondes veuillent dire quelque chose.
4. Copiez la fonction de temporisation.

Questions fréquentes

Pourquoi un tableau plutôt qu’une courbe dessinée ?

Parce que la question est presque toujours « est-ce trop lent au départ » ou « est-ce que ça arrive trop brutalement », et un tableau de progression contre le temps y répond directement. Une courbe dessinée est jolie et vous laisse encore deviner les millisecondes.

Que signifient les quatre nombres ?

Deux points de contrôle : x1, y1, x2, y2. Les x sont le temps et doivent tenir entre 0 et 1. Les y sont la progression et peuvent sortir de cet intervalle — c’est exactement ce qui fait qu’une courbe dépasse puis revient.

Laquelle choisir ?

Pour quelque chose qui entre, ease-out : rapide au début, qui se pose à la fin. Pour quelque chose qui sort, ease-in. ease-in-out pour un déplacement entre deux endroits. Linéaire pour un indicateur qui tourne, et presque rien d’autre.

Qu’est-ce qu’une courbe back ?

Une courbe qui dépasse sa destination puis revient — le petit rebond qui donne à une boîte de dialogue un côté physique. À réserver aux petits mouvements rapides ; sur un grand, cela se lit comme une erreur.

Quelque chose part-il vers un serveur ?

Non. Tout tourne dans le navigateur : ce que vous saisissez reste sur votre ordinateur.