Kubischer Bézier-Generator
Entwerfen Sie eine benutzerdefinierte CSS-Cubic-Bezier()-Timing-Funktion, indem Sie zwei Kontrollpunkte ziehen, eine Live-Vorschau anhand einer linearen Referenz anzeigen und dann den fertigen Wert kopieren.
Ergebnis
Das manuelle Eingeben von „cubic-bezier(x1, y1, x2, y2)“ und das Neuladen der Seite, um das Gefühl zu überprüfen, ist eine langsame Methode zum Optimieren einer Animation. Dieser Generator schließt diese Schleife: Ziehen Sie einen der Kontrollpunktgriffe auf der Kurve oder geben Sie genaue Zahlen in die Felder x1/y1/x2/y2 ein, und die Kurve, der kopierbare CSS-String und die Live-Animationsvorschau werden bei jeder Änderung aktualisiert – kein Erstellungsschritt, kein Neuladen.
Die beiden Achsen funktionieren bewusst unterschiedlich. x1 und x2 bleiben zwischen 0 und 1 geklemmt, da dies in der CSS-Spezifikation tatsächlich von einer Timing-Funktion „cubic-bezier()“ gefordert wird – ein Wert außerhalb dieses Bereichs ist einfach ungültig. Für y1 und y2 gibt es keine solche Beschränkung: Ziehen Sie einen Ziehpunkt über den oberen Rand des Felds oder unter den unteren Rand, und die Kurve schießt über ihren Anfang oder ihr Ende hinaus. Genau auf diese Weise werden aus einer einzelnen Beschleunigungskurve Feder- und Sprungeffekte erzeugt.
Das Sehen einer Zahl ist nicht dasselbe wie das Sehen der Bewegung, daher werden in der Vorschau zwei identische Kugeln nebeneinander in einer Schleife ausgeführt: Eine bewegt sich mithilfe Ihrer benutzerdefinierten Kurve, die andere bewegt sich mit einer einfachen, konstanten linearen Geschwindigkeit. Wenn man ihnen beim Rennen zusieht, kann man am schnellsten feststellen, ob eine Lockerungskurve tatsächlich das gewünschte Gefühl erzeugt, bevor sie jemals ein Stylesheet erreicht. Die voreingestellten Seiten – die reellen Zahlen hinter dem CSS-eigenen Schlüsselwort „ease-in-out“, eine ehrliche Overshoot-Näherung, die manche als „Bounce“ bezeichnen, und die von Google veröffentlichte Standardkurve für Material Design – sind fertige Ausgangspunkte, von denen aus Sie ziehen können, und keine leeren Kontrollpunkte.
Alles läuft lokal in Ihrem Browser: kein Upload, kein Konto, kein Server-Roundtrip und der Generator arbeitet offline weiter, sobald die Seite geladen ist.