Wählen Sie das passende Easing für Ihr Projekt aus, d. h. das Easing in, aus oder beides. Für noch mehr Spaß können Sprünge oder Sprünge verwendet werden.
Nachdem Sie nun die verschiedenen Easing-Optionen für Animationen besprochen haben, welche Art von Animation sollten Sie in Ihren Projekten verwenden und welche Länge sollten Ihre Animationen haben?
Zusammenfassung
- Verwenden Sie easeout-Animationen für UI-Elemente. ein Quintic ease-out ist eine sehr schöne, wenn auch schnelle, einfache Methode.
- Verwenden Sie auf jeden Fall die Animationsdauer, ease-outs und ease-ins sollten zwischen 200 ms und 500 ms liegen, während Bounces und elastische Elastic-ease-ins eine längere Dauer von 800 ms bis 1.200 ms haben.
Im Allgemeinen ist ein easeout die richtige Wahl und sicherlich eine gute Standardeinstellung. Der Einstieg ist schnell, sodass Ihre Animationen responsiv wirken, was zwar wünschenswert ist, jedoch mit einer deutlichen Verlangsamung am Ende.
Neben der mit dem Schlüsselwort ease-out in CSS angegebenen Gleichung gibt es noch eine Reihe bekannter easeout-Gleichungen, die hinsichtlich ihrer "Aggressivität" reichen. Wenn Sie einen schnellen ease-out-Effekt erzielen möchten, sollten Sie einen Quintic ease-out in Betracht ziehen.
Sieh dir eine Quintic-Ease-Out-Animation an
Andere Easing-Gleichungen, insbesondere Absprünge oder elastische Elastizitäten, sollten sparsam und nur dann angewendet werden, wenn sie für Ihr Projekt geeignet sind. Es gibt einige Dinge, die Nutzende aus einem Erlebnis herausholen, z. B. eine irritierende Animation. Wenn Ihr Projekt nicht Spaß machen soll, dann sollten keine Elemente über die Benutzeroberfläche hüpfen. Wenn Sie hingegen eine Website erstellen, die unkompliziert sein soll, sollten Sie auf jeden Fall Absprünge verwenden.
Experimentieren Sie ganz einfach, finden Sie heraus, welche 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 Sie Ihrem Projekt hinzufügen, müssen unbedingt die richtige Dauer haben. Wenn die Animation zu kurz ist, wirkt sie aggressiv und scharf. zu lang und stört, wenn er stört.
- Ease-Outs: etwa 200–500 ms So hat das Auge die Möglichkeit, die Animation zu sehen, aber sie fühlt sich nicht behindert an.
- Ease-Ins: etwa 200–500 ms Vergessen Sie nicht, dass es am Ende zu einem Ruck führt und dass der Effekt nicht durch Veränderungen des Timings abgemildert wird.
- Bounce- oder elastische Effekte: etwa 800 ms bis 1.200 ms. Es muss einige Zeit dauern, bis sich der elastische Effekt oder das Sprungverhalten „siegelt“ hat. Ohne diese zusätzliche Zeit wäre der elastische hüpfende Teil der Animation aggressiv und unangenehm für das Auge.
Natürlich sind dies nur Richtlinien. Experimentiere mit deinen eigenen Möglichkeiten und wähle aus, was für deine Projekte richtig ist.