Bū tools

Easing

Courbes d’animation, image par image.

À quoi ça sert

Voir une courbe d’easing et l’animation qu’elle donne, côte à côte, pour choisir le bon easing d’un mouvement, d’une transition ou d’une interface.

Comment

• Choisis une courbe (Sine, Quad, Cubic… Back dépasse, Elastic fait ressort, Bounce rebondit) et un sens : In démarre doucement, Out finit doucement, In-Out fait les deux.
• Sur mesure : tire les deux poignées dans le graphique. Tirer une poignée de n’importe quelle courbe la passe en sur mesure.
• Spring : un vrai ressort, comme dans Figma, Framer, SwiftUI ou Rive. Règle sa raideur, son amortissement et sa masse (ou prends un préréglage). Sa durée ne se choisit pas : c’est le temps que le ressort met à se stabiliser (à 0,1 % près). À copier : les valeurs pour Framer et Figma, SwiftUI, et un easing CSS linear() avec sa durée.
• Magnétisme : les poignées se calent sur une grille de 0,05, pour des valeurs propres. Sur ordinateur, Maj enfoncée fait l’inverse pendant qu’on tire.
• Le carré pâle avance en linéaire, pour comparer. Les petits traits sur sa piste sont les images : ils se resserrent là où le mouvement ralentit.
• Timeline : fais-la glisser, ou avance image par image avec ‹ › (← → sur ordinateur, Maj pour 10 images ; Espace lance ou met en pause). La ligne dessous dit où tu en es : image, temps et progression. Choisis la durée (1, 2, 5 s ou le curseur) et la cadence.
• À copier : cubic-bezier pour le CSS, Figma, Rive, Framer ou Lottie ; le nom pour les bibliothèques d’animation ; After Effects : dans la fenêtre Vélocité de l’image clé, l’influence et la vitesse de la première clé (sortie) et de la seconde (entrée). La vitesse est un multiple de la vitesse moyenne (changement total ÷ durée).

Gratuit, sans compte, rien n’est envoyé : tout tourne dans ton navigateur, même hors ligne.

Outils voisins

• Résolution · Tailles, ratios et formats
• Couleurs · Le cercle chromatique des peintres
• Palette · Une couleur, tous ses codes
• Texte SVG · Du texte en contours vectoriels
• Arborescence · Les dossiers d’un projet, en un clic
• Raccourcis · Les raccourcis de Blender, Resolve, Adobe, Figma…
• Défi créatif · Un thème, des contraintes, un livrable et une deadline
• Caméra Blender · Les réglages de ta caméra, prêts pour Blender

Tous les outils · English