Easing – Grundlagen

Animationen weicher machen und ihnen eine Gewichtung geben

Paul Lewis

Nichts in der Natur bewegt sich linear von einem Punkt zum nächsten. Tatsächlich bewegen sich Dinge in der Regel schneller oder langsamer. Unser Gehirn ist darauf eingestellt, diese Art von Bewegung zu erwarten. Wenn Sie also Animationen erstellen, sollten Sie diese zu Ihrem Vorteil nutzen. Durch natürliche Bewegung fühlen sich die Nutzer wohler mit Ihren Apps, was wiederum zu einem besseren Gesamterlebnis führt.

Zusammenfassung

  • Mit Easing-Effekt wirken Animationen natürlicher.
  • Wählen Sie ease-out-Animationen für UI-Elemente aus.
  • Vermeiden Sie ease-in- oder ease-in-out-Animationen, es sei denn, sie halten sie kurz, da sie für Endnutzer eher träge sind.

In der klassischen Animation wird Bewegung, die langsam beginnt und beschleunigt, als „langsamen“ bezeichnet und für Bewegungen, die schnell beginnen und langsamer werden, „langsamen“. Die im Web am häufigsten verwendeten Begriffe sind „ease-in“ bzw. „ease out“. Manchmal werden die beiden kombiniert, was als „ease out" bezeichnet wird. Beim Easing geht es darum, die Animation weniger schwerwiegend oder ausgeprägt zu machen.

Easing-Keywords

Mit CSS-Übergängen und Animationen können Sie das Easing auswählen, das Sie für Ihre Animationen verwenden möchten. Sie können Keywords verwenden, die sich auf das Easing (oder timing, wie manchmal auch bezeichnet) der betreffenden Animation auswirken. Sie können Ihr Easing auch komplett benutzerdefiniert anpassen, um den Charakter Ihrer App viel flexibler zum Ausdruck zu bringen.

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, mit dem Sie Übergänge mit einzelnen Schritten erstellen können. Die oben aufgeführten Keywords sind jedoch am nützlichsten, um natürliche Animationen zu erstellen.

Lineare Animationen

Animationskurve für lineare Effizienz.

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 wirken Dinge tendenziell roboterhaft und unnatürlich, und das ist etwas, das Nutzende schockierend finden. 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 Bewegung gibt.

Lineare Animation ansehen

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

transition: transform 500ms linear;

Animationen mit Ease-Out

Ease-Out-Animationskurve

Durch das Easing wird die Animation schneller gestartet als lineare Animationen. Am Ende kommt es auch zu einer Verlangsamung.

Easing ist in der Regel für die Arbeit auf der Benutzeroberfläche am besten geeignet, da Ihre Animationen dank des schnellen Starts ein Gefühl von Reaktionsfähigkeit haben und am Ende trotzdem eine natürliche Verlangsamung entsteht.

Eine ease-out-Animation ansehen

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

transition: transform 500ms ease-out;

Ease-In-Animationen

Ease-In-Animationskurve

„Easing-Animationen“ starten langsam und enden schnell, was das Gegenteil von „Easing-Animationen“ ist.

Diese Art von Animation ist wie ein schwerer Steinfall, bei dem sie langsam anfängt und mit einem erniedrigenden Klopfen schnell auf dem Boden eindringt.

In Bezug auf die Interaktion können sich Ease-Ins jedoch aufgrund ihres abrupten Endes etwas ungewöhnlich anfühlen: Dinge, die sich in der realen Welt bewegen, tendieren dazu, langsamer zu werden, anstatt einfach plötzlich zu stoppen. Ease-Ins wirken sich auch nachteilig darauf aus, dass sie sich beim Start langsam anfühlen, was sich negativ auf die Wahrnehmung der Reaktionsfähigkeit Ihrer Website oder App auswirkt.

Eine Easy-In-Animation ansehen

Ähnlich wie bei Easy-In-Animationen und linearen Animationen können Sie das entsprechende Keyword verwenden:

transition: transform 500ms ease-in;

Ease-In-Out-Animationen

Animationskurve für Ease-In-Out

Das Ein- und Ausfahren ist mit dem Beschleunigen und Verlangsamen eines Autos vergleichbar und kann mit Bedacht eingesetzt werden, um einen dramatischeren Effekt zu erzielen.

Verwenden Sie keine zu lange Animationsdauer, da der Start der Animation langsam ist. Ein Wert im Bereich von 300 bis 500 ms ist normalerweise geeignet, aber die genaue Zahl hängt stark von der Atmosphäre Ihres Projekts ab. Aufgrund des langsamen Starts, des schnellen mittleren und des langsamen Endes ist jedoch der Kontrast in der Animation höher, was für die Nutzer recht zufriedenstellend sein kann.

Eine ease-in-out-Animation ansehen

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

transition: transform 500ms ease-in-out;