Erstellen Sie in CSS mit der Easing-Funktion linear() komplexe Animationskurven.

Wir stellen vor: linear(), eine CSS-Glättungsfunktion, die linear zwischen ihren Punkten interpoliert und es Ihnen ermöglicht, Sprung- und Federeffekte nachzubilden.

Bramus

Glättungen in CSS

Wenn Sie Elemente in CSS animieren oder übergehen, können Sie die Geschwindigkeit, mit der sich ein Wert ändert, mit einer Ease-Funktion mithilfe der Eigenschaften animation-timing-function und transition-timing-function steuern.

In CSS sind mehrere Keywords als Voreinstellungen verfügbar, nämlich linear, ease, ease-in, ease-out und ease-in-out. Sie können die cubic-bezier()-Funktion verwenden, um eigene Easing-Kurven zu erstellen, oder die Easing-Funktion steps() schrittweise zu nutzen.

Hinweis:Weitere Informationen zu diesen Attribut- und Funktionsnamen für die Übergänge finden Sie unter CSS lernen: Animationen.

Bei richtiger Verwendung verleihen Ease-Werte einem animierten Element ein gewisses Gewicht, da es den Anschein hat, dass es an Fahrt aufnimmt.

Komplexe Kurven wie Sprung- oder Federeffekte lassen sich in CSS nicht erstellen. Dank linear() können Sie sie jetzt jedoch erstaunlich gut approximieren.

Einführung in linear()

Unterstützte Browser

• 113
• 113
• 112
• 17:2

Mit linear() können Sie eine neue Art von Übergängen in CSS definieren. Für diese Funktion sind mehrere durch Kommas getrennte Haltestellen zulässig. Jede Haltestelle ist eine einzelne Zahl zwischen 0 und 1. Zwischen den einzelnen Haltestellen erfolgt die Interpolation auf lineare Weise, was den Namen der Funktion erklärt.

animation-timing-function: linear(0, 0.25, 1);

Diese Haltestellen sind standardmäßig gleichmäßig verteilt. Im vorherigen Snippet bedeutet das, dass der Ausgabewert von 0.25 bei 50% verwendet wird.

In der Grafik sieht das Diagramm für linear(0, 0.25, 1) so aus:

Wenn die Haltestellen nicht gleichmäßig verteilt sein sollen, können Sie optional eine Haltestellenlänge angeben. Wenn Sie einen Wert als Haltestellenlänge übergeben, definieren Sie seinen Startpunkt:

animation-timing-function: linear(0, 0.25 75%, 1);

Hier wird der Ausgabewert 0.25 nicht an der 50%-Markierung, sondern bei 75% verwendet.

Wenn Sie zwei Werte als Haltestellenlänge angeben, definieren Sie sowohl den Start- als auch den Endpunkt:

animation-timing-function: linear(0, 0.25 25% 75%, 1);

Ein Ausgabewert von 0,25 wird zwischen 25% und 75% der Zeit verwendet.

Komplexe Kurven mit linear() erstellen

Die obigen Beispiele sind sehr einfache Übergänge. Mit linear() können Sie jedoch komplexe Übergänge auf sehr einfache Weise nachbilden, wobei jedoch etwas Präzision verloren geht.

Nehmen wir diese Bounce-Easing-Kurve, eine Art von Easing, das nicht direkt in CSS ausgedrückt werden kann und mit JavaScript definiert wird:

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

Der Code sagt Ihnen vielleicht nicht viel, eine Visualisierung aber schon. Hier ist die Ausgabe als blaue Kurve dargestellt:

Die Kurve kann vereinfacht werden, indem mehrere Haltestellen hinzugefügt werden. Hier steht jeder grüne Punkt für eine Haltestelle:

Wenn sie an linear() übergeben wird, ergibt sich eine Kurve, die der ursprünglichen ähnelt, aber an den Rändern etwas rauer ist.

Wenn Sie das grüne animierte Feld mit dem blauen vergleichen, sehen Sie, dass es nicht so flüssig ist.

Wenn Sie jedoch genügend Punkte hinzufügen, können Sie die ursprüngliche Kurve ziemlich gut approximieren. Hier ist eine aktualisierte Version:

Wenn Sie die Anzahl der Haltestellen verdoppeln, erhalten Sie bereits ein flüssiges Ergebnis.

Der zur Animierung verwendete Code sieht wie folgt aus:

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

Ein Tool, das Ihnen dabei helfen kann,

Die manuelle Erstellung dieser Liste von Haltestellen wäre sehr mühsam. Zum Glück haben Jake und Adam ein Tool entwickelt, mit dem Sie eine Ease-Kurve in ihre linear()-Entsprechung umwandeln können.

Screenshot von https://linear-easing-generator.netlify.app/ in Aktion.

Das Tool nimmt eine JavaScript-Glättungsfunktion oder eine SVG-Kurve als Eingabe an und gibt die vereinfachte Kurve mit linear() aus. Mit den Schiebereglern können Sie die Anzahl der gewünschten Haltestellen und deren Genauigkeit festlegen.

Rechts oben können Sie auch eine der Voreinstellungen auswählen: „Federn“, „Springen“, „Einfache Elastizität“ oder „Material Design-betonte Glättung“.

Unterstützung für Entwicklertools

In den Entwicklertools können Sie das Ergebnis von linear() visualisieren und bearbeiten. Klicken Sie auf das Symbol, um eine interaktive Kurzinfo aufzurufen, mit der Sie die Haltestellen verschieben können.

Screenshot des linear()`-Editors in den Chrome-Entwicklertools

Diese DevTools-Funktion ist in den DevTools verfügbar, die mit Chrome 114 ausgeliefert werden.

Foto von Howie Mapson auf Unsplash