Générateur de courbes d'easing cubic-bezier
Concevez des courbes d'easing cubic-bezier CSS avec deux points de contrôle déplaçables, des préréglages, un aperçu d'animation en direct et du code prêt à copier, le tout dans votre navigateur.
Chargement de Générateur de courbes d'easing cubic-bezier… Si rien ne se passe, activez JavaScript.
L'easing est ce qui sépare une animation qui semble vivante d'une animation qui semble mécanique. Dans le monde réel, rien ne se déplace à vitesse constante : les objets accélèrent au démarrage, ralentissent à l'arrêt et dépassent parfois leur cible avant de se stabiliser. CSS capture cela avec la fonction de temporisation, et la fonction de temporisation la plus flexible est cubic-bezier, qui vous permet de décrire toute une courbe d'accélération avec seulement quatre nombres. Ces nombres définissent les deux points de contrôle d'une courbe de Bezier dont l'axe horizontal est le temps et l'axe vertical la progression, et la forme de cette courbe dicte exactement comment un élément accélère et ralentit au cours d'une transition ou d'une animation.
Questions fréquentes
Quelque chose est-il téléversé lorsque je crée une courbe d'easing ?
Que signifient les quatre nombres de cubic-bezier ?
Pourquoi puis-je faire glisser les poignées au-dessus du haut ou en dessous du bas, mais pas à gauche ou à droite de la boîte ?
Quelle est la différence entre ease-in, ease-out et ease-in-out ?
Comment créer un effet de rebond ou de ressort ?
L'aperçu montre-t-il le mouvement réel ?
Où utiliser la valeur générée dans mon CSS ?
Les courbes cubic-bezier personnalisées fonctionnent-elles dans tous les navigateurs ?
À propos de Générateur de courbes d'easing cubic-bezier
Le problème avec cubic-bezier, c'est que les quatre nombres sont presque impossibles à se représenter mentalement. Une valeur comme cubic-bezier(0.68, -0.55, 0.27, 1.55) ne signifie rien tant que vous ne voyez pas la courbe qu'elle dessine et le mouvement qu'elle produit. Ce générateur rend cela concret. Il affiche la courbe sur une grille interactive avec deux points de contrôle déplaçables reliés à des événements de pointeur, de sorte que vous pouvez tirer les poignées avec une souris ou un doigt et regarder la courbe se remodeler en temps réel. La position horizontale de chaque poignée est limitée à la plage valide de zéro à un exigée par la spécification CSS, tandis que la position verticale est libre, ce qui permet les effets d'anticipation et de dépassement où la progression descend sous zéro ou monte au-dessus de un.
Une rangée de préréglages vous offre les mots-clés CSS nommés comme points de départ : linear pour une vitesse constante, ease pour la valeur par défaut douce, et ease-in, ease-out et ease-in-out pour les schémas d'accélération courants. À partir de n'importe quel préréglage, vous pouvez faire glisser les poignées pour affiner le ressenti. Il est essentiel que l'outil comprenne un aperçu en direct : cliquez sur la piste ou sur le bouton de lecture et un marqueur s'anime le long de celle-ci en utilisant votre courbe exacte, de sorte que vous jugez le mouvement par la façon dont il bouge réellement plutôt que par la géométrie de la ligne. La valeur cubic-bezier générée et une déclaration CSS complète se mettent à jour en continu et se copient dans le presse-papiers en un clic.
L'outil entier s'exécute localement dans votre navigateur. Il n'y a rien à téléverser, aucun compte et aucun suivi, et il continue de fonctionner hors ligne une fois la page chargée, car toute la tâche consiste à calculer une courbe et à produire une courte chaîne de CSS. La combinaison d'une courbe visible, de points déplaçables, de préréglages nommés et d'un aperçu de mouvement réel transforme la syntaxe abstraite cubic-bezier à quatre nombres en quelque chose que vous pouvez atteindre au toucher, ce qui est le chemin le plus rapide vers un easing qui rend bien dans votre interface.
Des carrosseries de voitures à l'animation web : la longue vie de la courbe de Bezier
Les mathématiques derrière chaque courbe d'easing CSS n'ont pas été développées pour les écrans mais pour la tôle. À la fin des années 1950 et dans les années 1960, les constructeurs automobiles français Renault et Citroen avaient besoin d'un moyen précis de décrire les surfaces lisses et fluides des carrosseries afin de pouvoir les usiner avec exactitude. Pierre Bezier, ingénieur chez Renault, a popularisé et publié les courbes qui portent désormais son nom, tandis que Paul de Casteljau, travaillant en secret chez Citroen, a développé indépendamment les mêmes idées et l'élégant algorithme pour les évaluer. Comme le travail de de Casteljau a été tenu confidentiel, les courbes sont devenues connues sous le nom de courbes de Bezier.
L'idée clé est qu'une courbe complexe peut être définie par un petit nombre de points de contrôle, la courbe passant par les extrémités et étant attirée vers, mais pas à travers, les points intermédiaires. Cela a rendu les courbes de Bezier parfaites pour le domaine émergent de l'infographie. Elles sont devenues le fondement du dessin vectoriel en PostScript et PDF, de l'outil plume de chaque logiciel d'illustration, des contours des polices que vous lisez en ce moment et des trajectoires de mouvement dans les logiciels d'animation. Une poignée de points de contrôle peut décrire presque n'importe quelle forme ou mouvement lisse, ce qui est précisément l'économie que recherchaient les ingénieurs des années 1960.
CSS a adopté une courbe de Bezier cubique, dotée de deux points de contrôle entre des extrémités fixes, comme fonction de temporisation parce qu'elle capture tout le vocabulaire du mouvement naturel avec seulement quatre nombres. Les mots-clés nommés ne sont pas des mécanismes distincts mais simplement des étiquettes pratiques pour des valeurs cubic-bezier spécifiques : ease vaut cubic-bezier(0.25, 0.1, 0.25, 1), et linear vaut cubic-bezier(0, 0, 1, 1). Lorsque vous faites glisser les poignées dans un outil comme celui-ci, vous manipulez les mêmes points de contrôle qu'un ingénieur automobile utilisait autrefois pour façonner une aile, courbant désormais le temps et la progression plutôt que le métal pour rendre une interface réactive et vivante.