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 wie 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.
