Ein Vergleich von Animationstechnologien

Die Frage, die mir am häufigsten gestellt wird: Welches Animationswerkzeug empfehlen Sie?

Nachdem ich mit einer Reihe davon gearbeitet habe, kann ich Ihnen sagen: Es gibt keine richtige Antwort. Es ist eine komplizierte Frage und eine komplizierte Antwort. Dieser Beitrag soll klären, was wann verwendet werden soll, damit Sie mit dem richtigen Werkzeug für die jeweilige Aufgabe arbeiten können.

Wenn Sie hier für React sind, haben wir das abgedeckt! Springen Sie zum Abschnitt React und Animation unten, und wir werden aufschlüsseln, was und wie Sie es verwenden sollten.

Es ist unmöglich, jede einzelne Animationsbibliothek durchzugehen, daher werde ich mich auf die beschränken, die ich entweder verwendet habe oder die mich interessieren. Bitte beachten Sie, dass dies meine Empfehlungen sind, die auf meinen eigenen Erfahrungen basieren, und das Web hat viel Grauzone, sodass Sie möglicherweise andere Erfahrungen oder Meinungen haben. Das ist in Ordnung.

Native Animation

Bevor wir über Bibliotheken sprechen, lassen Sie uns einige native Animationsimplementierungen durchgehen. Die meisten Bibliotheken verwenden ohnehin native Animationstechnologien im Hintergrund. Je mehr Sie über diese wissen, desto besser können Sie verhandeln, was passiert, wenn sie abstrahiert werden.

CSS

CSS ist nach wie vor eine meiner liebsten Arten zu animieren. Ich benutze es seit Jahren und bin immer noch ein Fan wegen seiner Lesbarkeit und exzellenten Leistung. CSS-Animationen ermöglichen den Übergang zwischen verschiedenen Zuständen mithilfe eines Satzes von Keyframes.

Pro

• Sie benötigen keine externe Bibliothek.
• Die Leistung ist großartig, besonders wenn Sie Dinge tun, die von Natur aus hardwarebeschleunigt sind (auf die GPU ausgelagert). Hier ist ein Artikel über die Eigenschaften, die Ihnen dabei helfen.
• Präprozessoren (wie Sass oder Less) ermöglichen es Ihnen, Variablen (für Dinge wie Easing-Funktionen oder Timings) zu erstellen, die konsistent bleiben sollen, zusammen mit :nth-child-Pseudoklassen in Funktionen, um Staggering-Effekte zu erzeugen.
• Sie können über onAnimationEnd und einige andere Animations-Hooks mit nativem JavaScript lauschen.
• Bewegung entlang eines Pfades ist auf dem Weg, was großartig sein wird.
• Es ist einfach für responsive Entwicklung zu verwenden, da Sie Ihre Animation mit Media Queries modifizieren können.

Contra

• Die Bezier-Kurven (Easing) können etwas einschränkend sein. Mit nur zwei Griffen, um die Bezier-Kurve zu formen, können Sie keine komplexen physikalischen Effekte erzeugen, die für realistische Bewegungen schön sind (aber nicht sehr oft notwendig sind).
• Wenn Sie mehr als drei Animationen hintereinander verketten, empfehle ich, zu JavaScript zu wechseln. Die Sequenzierung in CSS wird mit Verzögerungen komplex, und Sie müssen viel neu berechnen, wenn Sie das Timing anpassen. Sehen Sie sich diesen Pen von Val Head an, der veranschaulicht, was ich meine. Staggers sind auch einfacher zu schreiben in JavaScript. Sie können die oben erwähnten nativen JavaScript-Ereignisse nutzen, um dies zu umgehen, aber dann wechseln Sie den Kontext zwischen den Sprachen, was auch nicht ideal ist. Lange, komplexe, sequentielle Animationen sind einfacher in JavaScript zu schreiben und zu lesen.
• Die Unterstützung für Bewegung entlang eines Pfades ist noch nicht ganz da. Sie können die Unterstützung für Firefox hier wählen. Die Unterstützung für Safari zu wählen, soweit ich das beurteilen kann, ist etwas individueller. Ich habe mich registriert, um einen Fehlerbericht auszufüllen und habe die Bewegungsbahnmodul in CSS als Feature angefordert.
• CSS + SVG-Animation hat einige seltsame Verhaltensweisen. Ein Beispiel ist, dass in Safari-Browsern Opazität und Transformationen in Kombination fehlschlagen oder seltsame Effekte haben können. Ein weiteres ist, dass die Definition des Transformationsursprungs in der Spezifikation, wenn sie sequenziell angewendet wird, auf eine nicht intuitive Weise erscheinen kann. So ist die Spezifikation geschrieben. Hoffentlich hilft SVG 2 dabei, aber vorerst erfordert CSS und SVG auf Mobilgeräten manchmal seltsame Hacks, um es richtig zu machen.

requestAnimationFrame

requestAnimationFrame (rAF) ist eine native Methode, die auf dem window-Objekt in JavaScript verfügbar ist. Sie ist wirklich wunderbar, denn im Hintergrund ermittelt sie die geeignete Bildrate für Ihre Animation in der jeweiligen Umgebung und gibt sie nur auf dieser Ebene aus. Wenn Sie sich beispielsweise auf dem Mobilgerät befinden, wird nicht so eine hohe Bildrate verwendet wie auf dem Desktop. Sie stoppt auch, wenn ein Tab inaktiv ist, um unnötige Ressourcen zu vermeiden. Aus diesem Grund,
ist requestAnimationFrame eine sehr performante Möglichkeit zur Animation, und die meisten Bibliotheken, die wir behandeln werden, verwenden sie intern. requestAnimationFrame funktioniert ähnlich wie Rekursion: Bevor der nächste Frame einer Sequenz gezeichnet wird, wird die Logik ausgeführt und dann wieder aufgerufen, um fortzufahren. Das mag etwas komplex klingen, aber was es wirklich bedeutet, ist, dass Sie eine Reihe von Befehlen haben, die ständig ausgeführt werden, sodass Sie die Interpolation der Zwischenschritte sehr gut rendern können.

Canvas

Canvas ist großartig, um diese Pixel in Bewegung zu setzen! Viele der coolen Dinge, die Sie auf CodePen sehen, werden von Canvas-Magiern gemacht. Wie der Name schon sagt, bietet Canvas einen visuellen Raum für Skripting, in dem Sie komplexe Zeichnungen und Interaktionen erstellen können, alles mit leistungsstarkem Rendering. Wir arbeiten hier mit Pixeln, was bedeutet, dass sie Raster (im Gegensatz zu Vektoren) sind.

Pro

• Da wir nicht Dinge im DOM bewegen, sondern einen Pixelbrei, können Sie eine Menge komplexer Dinge tun, ohne die Leistung zu beeinträchtigen.
• Canvas ist wirklich gut für Interaktion. Sie sind bereits in JavaScript, was viel Kontrolle bietet, ohne den Kontext zu wechseln.
• Die Leistung ist sehr gut. Vor allem, wenn man bedenkt, was man damit machen kann.
• Der Himmel ist die Grenze dessen, was Sie erstellen möchten.

Contra

• Es ist schwierig, sie zugänglich zu machen. Sie müssten etwas wie React verwenden, um ein DOM für Sie zu erstellen, was Flipboard vor einiger Zeit geschafft hat, obwohl in ihrem Fallbeispiel es schien, als hätten sie noch mehr Arbeit zu tun. Dort gibt es wahrscheinlich eine Gelegenheit, wenn Sie daran interessiert sind, diese Aufgabe zu übernehmen.
• Ich finde es ziemlich unintuitiv, es responsiv zu machen. Damit meine ich nicht, eine kleine Version auf dem Handy zum Laufen zu bringen, denn das tut es gut. Ich meine, Inhalte basierend auf dem Viewport zu verschieben, zu verlagern und neu zu organisieren. Ich bin sicher, es gibt einige wirklich großartige Entwickler da draußen, die das einfach machen, aber ich würde sagen, es ist nicht gerade einfach.
• Es ist nicht Retina-ready. Im Gegensatz zur SVG-Animation, die auflösungsunabhängig ist, sind die meisten Canvas-Animationen, die ich sehe, auf Retina-Displays nicht scharf.
• Es kann schwierig sein, zu debuggen. Wenn das, was Sie bauen, fehlschlägt, schlägt es fehl, indem es nichts anzeigt, im Gegensatz zur Animation im DOM, wo die Dinge noch da sind, aber seltsam funktionieren.

SMIL

SMIL ist die native SVG-Animationsspezifikation. Sie ermöglicht es Ihnen, SVGs direkt innerhalb des SVG-DOMs zu bewegen, zu formen und sogar damit zu interagieren. Es gibt eine Menge Vor- und Nachteile bei der Arbeit mit SMIL, aber der größte Nachteil führt dazu, dass ich es ganz weglasse: Es verliert an Unterstützung. Hier ist ein Beitrag, den ich darüber geschrieben habe, wie man zu besser unterstützten Techniken wechselt.

Web Animations API

Die Web Animations API ist natives JavaScript, mit dem Sie komplexere sequentielle Animationen erstellen können, ohne externe Skripte zu laden. Oder es wird, sobald die Unterstützung wächst. Vorerst benötigen Sie wahrscheinlich ein Polyfill. Diese native API wurde als Rückgrat für all die großartigen Bibliotheken und Arbeiten entwickelt, die Menschen bereits mit JavaScript im Web erstellt haben. Dies ist Teil einer Bewegung, die Leistung von CSS-Animationen und die Flexibilität der Sequenzierung in JavaScript unter einem Dach zu vereinen. Wenn Sie mehr darüber erfahren möchten, gibt es eine ShopTalk-Episode ganz dazu.

Pro

• Die Sequenzierung ist einfach und sehr gut lesbar. Schauen Sie sich dieses Beispiel von Dan Wilson an, das CSS-Keyframes und die Web-Animations-API vergleicht.
• Die Leistung scheint auf gutem Weg zu sein. Ich habe das noch nicht selbst gut getestet, plane es aber. (Sie können und sollten auch eigene Leistungstests durchführen).

Contra

• Die Unterstützung ist derzeit nicht gut. Sie ändert sich auch noch etwas, daher wäre ich, solange sich die Spezifikation noch bewegt, vorsichtig, sie in einer Produktionsumgebung einzusetzen.
• Es gibt immer noch viele Dinge bei der Timeline von GSAP (die wir gleich behandeln werden), die leistungsfähiger sind. Die wichtigen für mich sind die Cross-Browser-Stabilität für SVG und die Möglichkeit, große Sequenzen in einer Codezeile zu animieren.

WebGL

Mit WebGL können Sie außergewöhnliche Dinge tun. Wenn etwas Sie umhaut, ist die Wahrscheinlichkeit groß, dass es mit WebGL gemacht wurde. Es ist wirklich gut für interaktive und 3D-Effekte. Sehen Sie sich einige dieser Demos an. Technisch gesehen verwendet es Canvas, aber ich mag es, die Unterscheidung zu treffen, weil, ich weiß nicht, Namen cool sind, wenn sie dazu dienen, geringfügige Unterschiede zu identifizieren.

Pro

• Erstaunliche visuelle Effekte
• Drei Dimensionen bedeuten eine ganz neue Welt der Interaktion
• Hardwarebeschleunigt
• Möglichkeiten für VR

Contra

• Schwieriger zu lernen als die anderen nativen Animationen, die wir bisher behandelt haben. Die ersten beiden Animationen, die ich gemacht habe, dachte ich, funktionierten nicht, weil ich die Kamera falsch ausgerichtet hatte (womp womp). Es gibt auch weniger wirklich gute Artikel und Bücher, die erklären, wie man damit arbeitet, als die anderen Technologien, die ich bisher erwähnt habe, aber sie wachsen.
• Schwierig, responsiv zu machen. Die meisten Webseiten, die ich gesehen habe und die WebGL verwenden, fallen auf einen Bildschirm mit der Meldung "Bitte betrachten Sie diese Seite auf dem Desktop".

Externe Bibliotheken

GreenSock (GSAP)

GreenSock ist bei weitem meine Lieblingsbibliothek zum Arbeiten. Bitte verstehen Sie, dass diese Voreingenommenheit aus der Arbeit, dem Spielen und dem krachenden Anstoßen an vielen verschiedenen Animationswerkzeugen herrührt. Wenn ich meine starke Befürwortung gebe, dann durch Blut, Schweiß und Tränen. Ich mag es besonders für SVG. Die GreenSock Animation API hat fast zu viele coole Vorteile, um sie hier aufzulisten, ohne etwas zu verpassen, aber sie haben sowohl Dokumentationen als auch Foren, die Sie erkunden können.

Pro

• Sie ist außerordentlich performant für etwas, das nicht nativ ist. Das heißt, sie performs genauso gut, was ein großer wichtiger Punkt ist.
• Die Sequenzierungswerkzeuge (wie Timeline) sind so einfach zu lesen wie zu schreiben. Es ist sehr einfach, das Timing anzupassen, mehrere Dinge gleichzeitig mit relativen Labels auszuführen und sogar Animationen mit einer Codezeile zu beschleunigen oder zu verlangsamen.
• Sie haben viele weitere Plugins, wenn Sie ausgefallene Dinge tun möchten, wie Text animieren, SVGs morphen oder Pfade zeichnen.
• Ihre Bewegung entlang eines Pfades im bezier-Plugin hat die längste Unterstützung.
• Es löst die SVG-Cross-Browser-Probleme. Gott sei Dank dafür. Besonders für Mobilgeräte. Es gibt einige gute Informationen dazu in diesem Beitrag, den sie geschrieben haben.
• Sie bieten wirklich schöne, sehr realistische Eases.
• Da Sie jede beliebige Ganzzahl verzerren können, können Sie coole Dinge tun, wie SVG-Filter für einige tolle Effekte animieren, und es funktioniert sogar in Canvas. Der Himmel ist die Grenze dessen, was Sie animieren können.
• GSAP ist die einzige Animationsbibliothek, einschließlich des nativen SMIL, mit der Sie Pfad-Daten mit einer ungeraden Anzahl von Punkten morphen können. Dies hat neue Möglichkeiten für Bewegung und Fluss eröffnet. (Wenn Sie es in Aktion sehen möchten, gehen Sie zum Logo oben auf dieser Seite auf dem Desktop und klicken Sie auf den orangen Teil im Strich.)

Contra

• Sie müssen Lizenzgebühren zahlen, wenn Sie Ihr Produkt an mehrere Benutzer (Apps und kostenpflichtige Websites) weiterverkaufen. Das sind wahrscheinlich nicht die meisten Fälle. Ich werde auch hinzufügen, dass die Unterstützung der Arbeit daran nicht das Schlimmste auf der Welt ist.
• Wie bei jeder externen Bibliothek müssen Sie darauf achten, welche Versionen Sie in der Produktion verwenden. Wenn neue Versionen herauskommen, erfordert ein Upgrade einige Tests (wie bei jeder Bibliothek). Sie müssen auch die Größe der Bibliothek berücksichtigen.

VelocityJS

VelocityJS bietet viel von der Sequenzierung, die GreenSock bietet, aber ohne viele der zusätzlichen Funktionen. Ich benutze Velocity wegen der folgenden Nachteile nicht mehr wirklich. Die Syntax von Velocity ähnelt ein wenig jQuery, sodass sie Ihnen vertraut sein wird, wenn Sie bereits jQuery verwenden.

Pro

• Das Verketten vieler Animationen ist viel einfacher als mit CSS.
• Für Verfeinerungen bei Easing gibt es Step-Easing, bei denen Sie ein Array übergeben können.
• Die Dokumentation ist ziemlich gut, sodass es einfach ist, zu lernen und loszulegen.

Contra

• Die Leistung ist nicht großartig. Trotz einiger gegenteiliger Behauptungen fand ich, als ich eigene Tests durchgeführt habe, dass es nicht wirklich mithalten konnte. Ich empfehle Ihnen jedoch, Ihre eigenen Tests durchzuführen, da das Web sich ständig weiterentwickelt und dieser Beitrag zeitlich eingefroren ist.
• GSAP bietet mehr Leistung und Cross-Browser-Stabilität ohne zusätzlichen Ballast. Ich würde auch sagen, dass jQuery früher Leistungstests verloren hat, aber das könnte sich seit ihrer RAF-Adaption geändert haben, sodass Velocity keineswegs schlecht ist, aber im Vergleich verliert.
• Soweit ich das beurteilen kann, wird es nicht mehr aktiv gepflegt. Ich habe gehört, dass Julian Shapiro das Projekt an jemand anderen übergeben hat, sodass es vielleicht irgendwann in der Zukunft wieder aufleben wird.

jQuery

jQuery ist nicht ausschließlich eine Animationsbibliothek, aber es hat Animationsmethoden und viele Leute benutzen es, also dachte ich, ich würde es erwähnen.

Pro

• Viele Websites haben es bereits geladen, sodass es normalerweise sofort verfügbar ist.
• Die Syntax ist wirklich einfach zu lesen und zu schreiben.
• Sie sind kürzlich zu requestAnimationFrame umgestiegen, sodass in Versionen 3.0.0 und neuer die Leistung besser sein wird als zuvor.

Contra

• Versionen vor 3.0.0 sind leistungsschwach und nicht zu empfehlen. Ich habe dies nicht sehr formell getestet, aber abgesehen von der Betrachtung von Repaints und Painting in Chrome DevTools, können Sie es auch mit Ihren Augen sehen.
• Animationen werden in keiner Version für SVG unterstützt.
• jQuery ist auf das DOM beschränkt, im Gegensatz zu Werkzeugen wie GSAP, die auf allem funktionieren.

Snap.svg

Viele Leute denken, Snap sei eine Animationsbibliothek, aber es war nie als solche gedacht. Ich wollte Leistungstests für Snap durchführen, aber selbst Dmitri Baranovskiy (der unglaublich kluge und talentierte Autor von Snap.svg und seinem Vorgänger Rafael) sagt hier im SVG Immersion Podcast, dass es nicht das richtige Werkzeug dafür sei, und sagte in einer Nachricht an mich:

Nur eine Anmerkung: Snap ist keine Animationsbibliothek und ich empfehle immer, sie mit GSAP zu verwenden, wenn Sie eine ernsthafte Animation benötigen.

Das gesagt, jQuery ist nicht gut mit SVG, obwohl sie jetzt Klassenoperationen unterstützen. Wenn ich DOM-Manipulationen mit SVG durchführen muss, ist Snap dafür wirklich großartig.

Eine Bibliothek namens SnapFoo wurde kürzlich veröffentlicht und erweitert das Reich von Snap auf Animationen. Ich habe sie selbst noch nicht ausprobiert, aber sie sieht ziemlich cool aus und ist einen Versuch wert. Wenn Sie sie ausprobieren, berichten Sie zurück oder kommentieren Sie unten!

Mo.js

Das ist eine Bibliothek von einem großartigen Kerl namens LegoMushroom. Er ist ein äußerst talentierter Animator und hat bereits einige tolle Demos für diese Bibliothek erstellt, die mich wirklich begeistert haben. Diese Bibliothek ist noch in der Beta-Phase, wird aber bald veröffentlicht. Ich habe einen Einführungsleitfaden zum Arbeiten damit hier geschrieben, wenn Sie mehr erfahren möchten.

Pro

• Es gibt Dinge wie Formen, Ausbrüche und Wirbel, mit denen sich sehr einfach arbeiten lässt
  und die für Sie eingerichtet werden – Sie müssen also nicht der weltbeste oder kreativste Illustrator sein, um etwas Schönes zu schaffen.
• Mo.js bietet einige der besten und schönsten Werkzeuge im Web, darunter
  Player, Timelines und benutzerdefinierte Pfadersteller. Allein das ist einer der überzeugendsten Gründe für die Verwendung
• Es gibt ein paar verschiedene Möglichkeiten zu animieren – eine ist ein Objekt, eine andere ist das Zeichnen einer
  Änderung über den Verlauf einer Ease – so können Sie entscheiden, welcher Weg Ihnen angenehmer ist.

Contra

• Es bietet noch nicht die Möglichkeit, ein SVG als Elternteil für benutzerdefinierte Formen zu verwenden (ich
  glaube, LegoMushroom arbeitet daran), daher ist die Arbeit mit Koordinatensystemen und Skalierung für Responsive weniger intuitiv und schwieriger auf Mobilgeräten zu handhaben. Dies ist jedoch eine ziemlich fortgeschrittene Technik, die Sie möglicherweise nicht benötigen.
• Es korrigiert noch kein Cross-Browser-Verhalten wie GreenSock, was bedeutet,
  dass Sie möglicherweise Hacks schreiben müssen, wie Sie es mit CSS tun. Er erwähnte, dass er auch daran arbeitet.

Three.js

Three.js ist ein wunderschönes 3D-Animationswerkzeug! Sehen Sie sich einige dieser Beispiele an. Ich habe nicht viel damit gearbeitet, daher fühle ich mich nicht wohl, darüber zu berichten, aber ich habe vor, das zu tun, und werde den Beitrag aktualisieren, wenn ich mehr weiß. Die Leute sprechen normalerweise über dieses und das native WebGL im Tandem.

Bodymovin’

Bodymovin’ wurde für die Erstellung von Animationen in Adobe After Effects entwickelt, die Sie einfach exportieren können, um sie als SVG und JavaScript zu verwenden. Einige der Demos sind wirklich beeindruckend. Ich arbeite nicht damit, weil ich es wirklich mag, Dinge von Grund auf mit Code zu erstellen (daher widerspricht dies für mich dem Zweck), aber wenn Sie eher ein Designer als ein Entwickler sind, wäre dieses Werkzeug wahrscheinlich großartig für Sie. Der einzige Nachteil dabei ist, dass Sie es neu exportieren müssten, wenn Sie es später ändern müssen. Das könnte ein seltsamer Workflow sein. Außerdem ist der ausgegebene Code normalerweise ziemlich hässlich, aber ich habe nicht gesehen, dass dies die Leistung von Bodymovin' zu sehr beeinträchtigt hat, also ist es wahrscheinlich in Ordnung.

React-spezifische Workflows

Bevor wir über React sprechen, klären wir, warum wir Animationen in React überhaupt anders behandeln müssen. DOM steht für Document Object Model. Es ist, wie wir ein strukturiertes Dokument mit Objekten erstellen, deren Knoten wir als Baum bezeichnen. React interagiert mit einem virtuellen DOM, das sich von der nativen Browser-DOM-Implementierung unterscheidet, es ist eine Abstraktion.

React verwendet aus verschiedenen Gründen ein virtuelles DOM, von denen das überzeugendste die Fähigkeit ist, zu erkennen, was sich geändert hat und nur die Teile zu aktualisieren, die es benötigt. Diese Abstraktion hat ihren Preis, und einige der alten Tricks, mit denen Sie gearbeitet haben, werden Ihnen in einer React-Umgebung Schwierigkeiten bereiten. jQuery zum Beispiel spielt nicht gut mit React zusammen, da seine Hauptfunktion darin besteht, mit dem nativen DOM des Browsers zu interagieren und ihn zu manipulieren. Ich habe sogar einige seltsame CSS-Race-Conditions gesehen. Hier sind einige meiner Empfehlungen für schöne Animationen in einem React-Workflow.

React-Motion

React-Motion ist eine sehr beliebte Methode, um in React zu animieren, und die Community hat sie gegenüber der alten ReactCSSTransitionGroup übernommen, die früher am häufigsten verwendet wurde. Ich mag sie sehr, aber es gibt einige wichtige Punkte bei der Arbeit damit, die, wenn Sie sie nicht verstehen, dazu führen werden, dass Sie sich den Kopf zerbrechen.

React-Motion ähnelt stark game-basierten Animationen, bei denen Sie einem Element Masse und Physik geben und es auf seinen Weg schicken, und es kommt an, wenn es ankommt. Das bedeutet, dass Sie keine Zeit angeben, wie Sie es mit CSS oder einer anderen traditionellen webbasierten sequenziellen Animation tun. Dies ist eine ganz andere Art, über Animationen nachzudenken. Das kann bedeuten, dass die Bewegung die Fähigkeit hat, wirklich realistisch auszusehen, was sehr schön sein kann. Aber UIs haben andere Anforderungen als Spiele, daher kann die Arbeit damit knifflig werden. Nehmen wir an, Sie haben zwei Dinge, die unabhängig voneinander ausgeführt werden und gleichzeitig ankommen müssen, die aber unterschiedlich sind. Es kann schwierig sein, sie genau aufeinander abzustimmen.

Bis vor kurzem gab es keine Sequenzierung. Erst letzte Woche hat Cheng Lou onRest hinzugefügt, was diese Art von Callback-Workflow ermöglicht. Es ist immer noch nicht einfach, eine Schleife zu schreiben, ohne eine Endlosschleife zu schreiben (schlecht). Sie brauchen das vielleicht nicht, aber ich wollte es erwähnen. Zur Information für performance-sensible Benutzer: Es verwendet Neu-Rendering.

Pro

• Die Animation kann sehr schön und realistisch aussehen, und die Federoptionen sind gut.
• Der Staggering-Effekt ist ziemlich gut. Er ist auch in den meisten JS-Bibliotheken verfügbar, aber dieser hier wird basierend auf der letzten Bewegung erstellt, nicht durch Duplizieren der letzten, sodass es einige schöne Bewegungsmöglichkeiten gibt.
• Die Ergänzung von onRest ist eine große Sache. Sie ermöglicht eine gewisse Sequenzierung, die vorher nicht verfügbar war. Wenn Sie sich also die Demos ansehen, sehen Sie noch nicht einmal alles, was sie zu bieten hat.
• Ich würde dies derzeit als das Animationswerkzeug betrachten, das am besten mit React zusammenspielt.

Contra

• Es ist nicht so plug-and-play wie einige andere Bibliotheken oder native, was bedeutet, dass Sie ziemlich viel Code schreiben. Manche Leute mögen das, manche nicht. Es ist auf diese Weise nicht anfängerfreundlich.
• Die Sequenzierung ist aufgrund der komplexen Natur des Codes nicht so einfach oder lesbar wie bei einigen Alternativen.
• onRest funktioniert noch nicht für Staggering-Parameter.

GSAP in React

GreenSock hat so viel zu bieten, dass es sich immer noch lohnt, es in einer React-Umgebung zu verwenden. Dies gilt insbesondere für komplexere Sequenzierungen, bei denen React-Motion keine schlanke Lösung bietet und GreenSock glänzt. Es erfordert etwas mehr Finesse als üblich, und einige Dinge, die mit dem DOM funktionieren sollten und auch funktionieren, funktionieren in React nicht. Trotzdem habe ich React und GSAP schon auf verschiedene Arten zum Laufen gebracht, also hier ist, wie ich es mache.

1. Greifen Sie auf die nativen Lifecycle-Methoden der React-Komponenten zu.
   So mache ich das. Wenn ich möchte, dass es sofort ausgelöst wird, verwende ich componentDidMount.
2. Erstellen Sie eine Funktion, die eine Timeline hat, und rufen Sie diese Funktion dann innerhalb von etwas auf, das Sie für Interaktionen verwenden. Ich kann einen Inline-Event-Handler wie onClick() haben, und innerhalb der benutzerdefinierten Funktion dafür rufe ich eine andere Funktion auf, die eine Timeline darin enthält. In einem jQuery- oder Vanilla-JS-Setup würde ich die Timeline zunächst pausieren und auf Wiedergabe klicken, aber das muss ich hier nicht tun.
3. Hier ist ein guter Beitrag, den Chang Wang über die Verknüpfung mit ReactTransitionGroup() geschrieben hat, was eine ziemlich coole Methode ist.
4. Sie können eine Bibliothek wie React-Gsap-Enhancer verwenden. Ich habe diese nicht viel selbst verwendet, aber es gibt wirklich süße Demos. Eine davon ist ein Fork von einer meiner eigenen Demos, und ich muss sagen, als ich den Code betrachtete, schien er viel wortreicher zu sein als das, was ich geschrieben habe. Ich bin mir nicht sicher, ob das auf die Bibliothek, React selbst oder ihren Stil zurückzuführen ist.

CSS in React

CSS-Animationen haben in letzter Zeit eine kleine Renaissance erlebt, wahrscheinlich weil es der einfachste Weg für Animationen in React ist. Ich arbeite gerne mit ihnen für kleine Dinge wie UI/UX-Interaktionen. Ich habe gesehen, wie sie sich etwas seltsam verhalten, wenn Sie versuchen, Dinge mit Verzögerungen zu verketten. Ansonsten sind sie ziemlich großartig, besonders für kleine UI-Anpassungen. In Bezug auf reale Animationen im Web ist CSS manchmal Ockhams Rasiermesser.

Fazit

Dies ist ein Meinungsbeitrag von jemandem, der ständig mit Animationen arbeitet, und dies ist, was ich durch pure rohe Gewalt der Arbeit mit diesen Technologien gesammelt habe. Meine Meinungen werden möglicherweise nicht von allen geteilt, und das ist in Ordnung. Ich habe keinen besonderen Grund, an einer Technologie treu zu sein, außer als Entwickler, unter Berücksichtigung ihrer Vielseitigkeit, Leistung und Benutzerfreundlichkeit. Hoffentlich kann diese Information Ihnen einige Zeit sparen.