FRENAR
N°07 · CSS/Canvas · Timing & Motion

Éditeur d'easing

La courbe de Bézier cubique gouverne le « feel » de chaque animation. Déplacez les poignées pour sculpter le mouvement — voyez-le instantanément sur la balle.

cubic-bezier(0.25, 0.10, 0.25, 1.00)
// Éditeur de courbe cubic-bezier
function cubicBezier(t, p1x, p1y, p2x, p2y) {
  // Résolution Newton-Raphson pour trouver t sur l'axe X
  let guess = t;
  for (let i = 0; i < 8; i++) {
    const x = bezierX(guess, p1x, p2x) - t;
    if (Math.abs(x) < 0.001) break;
    guess -= x / bezierDX(guess, p1x, p2x);
  }
  return bezierY(guess, p1y, p2y);
}

// La courbe Y en fonction du paramètre
function bezierY(t, p1y, p2y) {
  const t2 = t * t, t3 = t2 * t;
  return 3 * (1-t)*(1-t) * t * p1y
       + 3 * (1-t) * t2 * p2y + t3;
}
À toi de jouer

Créez un « rebond » en plaçant P2 au-dessus de 1.0 (valeurs > 1 = overshoot). Quel CSS cubic-bezier utiliseriez-vous pour un bouton « satisfying » ?

Maîtrisez le motion design en interface

Réserver un créneau