L'easing (interpolation non linéaire) transforme un mouvement mécanique en mouvement signifiant. Un objet qui accélère au départ (ease-in) semble lourd. Un objet qui décélère à l'arrivée (ease-out) semble précis. Un objet à vitesse constante semble robotique. En design d'interaction, l'easing encode l'intention : une entrée douce (ease-out) = bienvenue ; une sortie rapide (ease-in) = disparition discrète.
// 3 courbes d'easing comparées
let progress = 0;
function setup() { createCanvas(400, 300); }
function draw() {
background(11, 15, 20);
progress = (progress + 0.008) % 1;
let x0 = 40, x1 = width - 40;
// Linéaire
let lin = progress;
// Ease-out
let eout = 1 - pow(1 - progress, 3);
// Ease-in-out (smoothstep)
let eio = progress * progress * (3 - 2 * progress);
noStroke();
fill(100); ellipse(lerp(x0, x1, lin), 80, 20, 20);
fill(55, 227, 195); ellipse(lerp(x0, x1, eout), 150, 20, 20);
fill(201, 162, 39); ellipse(lerp(x0, x1, eio), 220, 20, 20);
// Labels
fill(200); textSize(11); textAlign(LEFT);
text('linéaire', 10, 85);
text('ease-out', 10, 155);
text('ease-in-out', 10, 225);
}Créez un sketch avec 3 cercles se déplaçant de gauche à droite : un en linéaire, un en ease-out, un en ease-in-out. Observez lequel semble le plus « naturel » et lequel semble « mort ».
Recevez les 5 leçons par email — une tous les 3 jours. Gratuit, sans compte.
Double opt-in · désinscription en 1 clic · zéro spam.