Easing – Grundlagen

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

Paul Lewis

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 ausgelegt, diese Art von Bewegung zu erwarten. Bei der Animation solltest du das zu deinem Vorteil nutzen. Durch natürliche Bewegung fühlen sich Nutzer mit Ihren Apps wohler, was wiederum zu einer besseren Nutzererfahrung führt.

Zusammenfassung

• Mit Easing wirken Ihre Animationen natürlicher.
• Wählen Sie easeout-Animationen für UI-Elemente aus.
• Animationen, die für den Anfang oder das Ende ganz einfach sind, sollten möglichst nicht kurz sein. für Endanwendende tendenziell träge.

In der klassischen Animation lautet der Begriff für Bewegung, die langsam beginnt und beschleunigt, "langsam", und Bewegungen, die schnell beginnen und wieder langsamer werden, sind langsam. Die Terminologie, die im Web am häufigsten verwendet wird, ist „ease in“ und „ease out“. Manchmal werden die beiden miteinander kombiniert, was als „Ease-in-Out“ bezeichnet wird. Easing bedeutet in Wirklichkeit, die Animation weniger streng oder ausgeprägt zu machen.

Easing-Keywords

Mit CSS-Übergängen und -Animationen können Sie die Art von Easing für Ihre Animationen auswählen. Sie können Keywords verwenden, die das Easing der betreffenden Animation beeinflussen. timing Sie können das Easing auch ganz benutzerdefiniert anpassen, wodurch Sie viel mehr Spielraum haben, um Ihrer App eine persönliche Note zu verleihen.

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

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

Quelle: CSS Transitions, W3C

Sie können auch ein steps-Keyword verwenden, um Übergänge mit diskreten Schritten zu erstellen. Die oben aufgeführten Keywords sind jedoch am besten geeignet, um Animationen zu erstellen, die natürlich wirken.

Lineare Animationen

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

Im Laufe der Zeit nimmt der Wert gleichmäßig zu. Bei linearen Bewegungen fühlen sich Dinge oft roboterhaft und unnatürlich an. Das ist etwas, das Nutzende irritierend empfinden. Im Allgemeinen sollten Sie lineare Bewegungen vermeiden.

Unabhängig davon, ob Sie Ihre Animationen mit CSS oder JavaScript codieren, werden Sie feststellen, dass es immer eine Option für lineare Bewegungen gibt.

Lineare Animation ansehen

Um den oben genannten Effekt mit CSS zu erzielen, sieht der Code in etwa so aus:

transition: transform 500ms linear;

Ease-Out-Animationen

Ein Easing-Out führt dazu, dass die Animation schneller startet als lineare Animationen, und es kommt zu einer Verlangsamung am Ende.

Die Easing-Funktion eignet sich in der Regel am besten für die Arbeit mit der Benutzeroberfläche, da durch den schnellen Start der Animationen ein gewisses Reaktionsgefühl vermittelt und am Ende dennoch eine natürliche Verlangsamung entsteht.

Ease-Out-Animation ansehen

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

transition: transform 500ms ease-out;

Ease-In-Animationen

Ease-In-Animationen starten langsam und enden schnell, was das Gegenteil von ease-out-Animationen ist.

Diese Art von Animation ist mit einem schweren Fallen von Stein vergleichbar. Die Animation beginnt langsam und trifft mit einem dämpfenden Knall schnell auf den Boden.

Aus Interaktionsperspektive können ease-ins jedoch aufgrund ihres abrupten Endes etwas ungewöhnlich wirken. Dinge, die sich in der realen Welt bewegen, verlangsamen, anstatt einfach plötzlich stehen zu bleiben. 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.

Eine ease-in-Animation ansehen

Wenn Sie, ähnlich wie bei easeout- und linearen Animationen, eine Easing-In-Animation verwenden möchten, können Sie das entsprechende Schlüsselwort verwenden:

transition: transform 500ms ease-in;

Ease-In-Out-Animationen

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

Verwenden Sie keine übermäßig lange Animationsdauer, da die Animation beim Start zu langsam ist. In der Regel ist ein Bereich von 300 bis 500 ms geeignet, aber die genaue Zahl hängt stark von der Stimmung Ihres Projekts ab. Aufgrund des langsamen Starts, des schnellen mittleren Endes und des langsamen Endes ist der Kontrast in der Animation jedoch erhöht, was für Nutzer sehr zufriedenstellend sein kann.

Eine Ease-In-Out-Animation ansehen

Für eine vereinfachte Animation können Sie das CSS-Keyword ease-in-out verwenden:

transition: transform 500ms ease-in-out;