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

Jetzt neu: linear(), eine Easing-Funktion in CSS, die linear zwischen den Punkten interpoliert, sodass Sie Sprung- und Federeffekte nachbilden können.

Easings in CSS

Beim Animieren oder Verschieben von Elementen in CSS steuern Sie mit einer Easing-Funktion die Geschwindigkeit, mit der sich ein Wert ändert. Dazu verwenden Sie die Eigenschaften animation-timing-function und transition-timing-function.

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.

Bei richtiger Anwendung geben Easings einem animierten Element ein Gefühl von Gewicht, das scheinbar an Dynamik gewinnt.

Das Erstellen komplexer Kurven wie Absprung- oder Federeffekte ist in CSS nicht möglich, aber dank linear() lassen sich diese jetzt erstaunlich gut annähern.

Einführung in linear()

Eine neue Möglichkeit zum Definieren eines Easings in CSS ist die Verwendung von linear(). 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 wird die Interpolation linear durchgeführt, wodurch der Name der Funktion erläutert wird.

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

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

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

Wenn Sie nicht möchten, dass die Haltestellen gleichmäßig verteilt werden, können Sie optional eine Haltestellenlänge übergeben. 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 für die 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 von 25% bis 75% in der Zeit verwendet.

Komplexe Kurven mit linear() erstellen

Bei den Beispielen oben handelt es sich um sehr einfache Easing-Funktionen. Sie können jedoch linear() verwenden, um komplexe Easing-Funktionen auf sehr einfache Weise neu zu erstellen, ohne dabei an Präzision zu verlieren.

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;
}

Während der Code Ihnen vielleicht nicht viel verrät, könnte eine Visualisierung Ihnen viel sagen. Hier ist die Ausgabe, dargestellt als blaue Kurve:

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

Bei Übergabe an linear() ist das Ergebnis eine Kurve, die der ursprünglichen Kurve ähnelt, jedoch an den Rändern etwas rauer ist.

Wenn Sie das grüne animierte Feld mit dem blauen vergleichen, sehen Sie, dass es nicht so gleichmäßig ist.

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

Wenn Sie nur die Anzahl der Stopps verdoppeln, erhalten Sie bereits ein reibungsloses 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 zur Unterstützung

Es wäre sehr umständlich, diese Liste manuell zu erstellen. Glücklicherweise haben Jake und Adam ein Tool entwickelt, mit dem Sie eine Easing-Kurve in ihr linear()-Gegenstück umwandeln können.

<ph type="x-smartling-placeholder">

</ph>

Das Tool verwendet eine JavaScript-Easing-Funktion oder SVG-Kurve als Eingabe und gibt die vereinfachte Kurve mithilfe von linear() aus. Mit den Schiebereglern können Sie die Anzahl und Genauigkeit der Stopps festlegen.

Oben rechts können Sie auch eine der Voreinstellungen auswählen: „Spring“, „Bounce“, „Einfach elastisch“ oder „Betontes Easing nach Material Design“.

Unterstützung für Entwicklertools

In den Entwicklertools ist die Unterstützung zum Visualisieren und Bearbeiten des Ergebnisses von linear() verfügbar. Klicken Sie auf das Symbol, um eine interaktive Kurzinfo aufzurufen, in der Sie um die Haltestellen herum ziehen können.

<ph type="x-smartling-placeholder">

</ph>

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

Foto von Howie Mapson auf Unsplash