⭐ 0
🔍
Text Bild PDF & Dokumente Audio Musik Elektronik Zeit Dienstprogramme Validatoren Esoterik Spiele

Standard-Entlastungskurve für Materialdesign

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.

Ziehen Sie den orangefarbenen Griff (P1) und den roten Griff (P2), um die Kurve neu zu formen – die Pfeiltasten funktionieren auch. X bleibt zwischen 0 und 1, wie es CSS erfordert; Ziehen Sie einen Griff über oder unter das Feld, um y über diesen Bereich hinaus zu senden, um Überschwing- und Bounce-Effekte zu erzielen.

Deine Kurve

Linear (zum Vergleich)

Verarbeitung... 0%

Ergebnis

Auf dieser Seite wird der Generator geöffnet, wobei x1=0,4, y1=0, x2=0,2, y2=1 bereits geladen ist – die standardmäßige Beschleunigungskurve, die in den Bewegungsrichtlinien von Google für Material Design veröffentlicht wurde. Ziehen Sie entweder den Griff oder bearbeiten Sie die Zahlen und die Kurve, die Live-Vorschau und das kopierbare CSS-Update zusammen.

Material Design nennt diese Kurve „Standardbeschleunigung“ und empfiehlt sie für die meisten Bildschirmübergänge – Elemente, die bereits sichtbar sind und sich innerhalb desselben Bildschirms einfach bewegen, in der Größe ändern oder verblassen. Seine Form beschleunigt sich schnell und bremst dann sanft ab, weshalb so viele Android-Apps und Web-UIs im Material-Stil das gleiche Übergangsgefühl vermitteln, ohne dass jemand bemerkt, dass sie dieselben vier Zahlen verwenden.

Legen Sie es direkt in die Übergangs-Timing-Funktion oder die Animations-Timing-Funktion ab, um ein Material-konsistentes Gefühl zu erhalten, oder verwenden Sie es als Referenzpunkt: Die Material-Richtlinien definieren auch separate „Verzögerungs-“ und „Beschleunigungs“-Kurven für Elemente, die in den Bildschirm eintreten oder ihn verlassen, was diese einzelne Standardkurve nicht ersetzen soll.

🛡️
Im Browser ausgeführt

Ihre Dateien und Eingaben verlassen dieses Gerät nie. Die Verarbeitung läuft vollständig offline. 100 % sicher.

Akzeptierte Formate & Regeln

  • Ziehbarer SVG-Kurveneditor mit zwei Griffen (P1 und P2) sowie editierbaren x1/y1/x2/y2-Zahleneingaben für pixelgenaue Werte.
  • Looping-Animationsvorschau, die Ihr benutzerdefiniertes kubisches Bezier()-Timing mit einem linearen Referenzball vergleicht, sodass Sie die Beschleunigung sehen und nicht nur ablesen können.
  • Kopierbare kubische Bézier-Zeichenfolge (x1, y1, x2, y2), bereit für die Übergangs-Timing-Funktion oder die Animations-Timing-Funktion, plus voreingestellte Seiten für Easy-in-out, Bounce und die Standardkurve von Material Design.

Wichtigste Vorteile

✓ Ziehen Sie an einem der Kontrollpunktgriffe und beobachten Sie, wie die Kurve, die Live-Animationsvorschau und der kopierbare CSS-String gemeinsam aktualisiert werden – Sie müssen sich die Koordinatenberechnung nicht merken.
✓ Y kann für Feder- und Sprungeffekte über 0 und 1 hinausgehen, während X auf den von CSS tatsächlich geforderten Bereich von 0–1 beschränkt bleibt, sodass jeder Wert, den Sie kopieren, in dem Moment gültig ist, in dem Sie ihn einfügen.
✓ Die Parallelvorschau lässt Ihre benutzerdefinierte Kurve gegen eine einfache lineare Referenz laufen, sodass der Unterschied im Bewegungsgefühl – der gesamte Grund für die Verwendung der Beschleunigung – auf einen Blick offensichtlich ist und nicht nur in der Codeausgabe.

Anwendungsfälle

  • • Benötigen Sie einen benutzerdefinierten CSS-Wert „transition-timing-function“ oder „animation-timing-function“ anstelle eines der integrierten Ease-Schlüsselwörter?
  • • Möchten Sie genau sehen, wie „cubic-bezier(0.42, 0, 0.58, 1)“ – die reellen Zahlen hinter dem CSS-eigenen Schlüsselwort „ease-in-out“ – in Bewegung aussieht, bevor Sie es ausliefern?
  • • Erstellen Sie eine Hüpfschaltflächen-, Modal- oder Kartenanimation und benötigen eine fertige Overshoot-Easing-Kurve, die Sie direkt in Ihr Stylesheet kopieren können?