Ease oder Easing

Sichtbar ist hier, dass die Bewegung am «Ziel» verlangsamt wird. Der Bewegungsablauf wird intuitiv auf die spezifische Situation angepasst.

Wenn wir die Bewegungen der Dinge um uns herum beobachten sehen wir, dass sich ihre Bewegungen beschleunigen oder verlangsamen. Dies nehmen wir als natürliche und harmonische Bewegungen war. Lineare Bewegungen wirken auf uns unnatürlich und mechanisch. Deshalb müssen wir bei Animationen und Transitions darauf achten, Bewegungen so natürlich wir möglich zu gestalten um ein positives Benutzererlebnis zu bewirken.

Der Fachbegriff dafür ist Easing

Easing bedeutet: Entspannung, Lockerung, Nachlassen, Beruhigung
Easing Functions – Übergangsfunktionen

Grundregeln

  • Wählen Sie Easing Functions damit Ihre Animationen natürlicher wirken.
  • Wählen Sie einfache Animationen mit Easing Functions für UI-Elemente.
  • Für einfache Animationen werden Easy- oder Ease-Out bevorzugt. Vermeiden Sie Ease-In- oder Ease-In-Out-Animationen, es sei denn, Sie können sie kurz halten. Sie fühlen sich für Endbenutzer eher träge.

Grundlagen