Easing – Grundlagen

Hier erfahren Sie, wie Sie Animationen weicher machen und gewichten können.

In der Natur bewegt sich nichts linear von einem Punkt zum anderen. In Wirklichkeit werden Dinge im Laufe der Zeit schneller oder langsamer. Unser Gehirn ist darauf gepolt, diese Art von Bewegung zu erwarten. Nutzen Sie das bei der Animation zu Ihrem Vorteil. Natürliche Bewegungen sorgen dafür, dass sich Nutzer in Ihren Apps wohler fühlen, was wiederum zu einer besseren Nutzererfahrung führt.

Zusammenfassung

• Mit der Glättung wirken Ihre Animationen natürlicher.
• Wählen Sie für UI-Elemente Ease-Out-Animationen aus.
• Vermeiden Sie Ease-in- oder Ease-out-Animationen, es sei denn, Sie können sie kurz halten. Sie wirken auf Endnutzer in der Regel schwerfällig.

In der klassischen Animation lautet der Begriff für Bewegung, die langsam beginnt und beschleunigt, „langsamen“, und Bewegungen, die schnell beginnen und dann langsamer werden, „langsam“. Im Web werden diese Begriffe am häufigsten als „Ease In“ und „Ease Out“ bezeichnet. Manchmal werden beide kombiniert, was als „Ease In/Out“ bezeichnet wird. Mit dem Easing wird die Animation also weniger stark oder ausgeprägt.

Easing-Keywords

Bei CSS-Übergängen und -Animationen können Sie die Art des Easings für Ihre Animationen auswählen. Sie können Keywords verwenden, die das Easing der betreffenden Animation beeinflussen. timing Sie können auch eine benutzerdefinierte Überblendung verwenden, was Ihnen viel mehr Freiheit bei der Gestaltung Ihrer App bietet.

Hier sind einige Keywords, die Sie in CSS verwenden können:

• linear
• ease-in
• ease-out
• ease-in-out

Quelle: CSS-Übergänge, W3C

Sie können auch das Schlüsselwort steps verwenden, um Übergänge mit einzelnen Schritten zu erstellen. Die oben aufgeführten Keywords eignen sich jedoch am besten, um natürliche Animationen zu erstellen.

Lineare Animationen

Animationen ohne jegliche Art von Easing werden als linear bezeichnet. Ein Diagramm eines linearen Übergangs sieht so aus:

Im Laufe der Zeit steigt der Wert in gleichen Schritten an. Bei linearen Bewegungen fühlen sich Dinge oft roboterhaft und unnatürlich an. Das ist etwas, das Nutzende irritierend empfinden. Generell sollten Sie lineare Bewegungen vermeiden.

Egal, ob Sie Ihre Animationen mit CSS oder JavaScript codieren, es gibt immer eine Option für lineare Bewegungen.

Lineare Animation ansehen

Um den obigen Effekt mit CSS zu erzielen, würde der Code in etwa so aussehen:

transition: transform 500ms linear;

Ease-Out-Animationen

Bei der Deceleration beginnt die Animation schneller als bei linearen Animationen und sie wird am Ende verlangsamt.

Die Ausblendung ist in der Regel die beste Option für die Arbeit an der Benutzeroberfläche, da der schnelle Start Ihren Animationen ein Gefühl von Reaktionsfähigkeit verleiht und gleichzeitig eine natürliche Verlangsamung am Ende ermöglicht.

Ease-out-Animation ansehen

Es gibt viele Möglichkeiten, einen Ease-Out-Effekt zu erzielen. Die einfachste ist das Schlüsselwort ease-out in CSS:

transition: transform 500ms ease-out;

Ease-In-Animationen

Ease-in-Animationen starten langsam und enden schnell. Das ist das Gegenteil von Ease-out-Animationen.

Diese Art der Animation ist wie ein fallender schwerer Stein, der langsam anfängt und mit einem dumpfen Knall auf den Boden aufschlägt.

Aus Sicht der Interaktion können Ease-Ins aufgrund ihres abrupten Endes jedoch etwas ungewöhnlich wirken. Dinge, die sich in der realen Welt bewegen, verlangsamen sich in der Regel, anstatt plötzlich anzuhalten. Ease-Ins wirken sich auch nachteilig auf ein langsames Gefühl beim Start aus, was sich negativ auf die Wahrnehmung der Reaktionsfähigkeit auf Ihrer Website oder in Ihrer App auswirkt.

Beispiel für eine Animation mit „Ease-in“

Um eine Ease-in-Animation zu verwenden, können Sie wie bei Ease-out- und linearen Animationen das entsprechende Keyword verwenden:

transition: transform 500ms ease-in;

Ease-In-Out-Animationen

Das Ein- und Auswärtsfahren ähnelt dem Beschleunigen und Verlangsamen eines Autos und kann, wenn man es wohlüberlegt verwendet, einen dramatischeren Effekt als nur nachlassendes Verhalten erzeugen.

Verwenden Sie keine zu lange Animation, da der Beginn der Animation dann zu langsam ist. Etwa 300–500 ms sind in der Regel geeignet, aber die genaue Anzahl hängt stark vom Stil Ihres Projekts ab. Aufgrund des langsamen Starts, des schnellen Mittelteils und des langsamen Endes ist der Kontrast in der Animation jedoch erhöht, was für Nutzer durchaus zufriedenstellend sein kann.

Beispiel für eine „Ease-in-out“-Animation

Um eine nutzerfreundliche Animation zu erhalten, können Sie das CSS-Keyword ease-in-out verwenden:

transition: transform 500ms ease-in-out;