GRUNDLEGENDE THEORIE
DER WEBANIMATION

Es gibt funktionale Animationen, die die Schnittstelle intuitiver und benutzerfreundlicher machen. Diese Art von Animation wird bei Produktoberflächen und mobilen Apps verwendet. Und es gibt dekorative Animationen, die meist auf Landingpages oder speziellen Projekten verwendet werden und dazu dienen, die Aufmerksamkeit des Betrachters zu erregen, das Projekt interessanter zu machen und bestimmte Emotionen hervorzurufen.

Die Animationsgeschwindigkeit spiegelt das Verhältnis zwischen der von einem Element zurückgelegten Strecke und der dafür benötigten Zeit wider. Zur Geschwindigkeit gehören auch alle Veränderungen, die das Element von Anfang bis Ende durchläuft. Dies ist eine der wichtigsten Komponenten der Animation, da sie für die Gesamtdynamik und die Stimmung verantwortlich ist, die Sie zu erzeugen versuchen. Die Erstellung von Animationen ist ein ziemlich kreativer Prozess, bei dem man schnell feststellen wird, dass er sich nicht so sehr von der Regiearbeit bei einem eigenen Film unterscheidet.

Bei der Gestaltung einer Animation ist es wichtig, sich Gedanken zu machen:

• Wie lange es dauern wird
• Die Geschwindigkeit, mit der der Animationseffekt abläuft
• Mit welcher Geschwindigkeit das Element die Bewegung beginnt und beendet

Welche Dauer sollte man wählen, damit die Animation ordentlich aussieht? Darauf gibt es keine genaue Antwort. Wichtig ist, dass der Benutzer nicht auf das Ergebnis der Bewegung warten muss, aber auch, dass die Animation nicht zu schnell ist. Der Betrachter sollte Zeit haben, um zu verstehen, wo das Element auf dem Bildschirm erschienen ist und wie es an eine neue Stelle gelangt ist. Generell sollte sich die Animation natürlich anfühlen.

Dynamischere Animationen eignen sich für das Erscheinen kleiner Elemente wie Texte, Listen, Karten oder Schaltflächen. Große Elemente werden normalerweise sanfter animiert. Die Dauer hängt auch davon ab, wie viel Platz die Animation in Anspruch nimmt. Eine hohe Geschwindigkeit eignet sich eher für Mikrobewegungen, denn je höher die Geschwindigkeit, desto mehr Aufmerksamkeit erfordert sie und lenkt den Benutzer vom restlichen Inhalt ab.

Die Bewegungsdistanz in Web-Animationen ist normalerweise kurz:

• Elemente, die sich aus der Transparenz ergeben (Karten, Listen, Bilder)
• Hover-Effekte (Animation bei Mausverschiebung) für Schaltflächen und Karten: Zoom, Verschieben, Farbwechsel
• Pop-up (z. B. Fotovergrößerung)
• Animierte Diashow

Obwohl die Animationsparameter je nach Projekt variieren können, folgt die Animationsgeschwindigkeit in der Regel einer universellen Reihe von Regeln. Innerhalb der unten angegebenen Grenzen ist die Animation am angenehmsten wahrzunehmen. Verwenden Sie sie als Leitfaden und Sie werden nichts falsch machen.

Dies ist der durchschnittliche Wertebereich für die Animation der meisten Elemente, nicht zu schnell und nicht zu langsam. Dieser Bereich ist ausreichend, um Text, Kacheln, Listen und dekorative Elemente zu animieren. Erhöhen wir das Intervall:

Ein Intervall von 0,1 Sekunden wird als Augenblick wahrgenommen und eignet sich daher für kleine Elemente und Bewegungen (Hovering, Umschalten von Tabs, Swiping in Galerien), während Animationen, die länger als eine Sekunde dauern, ermüdend wirken. Es ist ratsam, darauf zu achten, dass Sie die Animation nicht auf ein wichtiges Element der Webseite anwenden.

Diese Zahlen wurden in einer Studie der Neilson Norman Group (einem Forschungs- und Beratungsunternehmen für Benutzererfahrungen) und dem Model Human Processor ermittelt.

Wenn die Eigenschaften eines animierten Elements den Eigenschaften von physischen Objekten ähneln, sind sie leichter wahrzunehmen. Diese Animationen sind besser vorhersehbar, weshalb sie kein Unbehagen hervorrufen.

Sie helfen, bestimmte Assoziationen und Emotionen auszulösen, die dem Nutzer vertraut sind. Eine der wichtigsten Möglichkeiten, ein natürliches Gefühl zu erreichen, besteht darin, sich vorzustellen, wie sich ein physisches Objekt verhalten würde, wenn es sich wie Ihre Animation bewegen würde. Wie wirkt sich das auf die Geschwindigkeit aus?

• Zum Beispiel bewegen sich identische Elemente unterschiedlich, wenn sie unterschiedliche Entfernungen zurücklegen. Wenn sich Elemente bewegen, hält dasjenige mit der kürzesten Strecke zuerst an.
• Elemente mit unterschiedlicher Masse bewegen sich auch unterschiedlich, wobei sich die größeren Elemente tendenziell langsamer bewegen. Wäre es ein physisches Objekt, würde seine Masse es daran hindern, sich schneller zu bewegen.

Diese Regeln sind eng mit unserer Wahrnehmung verbunden. Es ist wichtig, sich daran zu erinnern, dass physische Objekte immer einen Anfang und ein Ende ihrer Bewegung haben. An einem bestimmten Punkt beschleunigen sie (z. B. am Anfang, wenn sie geschoben werden) und an einem bestimmten Punkt verlangsamen sie sich (z. B. am Ende des Weges). Die Webanimation vermittelt diese Eigenschaften mit Hilfe von Easing.

Easing ist die wichtigste Technik bei der Gestaltung von Animationen, da sie den Elementen Authentizität, Charakter und Dynamik verleiht.

Easing wird in der Regel durch ein Diagramm dargestellt, das das Verhältnis zwischen der Bewegungsdistanz (Y-Achse) und der Zeit, die zum Zurücklegen dieser Distanz benötigt wird (X-Achse), abbildet. Wenn man lernt, sie richtig zu lesen und zu komponieren, hilft das den Designern, dem Entwickler die Aufgabe klarer zu erklären.

Lineare Bewegungen wirken am unnatürlichsten. Stellen Sie sich vor, dass sich die Geschwindigkeit des Elements während der gesamten Animation nicht ändert, als ob es keine Schwerkraft und Reibung gäbe. Eine solche Animation wirkt künstlich und einfach schlampig.

Es gibt mehrere Arten von Lockerungseffekten. Sie durchzugehen und zu lernen, sie in Ihren Projekten anzuwenden, wird sich definitiv als nützlich erweisen. Im Folgenden finden Sie die gängigsten Beispiele für Lockerungseffekte und ihre Diagramme:

Diese Art der Lockerung ist die häufigste. Ease-In-Out-Übergänge bestehen aus einer sanften Beschleunigung eines Elements am Anfang und einer Verlangsamung am Ende der Bewegung. Auf diese Weise sehen Animationen am natürlichsten aus: Das Element beschleunigt, vollendet die Bewegung und kommt zum Stillstand.

In diesem Fall beschleunigt das Element am Anfang und hat eine konstante Animationsgeschwindigkeit. Diese Art der Animation sieht aus wie ein Raketenstart.

Bei Ease-Out-Animationen hat das Element am Anfang eine ausgeprägte schnelle Bewegung und am Ende eine sanfte Stoppbewegung.

Mit der asymmetrischen Lockerung können Sie subtilere Einstellungen vornehmen, um physikalische Eigenschaften genau darzustellen. In diesem Fall haben die Beschleunigungs- und Verzögerungspunkte ihre eigene Dynamik, und die Graphen mit den Animationskurven können völlig unterschiedlich aussehen. Zum Beispiel kann ein Element am Anfang eine sanfte Beschleunigung und am Ende einen schnellen Stopp haben.

Wenn Objekte zusammenstoßen, können sie aneinander abprallen oder sich in verschiedene Richtungen ausdehnen. Im Animationsdesign werden diese Effekte als "Bounce" und "Elastic" bezeichnet. Diese Effekte lassen die Bewegung natürlich aussehen.

Die Bewegungsamplitude hängt von der Gesamtidee des Projekts ab. Vergleichen Sie beim Entwerfen Ihr Element mit einem physischen Objekt, um genau zu sehen, wie die Animation aufgebaut werden soll. Wenn Sie den Effekt eines springenden weichen Balls erzielen möchten, muss die Beschleunigung des Elements sanft sein, während das Abprallen von der Oberfläche groß sein muss. Stellt man sich dagegen eine fallende Metallkugel vor, so wird sie viel schneller fallen, während ihr Abprallen kaum wahrnehmbar sein wird.

Die Lockerheit der Animation, der Bounce und die Geschwindigkeit sorgen für eine gewisse Dynamik. Wenn Sie lernen, diese Werkzeuge zu verwenden, wissen Sie, wie Sie den richtigen Ton für Ihre Animation setzen können.

Bezier-Kurven werden verwendet, um die Beschleunigung eines Elements darzustellen. Eine Bezier-Kurve ist eine mathematische Kurve in einem Diagramm mit den Achsen Y (Entfernung) und X (Geschwindigkeit), die die vom Element im Raum zurückgelegte Entfernung und die dafür benötigte Zeit wiedergeben. Durch Anpassen der Kurve können Sie einstellen, wie schnell das Element verschiedene Teile seines Weges zurücklegt.

Es gibt zwei Arten von Bezier-Kurven: quadratische und kubische. Die Koordinaten des ersten und des letzten Punktes sind klar definiert, sie liegen auf der Kurve. Die anderen Punkte sind einstellbar und liegen außerhalb der Linie. Durch das Verschieben der Punkte wird die Kurve transformiert, wodurch eine glatte Form entsteht.

Um zu lernen, wie man Diagramme liest und zu verstehen, wie die Winkel auf der Kurve die Dynamik der Bewegung zeigen, wollen wir zwei ähnliche, aber leicht unterschiedliche Diagramme zeichnen.

Es gibt keine allgemeingültigen Werte für Punkte auf einer Kurve, die eine perfekte Animation ergeben würden. Wichtig ist hier, dass Sie experimentieren und allmählich herausfinden, welche Bewegungsdynamik für den jeweiligen Fall geeignet ist. Sobald Sie gelernt haben, Diagramme zu lesen, können Sie dieses Wissen professioneller einsetzen. Um Ihnen das Leben etwas zu erleichtern, finden Sie hier einige Dienste, die Designern bei der Visualisierung von Animationen helfen:

cubic-bezier
Dieser Dienst hilft Ihnen, die Kurve zu bewegen, ihre Einstellungen zu reproduzieren und das gewünschte Ergebnis zu speichern. Um die Übergabe des Animationsprojekts an das Entwicklungsteam zu vereinfachen, können Sie die Werte der Koordinatenpunkte kopieren und mit dem Entwickler teilen.

easings.net
Dieser Dienst enthält fertige Animationsprojekte, die sich als vorgefertigte Beispiele mit den richtigen Werten als nützlich erweisen können.

Es gibt verschiedene Arten von Animationen auf Tilda. Unter Zero Block gibt es ein fortgeschrittenes Werkzeug für Designer, mit dem Sie benutzerdefinierte Animationseffekte einrichten können, und es gibt Basisblöcke mit voreingestellten grundlegenden Animationseffekten.

Mehr über Animationen auf Tilda erfahren Sie hier.

Wir wollten auch nicht-professionellen Designern die Möglichkeit geben, ihren Projekten coole Animationen hinzuzufügen, und haben deshalb den Blöcken voreingestellte Animationen hinzugefügt. Die Einstellungen, die wir dafür verwendet haben, sind unserer Meinung nach perfekt ausbalanciert und bleiben dennoch universell. Alles, was Sie tun müssen, ist, die Animation für das gewünschte Element (Überschrift, Unterüberschrift usw.) im Einstellungsfeld des Blocks zu aktivieren.

Die Animationen wurden von unseren Designern zusammengestellt. Die Geschwindigkeit ist weder zu schnell noch zu langsam, und die Elemente folgen einander in Harmonie. Schauen wir uns die Funktionsweise der Animationseinstellungen von Tilda am Beispiel eines der Cover an:

Im Beispiel haben wir allen Elementen denselben Animationsstil zugewiesen, der von unten erscheint, um die Bewegung deutlicher zu machen.

Wir haben darauf geachtet, dass wir herausfinden, mit welcher Geschwindigkeit die Elemente nacheinander erscheinen, mit welcher Verzögerung und mit welcher Verschiebung. Wenn Sie sich die Werte auf dem Cover oben genau ansehen, können Sie das erkennen:

• Das erste Element, das erscheint, ist das größte (die Überschrift ist das größte, daher ist sie das Schlüsselelement)
• Auf den Titel folgt eine Beschreibung, die jedoch von untergeordneter Bedeutung ist. Die Animationsgeschwindigkeit ist hier höher.
• Die Schaltfläche erscheint zuletzt, und sie erscheint schneller als die beiden Texte.

Der Easing-Stil ist für alle Elemente mit voreingestellter Animation gleich:

Das Diagramm zeigt, dass die Elemente am Anfang schnell beschleunigen und am Ende allmählich abnehmen.

Die Choreografie trägt zum Rhythmus in der Animation bei. Dieser ist dem musikalischen Rhythmus ähnlich, da er den Charakter des Werkes bestimmt. Wichtig ist dabei, dass die Bewegungen in der Animation klar definiert und nicht monoton sind (mit dem gleichen Zeitabstand zueinander).

Parallele Animation. Animationselemente, die die gleiche Geschwindigkeit und Zeit haben, so dass sie wie eine Gruppe aussehen.

Verzögerte Animation. Dies bezieht sich auf eine Animation, die eine kleine Verzögerung zwischen den erscheinenden Elementen enthält, wobei sich das nächste Element etwas schneller bewegt als das vorherige. Damit die Elemente immer noch zur selben Gruppe gehören, muss das Verzögerungsintervall klein sein (z. B. 0,3 Sekunden).

Elementgruppierung. Sie können Elemente gruppieren und parallele und verzögerte Animationen kombinieren. So können Sie zum Beispiel alle Texte in der Kopfzeile gleichzeitig erscheinen lassen und die Schaltflächen verzögert erscheinen lassen.

Die Reihenfolge der Animation hängt von der Bedeutung des Elements ab, da es gleichwertige Elemente und Schlüsselelemente gibt.

Der visuelle Schwerpunkt wird auf das Schlüsselelement gelegt, während der Rest so weit wie möglich vereinheitlicht wird. Zum Beispiel kann die Überschrift der Seite das Hauptelement sein, während Unterüberschriften und Bilder zweitrangig sind. Eine Möglichkeit, das Schlüsselelement hervorzuheben, besteht darin, die Überschrift zuerst zu zeigen, gefolgt von einer Pause und dem Erscheinen der sekundären Elemente in einem langsameren Rhythmus.

Auf einer Webseite handelt es sich in der Regel um Listen, Fotogalerien, Muster, Elemente mit einem ähnlichen Zweck. Sie können zusammen oder nacheinander erscheinen. Wenn sie nacheinander erscheinen, sollte die Animation des Erscheinungsbildes dieselbe sein.

Die Fotos in einer Galerie sind Teil derselben Einheit. Es ist wichtig, dass die Aufmerksamkeit des Betrachters nicht zerstreut wird. Sie müssen dafür sorgen, dass die Animation einfach, einheitlich und schnell genug ist.

Diese Art von Animation ist nicht dazu gedacht, die Aufmerksamkeit zu erregen, da sie nur für Dynamik beim Scrollen der Seite sorgt. Eine gute Technik, um die verschiedenen Elemente in einer Gruppe visuell zusammenzufassen, besteht darin, die Animation des zweiten Elements vor dem Ende der ersten Animation zu starten. Zum Beispiel:

Schlüsselelemente hingegen geben den Ton an und lenken die Aufmerksamkeit des Nutzers. Dies kann entweder ein Element oder mehrere Elemente sein (die dann in Gruppen zusammengefasst werden). Sie können zum Beispiel eine große, helle Überschrift erstellen, die schnell und ohne Verzögerung erscheint, aber am Ende langsamer wird. Die anderen Elemente können gleichmäßig und nach der Überschrift erscheinen, aber mit einer langen Verzögerung.

Animationen sind ein Mittel, um Ausdruck zu verleihen, zu betonen und die Aufmerksamkeit zu steuern. Sie ist ein sehr mächtiges Werkzeug, das oft ungeschickt eingesetzt wird. Wenn es um Animation geht, ist die Versuchung oft groß, alle Techniken, die man kennt, in einem Projekt anzuwenden. Das geht in der Regel schief, da der Schwerpunkt der Aufmerksamkeit des Betrachters durch die Bewegung der Bilder und Texte verlagert wird und das Eintauchen in den Inhalt sehr schwierig wird. Woher weiß man also, ob man es nicht übertreibt?

Die Ausgewogenheit der Animation im Projekt bezieht sich auf die Anzahl der animierten Elemente, die beim Betrachten der Seite kein kontroverses Gefühl hervorrufen. Zu viele Animationen hinzuzufügen ist ein häufiger Fehler. Um nicht am Ende unnötige Animationen zu entfernen, ist es besser, zu Beginn festzulegen, wie viele Animationen Sie benötigen, und sich dabei an den folgenden Regeln zu orientieren:

Animieren Sie nicht alle Elemente in Ihrem Projekt. Eine zu starke Dynamik ermüdet Sie und lenkt den Blick des Betrachters ab. Bestimmen Sie zunächst die hervorzuhebenden Elemente, zwei sind in der Regel ausreichend. Zum Beispiel Überschriften und Galeriefotos.

Kontrollieren Sie die Qualität. Wenn Sie einem Projekt eine Animation hinzufügen, müssen Sie sicherstellen, dass sie ordnungsgemäß funktioniert und nicht einfriert. Animationen benötigen viele Systemressourcen und werden bei hoher CPU-Belastung nur langsam oder mit Unterbrechungen funktionieren. Die Benutzer werden alles andere als beeindruckt sein und es wird keinen "Wow"-Faktor geben. Daher ist es wichtig, dass Sie:

• Nicht zu viele Elemente animieren
• Testen Sie die Website auf leistungsschwachen Computern
• Verwenden Sie anstelle der gleichzeitigen Animation mehrerer Elemente eine Sequenz mit einer kurzen Verzögerung
• Laden Sie keine schweren Bilder auf die Website hoch

Behalten Sie die Hierarchie bei. Wenden Sie die gleiche Animation auf Elemente mit dem gleichen Wert auf der gesamten Website an. Zum Beispiel:

• Gleicher Stil für das Erscheinungsbild der Überschrift
• Gleicher Hover-Stil (z. B. das Aussehen des Schattens unter der Schaltfläche beim Mausschweben)

Behalten Sie den Stil bei. Wenden Sie denselben Animationsstil auf die Hierarchie an. Sie können zum Beispiel festlegen, dass alle Abschnittsüberschriften von unten eingeblendet werden, während Bilder und Beschriftungen von der Seite eingeblendet werden.

Eine begrenzte Anzahl von Animationen hilft Ihnen, zu vermeiden, dass Sie es übertreiben und die Stile anfangs verwirren. Vergewissern Sie sich unbedingt, dass die Mindestmenge an Animationen auf der Seite für Sie nicht ausreicht, und versuchen Sie erst dann, mehr hinzuzufügen.

Animationen machen ein Projekt interessanter und unterstützen seinen Stil, seine Stimmung und seinen Charakter. Aber sie kann auch nachteilig sein, wenn man die Grundregeln nicht beachtet: