Benutzerdefiniertes Easing

Sie können auch ganz eigene Animationen für Ihre Projekte erstellen.

Paul Lewis
X Startseite
Sam Thorogood

Manchmal möchten Sie weder die in CSS enthaltenen Easing-Keywords noch Webanimationen oder ein JavaScript-Framework verwenden. In diesen Fällen können Sie in der Regel eigene Kurven (oder Gleichungen) definieren. So haben Sie viel Kontrolle über die Optik der Animationen Ihres Projekts.

Zusammenfassung

  • Mit benutzerdefinierten Übergängen können Sie Ihren Projekten mehr Persönlichkeit verleihen.
  • Sie können kubische Bézierkurven erstellen, die den Standardanimationskurven (z. B. „Ease-out“ und „Ease-in“) ähneln, aber an anderen Stellen betont sind.
  • Verwenden Sie JavaScript, wenn Sie mehr Kontrolle über das Timing und Verhalten der Animation haben möchten, z. B. bei elastischen oder Sprung-Animationen.

Bei der Animation mit CSS werden Sie feststellen, dass Sie zur Definition des Timings kubische Bézierkurven definieren können. Die Schlüsselwörter ease, ease-in, ease-out und linear werden in der CSS-Übergangsspezifikation und in der Spezifikation für Web-Animationen auf vordefinierte Bézierkurven zugeordnet.

Diese Bézierkurven nehmen vier Werte oder zwei Zahlenpaare an. Jedes Paar beschreibt die X- und Y-Koordinaten der Kontrollpunkte einer kubischen Bézierkurve. Der Startpunkt der Bézierkurve hat die Koordinaten (0, 0) und der Endpunkt die Koordinaten (1, 1). Sie können die X- und Y-Werte der beiden Kontrollpunkte festlegen. Die X-Werte für die beiden Kontrollpunkte müssen zwischen 0 und 1 liegen. Der Y-Wert jedes Kontrollpunkts kann den Grenzwert [0, 1] überschreiten, inwieweit, geht aus der Spezifikation nicht hervor.

Wenn Sie den X- und Y-Wert jedes Steuerpunkts ändern, erhalten Sie eine völlig andere Kurve und damit ein völlig anderes Erscheinungsbild für Ihre Animation. Wenn sich der erste Kontrollpunkt beispielsweise unten rechts befindet, startet die Animation langsam. Wenn es sich links oben befindet, ist der Start schnell. Wenn sich der zweite Steuerpunkt dagegen rechts unten im Raster befindet, ist das Ende schnell. Befindet er sich links oben, dauert es länger.

Zum Vergleich sehen Sie zwei Kurven: eine typische Easing-In-Out-Kurve und eine benutzerdefinierte Kurve:

Ease-In-Out-Animationskurve.

Benutzerdefinierte Animationskurve.

Animation mit benutzerdefiniertem Easing ansehen

Das CSS für die benutzerdefinierte Kurve lautet:

transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);

Die ersten beiden Zahlen sind die X- und Y-Koordinaten des ersten Kontrollpunkts und die zweiten beiden Zahlen die X- und Y-Koordinaten des zweiten Kontrollpunkts.

Das Erstellen einer benutzerdefinierten Kurve macht viel Spaß und bietet Ihnen eine erhebliche Kontrolle über das Erscheinungsbild der Animation. Anhand der obigen Kurve lässt sich beispielsweise erkennen, dass sie einer klassischen Easing-In-Out-Kurve ähnelt, jedoch mit einem verkürzten Ease-In-Teil bzw. „Erste Schritte“-Teil und einer verlängerten Verlangsamung am Ende.

Experimentieren Sie mit diesem Tool für Animationskurven und sehen Sie, wie sich die Kurve auf das Erscheinungsbild einer Animation auswirkt.

JavaScript-Frameworks für mehr Kontrolle verwenden

Manchmal benötigen Sie noch mehr Kontrolle als eine kubische Bézierkurve bieten kann. Wenn Sie ein elastisches Sprunggefühl wünschen, sollten Sie ein JavaScript-Framework verwenden, da dieser Effekt mit CSS oder Web-Animationen nur schwer zu erzielen ist.

TweenMax

Ein leistungsstarkes Framework ist TweenMax von GreenSock (oder TweenLite, wenn Sie die Anwendung möglichst klein halten möchten), da Sie über eine kleine JavaScript-Bibliothek viel Kontrolle erhalten und es eine sehr ausgereifte Codebasis ist.

Beispiel für eine Animation mit der Option „Elastic ease“

Um TweenMax zu verwenden, fügen Sie Ihrer Seite dieses Skript hinzu:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

Sobald das Skript erstellt ist, können Sie TweenMax für Ihr Element aufrufen und ihm mitteilen, welche Eigenschaften und Easings Sie wünschen. Es gibt viele Easing-Optionen, die Sie verwenden können. Im folgenden Code wird ein flexibles Ease-Out verwendet:

    var box = document.getElementById('my-box');
    var animationDurationInSeconds = 1.5;

    TweenMax.to(box, animationDurationInSeconds, {
      x: '100%',
      ease: 'Elastic.easeOut'
    });

In der TweenMax-Dokumentation werden alle Optionen beschrieben, die dir hier zur Verfügung stehen. Sie ist also durchaus lesenswert.