Cubic-Bezier-Generator

Cubic-bezier(x1, y1, x2, y2) von Hand einzutippen und die Seite neu zu laden, um das Gefühl zu prüfen, ist ein langsamer Weg, eine Animation zu justieren. Dieser Generator schließt diese Schleife: Ziehen Sie einen der Kontrollpunkt-Anfasser auf der Kurve oder geben Sie exakte Zahlen in die x1-/y1-/x2-/y2-Felder ein, und Kurve, kopierbarer CSS-String und Live-Animationsvorschau aktualisieren sich bei jeder Änderung – ohne Build-Schritt, ohne Neuladen.

Die beiden Achsen unterscheiden sich bewusst. x1 und x2 bleiben auf den Bereich zwischen 0 und 1 beschränkt, denn das ist, was die CSS-Spezifikation von einer cubic-bezier()-Timing-Funktion tatsächlich verlangt – ein Wert außerhalb dieses Bereichs ist schlicht ungültig. y1 und y2 haben diese Einschränkung nicht: Ziehen Sie einen Anfasser oben oder unten über den Rand des Feldes hinaus, und die Kurve schwingt über ihren Anfang oder ihr Ende hinaus – genau so entstehen Feder- und Bounce-artige Effekte aus einer einzigen Easing-Kurve.

Zahlen zu sehen ist nicht dasselbe, wie die Bewegung zu sehen. Daher zeigt die Vorschau zwei identische Kugeln nebeneinander in einer Schleife: Eine bewegt sich mit Ihrer eigenen Kurve, die andere mit einem gleichmäßigen, linearen Tempo. Ihnen beim Wettlauf zuzuschauen, ist der schnellste Weg zu erkennen, ob eine Easing-Kurve wirklich das gewünschte Gefühl erzeugt, bevor sie je ein Stylesheet erreicht. Die Preset-Seiten – die echten Zahlen hinter CSSs eigenem ease-in-out-Schlüsselwort, eine ehrliche Überschwing-Approximation, die manche einen Bounce nennen, und Googles veröffentlichte Material-Design-Standardkurve – sind fertige Ausgangspunkte, von denen aus Sie weiterziehen können, anstatt bei leeren Kontrollpunkten anzufangen.

Alles läuft lokal in Ihrem Browser: kein Upload, kein Account, kein Server-Round-Trip, und der Generator funktioniert offline, sobald die Seite einmal geladen ist.