Wie man Animationen entwirft

Animation ist ein Graph

• Um sie zu entwerfen, muss sie reproduzierbar und kombinierbar sein.
• Jede Animation ist letztlich eine Änderung von Werten in Abhängigkeit von irgendeiner Eingabe (Zeit, Scrollen, Mausposition usw.), und diese Änderung lässt sich als Graph darstellen.
• Die Form des Graphen bestimmt direkt das Gefühl der Bewegung, und das Werkzeug, mit dem sich diese Kurve gezielt formen lässt, ist die Mathematik.

Mathematische Werkzeuge

• Bezier-Kurven (Easing): Ausdruck von Beschleunigung und Verzögerung mit festgelegtem Anfang und Ende. Das Prinzip dabei ist, dass zwei Kontrollpunkte die Kurve wie Magneten anziehen. Entsteht durch rekursive Anwendung linearer Interpolation. Selbst bei derselben Bewegung verändert ease-in oder ease-out den vermittelten Eindruck vollständig.
• Exponentielle Annäherung: Mit der einen Zeile value += (target - value) * factor lässt sich ein Zielwert weich verfolgen. Bleibt auch dann natürlich, wenn sich das Ziel in jedem Frame ändert. Wird etwa für Cursor-Following, Zähler oder Progress Bars verwendet.
• Feder: Gedämpfte Schwingung auf Basis von zwei Kräften: Rückstellkraft und Dämpfung. Das Gefühl wird durch die beiden Werte stiffness und damping bestimmt. Anders als bei Easing gibt es keine duration; wenn sich das Ziel ändert, erfolgt der Übergang natürlich bei Beibehaltung der aktuellen Geschwindigkeit.
• Physiksimulation: Kombination physikalischer Gesetze wie Gravitation, Kollision und Reibung. Der Kern ist: "Wenn man nur die Regeln definiert, entsteht die Bewegung von selbst." Für Konfetti müssen zum Beispiel nicht die einzelnen Bahnen von Dutzenden Objekten entworfen werden; es genügt, Gravitation und Luftwiderstand zu setzen. Allerdings ist die Vorhersagbarkeit geringer, daher eher für unterstützende Effekte als für zentrale UI-Übergänge geeignet.
• atan2: Eine Funktion zur Bestimmung der Richtung zwischen zwei Punkten. Nützlich etwa, damit ein Element in Bewegungsrichtung schaut oder für 3D-Tilt-Effekte, bei denen sich eine Karte zur Cursor-Richtung neigt.
• Trigonometrische Funktionen: Ideal für periodische Wiederholungen. Gibt man mehreren Elementen Phasenunterschiede, entsteht ein Welleneffekt. Zum Beispiel für Typing-Indikatoren oder schwebende Hintergründe.
• Sägezahnwelle: Anders als die weiche Hin-und-her-Bewegung von sin ist dies eine gerichtete Wiederholung, die von 0→1 läuft und sofort zurückgesetzt wird. Eignet sich für Pulse Rings, Pings oder wiederholte Progress-Anzeigen.

Komplexe Animationen entwerfen

• Stückweise Funktionen: Komplexe Kurven werden in Abschnitte zerlegt, jeder Teil separat entworfen und dann zusammengesetzt. So ist eine feinere absichtliche Steuerung als mit einer Physiksimulation möglich (z. B. die Höhe eines Bounces gezielt zu verringern).
• Abhängigkeiten erkennen: Der Ausgangspunkt beim Entwurf von Animationen ist die Frage: "Wovon hängt der Wert ab?" Man kann in drei Typen einteilen: zeitbasiert (am häufigsten), wertbasiert (Scrollen, Mausposition) und ereignisbasiert (durch Klick oder Hover ausgelöst).
• Pipelining: Die einzelnen Teile werden entlang der Zeitachse nacheinander angeordnet. Dabei lassen sich Strategien wie sequentiell, überlappend, gleichzeitig oder Stagger kombinieren. Jeder Teil kann unabhängig angepasst werden.
• Zustandsübergänge: Ein Verfahren, bei dem der nächste Schritt nicht durch die Zeit, sondern durch Bedingungen ausgelöst wird. Wenn man Übergangsbedingungen explizit angibt — wie bei Feuerwerk: Start → Explosion → Ausbreitung → Verblassen —, lässt sich das als State Machine verwalten.
• Eigenschaften trennen: Mehrere Eigenschaften (Größe, Farbe, Transparenz usw.) werden in unabhängige Tracks aufgeteilt. Dadurch müssen die Tracks nichts voneinander wissen, was Feintuning und Erweiterungen erleichtert.

Zu berücksichtigende Punkte

• Zufälligkeit: Es sollte nicht vollständig zufällig sein, sondern kontrollierte Randomness verwendet werden. Entscheidend ist, die Grenze festzulegen zwischen "Was wird kontrolliert?" und "Was überlässt man dem Zufall?"
• Bidirektionalität: Wenn sich die Richtung während des Erscheinens ändert, sollte die Animation so entworfen sein, dass sie vom aktuellen Zustand aus nahtlos umkehrt, damit keine Sprünge oder Ungelenkheit entstehen.

Grenzen und Stärken von Code-Animationen

• Für komplexe Animationen wie Charakterbewegungen oder präzises Morphing sind spezialisierte Tools wie Lottie, Rive oder Videos besser geeignet.
• Die Stärke von Code-Animationen liegt dagegen in Echtzeit-Interaktionen, die unmittelbar auf Benutzereingaben reagieren.