Benutzerdefiniertes Easing

Abseits der Tour kannst du benutzerdefinierte Animationen für deine Projekte erstellen.

Paul Lewis

Sam Thorogood

Manchmal werden die in CSS enthaltenen Easing-Keywords nicht verwendet oder Web Animations bzw. ein JavaScript-Framework eingesetzt. In diesen Fällen können Sie in der Regel eigene Kurven (oder Gleichungen) definieren, was eine Menge Kontrolle über die Stimmung der Animationen Ihres Projekts bietet.

Zusammenfassung

• Mit einem benutzerdefinierten Easing können Sie Ihren Projekten mehr Persönlichkeit verleihen.
• Sie können kubische Bézier-Kurven erstellen, die den Standardanimationskurven (ease-out, ease-in usw.) ähneln, jedoch an verschiedenen Stellen betont werden.
• Verwenden Sie JavaScript, wenn Sie mehr Kontrolle über das Timing und das Verhalten der Animation benötigen, zum Beispiel bei elastischen oder hüpfenden Animationen.

Wenn Sie mit CSS Animationen animieren, können Sie kubische Bézier-Kurven definieren, um den zeitlichen Ablauf zu bestimmen. Tatsächlich sind die Keywords ease, ease-in, ease-out und linear vordefinierten Bézier-Kurven zugeordnet, die in der Spezifikation für CSS-Übergänge und der Spezifikation für Webanimationen beschrieben sind.

Diese Bézier-Kurven enthalten vier Werte oder zwei Zahlenpaare, wobei jedes Paar die X- und Y-Koordinaten der Kontrollpunkte einer kubischen Bézier-Kurve beschreibt. Der Startpunkt der Bézier-Kurve verfügt über Koordinaten (0, 0) und der Endpunkt hat Koordinaten (1, 1). Sie werden die X- und Y-Werte der beiden Kontrollpunkte festlegen. Die X-Werte für die beiden Kontrollpunkte müssen zwischen 0 und 1 liegen und der Y-Wert jedes Kontrollpunkts kann den Grenzwert [0, 1] überschreiten. Allerdings ist aus der Spezifikation nicht ersichtlich, um wie viel.

Wenn Sie den X- und Y-Wert jedes Kontrollpunkts ändern, ergibt sich eine völlig andere Kurve und damit auch ein völlig anderes Gefühl für Ihre Animation. Befindet sich der erste Kontrollpunkt beispielsweise unten rechts, dauert der Start der Animation länger. Befindet es sich im Bereich oben links, geht der Start schnell. Umgekehrt gilt: Befindet sich der zweite Kontrollpunkt unten rechts im Raster, dann ist er am Ende schnell; wenn er sich oben links befindet, endet er langsam.

Hier zwei Kurven zum Vergleich: eine typische Ease-In-Out-Kurve und eine benutzerdefinierte Kurve:

Animation mit benutzerdefiniertem Easing ansehen

Der CSS-Code 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 gibt Ihnen eine beträchtliche Kontrolle über die Anmutung der Animation. Bei der obigen Kurve können Sie beispielsweise sehen, dass die Kurve einer klassischen ease-in-out-Kurve ähnelt, jedoch mit einem verkürzten Ease-In- bzw. Einstiegsabschnitt und einer verlängerten Verlangsamung am Ende.

Experimentieren Sie mit diesem Animationskurven-Tool und beobachten Sie, wie sich die Kurve auf die Wahrnehmung einer Animation auswirkt.

Mehr Kontrolle durch JavaScript-Frameworks

Manchmal benötigen Sie sogar noch mehr Kontrolle, als eine kubische Bézier-Kurve bietet. Wenn Sie ein elastisches Bounce-Gefühl wünschen, können Sie ein JavaScript-Framework verwenden, da dies mit CSS oder Web Animationen schwer zu erreichen ist.

TweenMax

Ein leistungsstarkes Framework ist TweenMax von GreenSock (oder TweenLite, wenn Sie es wirklich schlank halten möchten), da Sie in einer kleinen JavaScript-Bibliothek eine Menge Kontrolle darüber erhalten und die Codebasis sehr ausgereift ist.

Animation mit elastischem Komfort ansehen

Wenn du TweenMax verwenden möchtest, füge deiner Seite dieses Script hinzu:

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

Nachdem Sie das Skript erstellt haben, können Sie TweenMax für Ihr Element aufrufen und ihm mitteilen, welche Eigenschaften und Easings Sie möchten. Es gibt viele Easing-Optionen, die Sie verwenden können. Im folgenden Code wird ein elastisches 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 sind alle Optionen aufgeführt, die Ihnen hier zur Verfügung stehen. Es lohnt sich also zu lesen.