Staggering Animations

Der folgende Beitrag wurde von David DeSandro verfasst. David wollte eine neue Funktion in Isotope anbieten: gestaffelte Animationen. Wie bei vielen Dingen im Web gibt es viele Wege, wie er es hätte angehen können. Hier betrachtet er einige der Möglichkeiten, die Vor- und Nachteile jeder einzelnen und was er sich letztendlich für Isotope entschieden hat.

Betrachten Sie diesen filmischen Seinfeld-Moment

Das Bild von George, der durch eine Gruppe Möwen rennt, rührt die Emotionen. Die Energie in seiner Entschlossenheit wird durch die aufwallende Energie der Vögel gematcht. Wie können wir also mit dieser Art von Energie animieren?

Schauen Sie sich diese Möwen noch einmal an. Es liegt nicht daran, dass es viele sind. Die Vögel fliegen einzeln auf. Während jeder einzelne fliegt, wächst ihre Zahl und die Emotion hebt mit ihnen ab. Mach weiter, George!

Anstatt eine Gruppe von Elementen gleichzeitig zu animieren, können wir denselben Effekt erzielen, indem wir die Animationen staffeln. Wenn die Animation jedes Elements schrittweise verzögert wird, erscheinen sie als Einzelne, bewegen sich aber dennoch kollektiv als Ganzes. Das Ergebnis ist fesselnd und wirkt lebensechter.

Ich habe kürzlich Isotope v3 mit neuen gestaffelten Elementübergängen veröffentlicht.

Sehen Sie sich den Pen Isotope – stagger von David DeSandro (@desandro) auf CodePen an.

Während Elementübergänge einfach einzurichten sind, können sie schwierig zu verwalten sein. Viele Animationen in unterschiedlichen Intervallen auszuführen, wird komplex. Lassen Sie uns also untersuchen, wie Elementübergänge gestaffelt werden.

Wir verwenden für unser Beispiel eine einfache Animation: eine Gruppe von Elementen horizontal bewegen. Die Elemente haben CSS transition: transform 0.4s;. Sie bewegen sich durch Umschalten der Klasse .is-moved. Die erste Demo bewegt alle Elemente gleichzeitig.

Sehen Sie sich den Pen single transition von David DeSandro (@desandro) auf CodePen an.

setTimeout

Wir können setTimeout verwenden, um das Auslösen der Übergänge zu staffeln. setTimeout startet den Übergang später mit einer Verzögerung in JavaScript.

Sehen Sie sich den Pen setTimeout von David DeSandro (@desandro) auf CodePen an.

Das sieht tatsächlich ziemlich gut aus. Um die Animation fein abzustimmen, möchte ich, dass sich die Elemente ohne Überschneidung bewegen. Elemente auf der rechten Seite beginnen sich also zuerst zu bewegen, wenn sie nach rechts gehen. Elemente auf der linken Seite beginnen sich zuerst zu bewegen, wenn sie nach links gehen. Wir müssen die setTimeout-Verzögerung umkehren, wenn wir nach rechts gehen.

Sehen Sie sich den Pen setTimeout, forward & reversed von David DeSandro (@desandro) auf CodePen an.

Nicht schlecht! Aber nun kommt die Hauptprüfung jedes Animationssystems: Was passiert, wenn eine Änderung ausgelöst wird, während animiert wird? Dieser Randfall wird zu oft übersehen. Jeder Anfänger-Entwickler kann eine Animation hinzufügen. Aber wenn Sie sich um Ihre Benutzer kümmern, sollten Ihre Animationen sofort auf Aktionen reagieren. Animationen sollten die Aktionen Ihrer Benutzer nicht beeinträchtigen.

Versuchen Sie, auf die Schaltfläche zu klicken, während sie gerade animiert wird, um zu sehen, was passiert.

Es funktioniert. Alle Elemente landen dort, wo sie sein sollen. Aber ich mag nicht, wie es sich verhält. Es sieht so aus, als wären die Elemente verwirrt. Probieren Sie auch die nicht umgekehrte Demo aus.

Der vorwärts/umgekehrte Übergang läuft durch alle Elemente. Das ist nicht gut. Die Animation läuft immer noch, nachdem der Benutzer seine Aktion bereits umgekehrt hat.

transition-delay

Versuchen wir etwas anderes. Wir verwenden bereits CSS-Übergänge, daher ist es sinnvoll, transition-delay zu verwenden. Diese Demo verwendet JavaScript, um das schrittweise transition-delay in JS festzulegen (aber Sie könnten auch CSS-Präprozessor-Logik verwenden, wenn das Ihr Ding ist). Der Übergang wird für alle Elemente gleichzeitig ausgelöst, aber ihre Verzögerung unterscheidet sich durch ihren transition-delay-Wert.

Sehen Sie sich den Pen transitionDelay von David DeSandro (@desandro) auf CodePen an.

Wir können die Verzögerung umkehren, um ein ähnliches Verhalten beim Bewegen nach links und rechts zu erzielen, genau wie bei der setTimeout-Demo.

Sehen Sie sich den Pen transitionDelay, forward & reversed von David DeSandro (@desandro) auf CodePen an.

Beim Starten-Stoppen verhält sich diese transition-delay-Demo anders. Die vorwärts/umgekehrte Demo stoppt für einen Moment.

Das könnte funktionieren, aber sein Verhalten ist immer noch nicht ideal.

Frame-basierte Animation

Es gibt noch eine weitere Methode, die wir ausprobieren können: frame-basierte Animation. Mit requestAnimationFrame können wir steuern, wie jeder Übergang ausgelöst wird und wann er ausgelöst wird.

Sehen Sie sich den Pen frame animation von David DeSandro (@desandro) auf CodePen an.

Es hat ein perfektes Verhalten. Starten-Stoppen kehrt die Animation genau dort um, wo sie sich befindet, sodass keine Verzögerung und keine zusätzlichen Übergänge auftreten. Aber dieses schöne Ergebnis geht auf Kosten der Komplexität. Diese Demo erfordert doppelt so viel JavaScript, mit einer Animationsschleife, die jedes Frame durchlaufen muss.

---

Wenn Sie Animationen staffeln möchten, haben Sie also Optionen.

• setTimeout funktioniert, ist aber schwer abzubrechen.
• transition-delay funktioniert, kann aber Verzögerungen haben.
• requestAnimationFrame funktioniert, erfordert aber mehr JavaScript.

Und es gibt noch viele weitere Lösungen: CSS-Animationen, jQuery .animate(), GreenSock, D3, und so weiter. Alle diese Lösungen können für gestaffelte Animationen verwendet werden. Aber ich ermutige Sie, zu untersuchen, wie gut sie sich bei Randfällen halten, wenn Benutzeraktionen während der Animation auftreten.

Bei der Arbeit an Isotope habe ich mich für die transition-delay-Technik entschieden. Sie bot das beste Maß an Kontrolle, ohne zu viel Komplexität. Jetzt können Isotope-Benutzer das letzte Schliff an ihrer Benutzeroberfläche vornehmen und ihre Erlebnisse auf ein neues Niveau heben. Wie ein Costanza, der seinen Träumen nachjagt.