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.
// É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; }
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