Wählen Sie das passende Easing für Ihr Projekt aus: Easing-In-Easing, -Out-Effekt oder beides. Für noch mehr Spaß kannst du mit Absprüngen sogar noch mehr Spaß haben.
Nachdem Sie die verschiedenen Optionen für das Easing in Animationen erörtert haben, welche Art von Easing sollten Sie in Ihren Projekten verwenden und welche Dauer sollten Ihre Animationen haben?
Zusammenfassung
- Verwenden Sie für UI-Elemente ease-out-Animationen. Eine Quintic ease-out-Animation ist sehr nett, wenn auch schnell.
- Achten Sie darauf, die Dauer der Animation zu verwenden. ease-outs und ease-ins sollten zwischen 200ms und 500ms liegen, während Bounces und elastische eases mit einer längeren Dauer von 800 bis 1200 ms takten.
Grundsätzlich ist ein Ease-Out die richtige Entscheidung und eine gute Standardmethode. Er ist schnell gestartet und gibt Ihren Animationen ein Gefühl von Reaktionsschnelligkeit, was wünschenswert ist, aber mit einer etwas langsameren Verlangsamung am Ende.
Es gibt eine Gruppe bekannter Easing-Gleichungen, die über die mit dem Keyword ease-out in CSS angegebene Gleichung hinausgehen und deren „Aggressivität“ liegt. Für einen schnellen ease-out-Effekt könnten Sie einen Quintic ease-out in Betracht ziehen.
Eine Quintic Ease-Out-Animation ansehen
Andere Easing-Gleichungen, insbesondere Sprünge oder elastische Elastizitäten, sollten sparsam und nur dann verwendet werden, wenn sie für Ihr Projekt geeignet sind. Es gibt wenige Dinge, die Nutzende aus einer User Experience rausholen, z. B. eine schillernde Animation. Wenn Ihr Projekt nicht Spaß macht, achten Sie darauf, dass keine Elemente um die Benutzeroberfläche herumhüpfen. Wenn Sie hingegen eine ungezwungene Website erstellen, sollten Sie auf jeden Fall Absprünge verwenden.
Probieren Sie verschiedene Erleichterungen aus, finden Sie heraus, welche davon zur Persönlichkeit Ihres Projekts passen, und legen Sie los. Eine vollständige Liste der Easing-Typen sowie Demos finden Sie unter easings.net.
Die richtige Animationsdauer auswählen
Animationen, die Ihrem Projekt hinzugefügt werden, müssen unbedingt die richtige Dauer haben. Wenn die Animation zu kurz ist, wirkt sie aggressiv und scharf, zu lang und die Inhalte störend und störend.
- Ease-Outs: ca. 200–500 ms So kann das Auge die Animation sehen, aber sie wirkt nicht störend.
- Ease-Ins: ca. 200–500 ms Bedenke dabei, dass es am Ende ruckelt und keine Menge Zeitänderungen diesen Einfluss abmildern wird.
- Sprünge- oder elastische Effekte: ca. 800–1.200 ms Sie müssen etwas Zeit einplanen, damit sich der elastische oder hüpfende Effekt „pendelt“. Ohne diese zusätzliche Zeit wäre der hüpfende, hüpfende Teil der Animation aggressiv und unangenehm für das Auge.
Dies sind natürlich nur Richtlinien. Experimentiere mit deinen eigenen Möglichkeiten und entscheide selbst, was sich für deine Projekte am besten eignet.