Wir haben natürlich nicht die Möglichkeit, jede einzelne Animationsbibliothek durchzugehen, also werden wir uns hier auf diejenigen konzentrieren, die wir bereits in der Praxis genutzt haben und die besonders interessant sind. Bitte beachten Sie, dass das unsere Empfehlungen sind, die auf unseren Erfahrungen basieren und deshalb ggfs. von ihren Erfahrungen abweichen können.
Native Animation.
Bevor wir über irgendwelche Bibliotheken sprechen, lassen Sie uns einige native Animationsimplementierungen durchgehen.
CSS.
CSS bleibt eine unserer bevorzugten Möglichkeiten, um zu animieren. Wir verwenden es seit Jahren und sind aufgrund der hervorragenden Leistungsfähigkeit auch weiterhin davon begeistert. CSS-Animationen ermöglichen den Übergang zwischen verschiedenen Zuständen mit Hilfe einer Reihe von Keyframes.
Vorteile:
- Sie benötigen keine externe Bibliothek.
- Die Leistung ist großartig, besonders wenn Sie Dinge tun, die von Natur aus hardwarebeschleunigt sind.
- Präprozessoren (wie Sass oder Less) ermöglichen es ihnen, Variablen (z.B. für Easying-Funktionen oder Timings) zu erstellen, die Sie konsistent halten möchten, zusammen mit :nth-child Pseudoklassen in Funktionen, um erstaunliche Effekte zu erzeugen.
- Sie können onAnimationEnd und einige andere Animationshooks mit nativem JavaScript anhören.
- Bewegung entlang eines Pfades kommt durch die Pipeline.
- Es ist einfach zu verwenden, um die Entwicklung zu beschleunigen, da Sie ihre Animation mit Media Queries modifizieren können.
Nachteile:
- Die Bezier Easings können etwas restriktiv sein. Mit nur zwei Griffen, um den Bezier zu formen, können Sie keine komplexen physikalischen Effekte erzeugen, die für realistische Bewegungen schön sind (aber nicht sehr oft notwendig).
- Wenn Sie über die Verkettung von drei Animationen hintereinander hinausgehen, ist es empfehlenswert, zu JavaScript zu wechseln. Die Sequenzierung in CSS wird mit Verzögerungen komplex und Sie müssen am Ende viele Neuberechnungen durchführen, wenn Sie das Timing verpassen. Staffelungen sind auch einfacher in JavaScript zu schreiben. Sie können sich in die nativen JavaScript-Ereignisse einklinken, die ich bereits erwähnt habe, um dies zu umgehen, aber dann wechseln Sie den Kontext zwischen den Sprachen, was auch nicht ideal ist. Lange, komplexe, sequentielle Animationen sind in JavaScript einfacher zu schreiben und zu lesen.
- Die Unterstützung für Bewegungen entlang eines Pfades sind noch nicht komplett ausgereift. Wir haben uns registriert, um einen Fehlerbericht zu erhalten und als Feature ein Motion-Path-Modul in CSS angefordert.
- CSS + SVG-Animation hat eine seltsame Eigenart im Verhalten. Ein Beispiel dafür ist, dass in Safari-Browsern Opazität und Transformationen kombiniert auftreten können oder seltsame Effekte haben. Ein weiterer Grund ist, dass die Definition des Transformationsursprungs durch die Spezifikation, wenn sie sequentiell angewendet wird, auf nicht-intuitive Weise erscheinen kann. Es ist die Art und Weise, wie die Spezifikation geschrieben wird. Hoffentlich wird SVG 2 dabei helfen, aber im Moment benötigen CSS und SVG auf mobilen Endgeräten manchmal seltsame Hacks, um richtig zu funktionieren.
requestAnimationFrame.
requestAnimationFrame (rAF) ist eine native Methode, die auf dem Window-Objekt in JavaScript verfügbar ist. Es ist sehr nützlich, da es herausfindet, was die richtige Bildrate für ihre Animation in jeder Umgebung ist, in der Sie sich befinden und treibt sie nur auf dieses Niveau. Wenn Sie sich beispielsweise auf einem mobilen Endgerät befinden, wird die Framerate nicht so hoch sein wie auf dem Desktop. Es stoppt auch, wenn ein Tab inaktiv ist, um zu verhindern, dass Ressourcen unnötig verbraucht werden. Aus diesem Grund ist requestAnimationFrame eine wirklich performante Art der Animation und die meisten der Bibliotheken, die wir behandeln werden, verwenden es intern. RequestAnimationFrame arbeitet auf ähnliche Weise wie Rekursion, bevor es den nächsten Frame in einer Sequenz zeichnet, führt es die Logik aus und ruft sich dann erneut auf, um weiterzumachen. Das mag ein wenig komplex klingen, aber was es wirklich bedeutet, ist, dass Sie eine Reihe von Befehlen haben, die ständig ausgeführt werden, also wird es interpolieren, wie die Zwischenschritte für Sie sehr schön dargestellt werden.
Canvas.
Canvas ist hervorragend, um Pixel in Bewegung zu setzen. So viele der beeindruckenden Animationen, die Sie auf CodePen sehen, werden von Canvas-Experten entwickelt. Wie der Name schon sagt, bietet Canvas ein visuelles Raumskripting, in dem Sie komplexe Zeichnungen und Interaktionen mit hoher Leistung erstellen können. Wir arbeiten hier mit Pixel, d.h. sie sind gerastert (im Gegensatz zu Vektor).
Vorteile:
- Da wir im DOM keine Dinge bewegen, sondern nur einen Pixelblock, können Sie eine Tonne komplexer Dinge realisieren, ohne die Leistung zu beeinträchtigen.
- Canvas ist wirklich schön mit Interaktion. Sie befinden sich bereits in JavaScript, das viel Kontrolle bietet, ohne den Kontext zu wechseln.
- Die Leistung ist sehr gut. Besonders wenn man bedenkt, was man alles machen kann.
- Der Himmel ist die Grenze dessen, was Sie erschaffen wollen.
Nachteile:
- Es ist schwer zugänglich zu machen. Sie müssten so etwas wie React verwenden, um ein DOM für Sie zu erstellen, was Flipboard vor kurzem geschafft hat, obwohl es in ihrer Fallstudie den Anschein hatte, dass sie mehr Arbeit zu erledigen hatten. Es gibt dort wahrscheinlich eine Gelegenheit, wenn Sie daran interessiert sind, die Verantwortung zu übernehmen.
- Wir finden es ziemlich unintuitiv, darauf zu reagieren. Damit meinen wir nicht, dass eine kleine Version am Telefon funktioniert, denn das ist eher positiv. Wir meinen das Verschieben und Reorganisieren von Inhalten basierend auf dem Viewport. Wir sind sicher, es gibt einige wirklich großartige Entwickler da draußen, die es leicht machen, aber wir würden sagen, dass es nicht sehr einfach ist.
- Es ist nicht bereit für Retina. Im Gegensatz zur SVG-Animation, die auflösungsunabhängig ist, sind die meisten Canvas-Animationen, die wir gesehen haben, auf Retina-Displays nicht scharf.
- Es kann schwierig sein, zu debuggen. Wenn das, was Sie bauen, nicht mehr funktioniert, bricht es, indem es nichts zeigt, im Gegensatz zur Animation im DOM, wo die Dinge noch da sind, aber sich einfach nur seltsam verhalten.
SMIL.
SMIL ist die native SVG-Animationsspezifikation. Es ermöglicht ihnen, SVGs direkt im SVG-DOM zu verschieben, zu morphen und sogar mit ihnen zu interagieren. Es gibt eine Menge Vor- und Nachteile bei der Arbeit mit SMIL, aber einige Faktoren werden uns dazu bringen, es ganz wegzulassen. Es verliert zunehmend an Akzeptanz.
Web Animations API.
Die Web Animations API ist natives JavaScript, mit dem Sie komplexe sequentielle Animationen erstellen können, ohne externe Skripte zu laden. Oder wird es jedenfalls, wenn die Unterstützung wächst. Für den Moment werden Sie wahrscheinlich ein Polyfill benötigen. Diese native API wurde als Backfill aus all den großartigen Bibliotheken und Arbeiten erstellt, die die Leute bereits mit JavaScript im Web umgesetzt haben. Dies ist Teil einer Bewegung, die die Leistung von CSS-Animationen und die Flexibilität der Sequenzierung in JavaScript unter einem Dach vereint.
Vorteile:
- Sequenzierung ist einfach und gut lesbar.
- Die Leistung scheint auf dem besten Weg zu sein. Wir haben es selbst noch nicht getestet, aber wir planen es (sie können und sollten auch ihre eigenen Leistungstest durchführen).
Nachteile:
- Der Support ist aktuell nicht gerade großartig, Es ändert sich auch noch ein wenig, so dass Sie vorsichtig sein sollten, sie in einer Produktionsumgebung auszuführen.
- Es gibt noch viele Dinge an der Timeline in GSAP (die wir gleich behandeln werden), die mächtiger sind. Die für uns wichtigen sind die browserübergreifende Stabilität für SVG und die Fähigkeit, große Sequenzbahnen in einer Codezeile zu animieren.
WebGL.
Es gibt einige außergewöhnlcihe Dinge, die Sie mit WebGL tun können. Wenn Sie etwas aus den Socken haut, besteht eine gute Chance, dass es mit WebGL erstellt wurde. Was es wirklich gut kann, sind interative 3D-Effekte. Schauen Sie sich einige Demos an. Technisch gesehen verwendet es Canvas.
Vorteile:
- Beindruckende visuelle Effekte.
- Drei Dimensionen bedeuten eine ganz neue Welt der Interaktion.
- Hardware-beschleunigt.
- Möglichkeiten für VR.
Nachteile:
- Schwieriger zu lernen als die anderen nativen Animationen, die wir bisher abgedeckt haben. Bei den ersten beiden Animationen, die wir gemacht haben, dachten wir, dass diese nicht funktionieren würden, weil die Kamera in die falsche Richtung gerichtet war. Es gibt bis dato auch nur sehr wenige gute Bücher und Artikel, die erklären, wie man damit arbeitet.
- Schwer zu beantworten. Die meisten Webseiten, die wir gesehen haben, die WebGL verwenden, greifen auf einen „Bitte diese Website auf einem Desktop ansehen“-Hinweis zurück.
Externe Libraries.
GreenSock (GSAP).
GreenSock ist mit Abstand unsere Lieblingsbibliothek, mit der wir gearbeitet haben. Besonders für SVG ist GSAP zu empfehlen. Die GreenSock Animation API hat fast schon zu viele Vorteile, um Sie hier komplett auflisten zu können. Hinzu kommen gute Lernmöglichkeiten durch Foren und Dokumente.
Vorteile:
- Es ist außerordentlich performant für etwas, das nicht nativ ist.
- Die Sequencing Tools (wie Timeline) sind genauso einfach zu lesen wie zu schreiben. Es ist sehr einfach, das Timing anzupassen, mehrere Dinge gleichzeitig mit relativen Bezeichnungen zu starten und sogar ihre Animationen mit einer einzigen Codezeile auf- oder abzubrechen.
- Sie haben eine Menge anderer Plugins, wenn Sie ausgefallene Dinge wie animierten Text, morphen SVGs oder Zeichenpfade erstellen möchten.
- Es löst SVG Cross-Browser Probleme speziell für mobile Endgeräte.
- Sie bieten wirklich schöne, sehr realistische Erleichterungen.
- Da Sie zwei beliebige Ganzzahlen dazwischen schalten können, können Sie coole Dinge tun, wie z.B. SVG-Filter für einige großartige Effekte animieren und sogar auf Canvas arbeiten. Es gibt nahezu keine Grenzen dafür, was Sie animieren können.
- GSAP ist die einzige Animationsbibliothek, einschließlich des nativen SMIL, mit der Sie Pfaddaten mit einer ungleichmäßigen Anzahl von Punkten morphen können. Dies hat neue Möglichkeiten für Bewegung eröffnet.
Nachteile:
- Sie müssen für die Lizenzierung bezahlen, wenn Sie ihr Produkt an mehrere Benutzer weiterverkaufen.
- Wie bei jeder externen Bibliothek müssen Sie sich ansehen, welche Versionen Sie in der Produktion verwenden. Wenn neue Versionen auf den Markt kommen, wird das Upgrade einige Tests erfordern (wie bei jeder Bibliothek). Sie müssen auch die Größe der Bibliothek berücksichtigen.
VelocityJS.
VelocityJS bietet einen Großteil der Sequenzierung, die GreenSock macht. Wir verwenden Velocity aufgrund einer Vielzahl von Nachteilen nicht mehr. Die Syntax von Velocity sieht ein wenig wie jQuery aus, wenn Sie also bereits jQuery verwendet haben, wir sie ihnen vertraut sein.
Vorteile:
- Das Verketten vieler Animationen ist viel einfacher als bei CSS.
- Für Verfeinerungen in eases gibt es Step-Eases, in denen Sie ein Array übergeben können.
- Die Dokumentation ist ziemlich schön, so dass sie leicht zu erlernen und aufzurichten sind.
Nachteile:
- Die Leistung ist nicht gut. Trotz einiger gegenteiliger Behauptungen stellen wir bei der Durchführung unserer eigenen Tests fest, dass es nicht wirklich hält. Wir schlagen vor, dass Sie ihre eigenen betreiben, da sich das Internet ständig verändert.
- GSAP hat mehr zu bieten, für Performance und browserübergreifende Stabilität ohne Mehrgewicht. jQuery hat in der Vergangenheit Leistungstests verloren, aber das könnte sich seit der Einführung der RAF geändert haben, so dass Velocity keinswegs schlecht ist, aber im Vergleich dazu eher negativ abschneidet.
- Soweit es zu beurteilen ist, wird es nicht mehr aktiv gepflegt. Es wird gemunkelt, dass Julian Shapiro das Projekt an jemand anderen weitergegeben hat, so dass es irgendwann in der Zukunft wieder aufleben könnte.
jQuery.
jQuery ist nicht nur eine Animationsbibliothek, sondern hat auch Animationsmethoden und wird von immer mehr Anwendern genutzt.
Vorteile:
- Viele Webseiten haben es bereits geladen, so dass es normalerweise leicht zugänglich ist.
- Die Syntax ist wirklich einfach zu lesen und zu schreiben.
- Sie sind kürzlich zu requestAnimationFrame übergegangen, so dass in den Versionen 3.0.0 und höher die Leistung besser als zuvor sein wird.
Nachteile:
- Versionen vor 3.0.0 sind besonders leistungsfähig und werden nicht empfohlen. Wir haben das sehr formell getestet, aber abgesehen davon, dass man Repaints und Painting in Chrome DevTools betrachten kann, kann man es auch mit den Augen sehen.
- Animationen werden in SVG in keiner Version unterstützt.
- jQuery ist auf das DOM beschränkt, im Gegensatz zu Tools wie GSAP, die in allem arbeiten.
Snap.svg
Viele Leute denken, dass Snap eine Animationsbibliothek ist, aber es war nie beabsichtigt, eine zu sein. Wir wollten Leistungsbenchmarks auf Snap durchführen, aber sogar Dmitri Baranovskij sagt hier im SVG Immersion Podcast, dass es nicht das richtige Werkzeug dafür ist:
Kleine Anmerkung von Baranovskij: „Snap ist keine Animationsbibliothek und ich empfehle immer, es mit GSAP zu verwenden, wenn Sie eine ernsthafte Animation benötigen.“
Das heißt, dass jQuery nicht gut genug mit SVG funktioniert, obwohl Sie jetzt Klassenoperationen unterstützen. Wenn wir eine DOM-Manipulation mit SVG durchführen müssen, ist Snap dafür wirklich großartig geeignet.
Eine Bibliothek mit der Bezeichnung SnapFoo wurde vor Kurzem veröffentlicht und sie erweitert Snaps Reich für Animationen. Ich habe selbst noch nicht damit gespielt, aber es sieht ziemlich cool aus und ist einen Versuch wert.
Mo.js
Dies ist eine Bibliothek von einem Entwickler, welche von LegoMushroom stammt. Es handelt sich dabei um einen hochtalentierten Animator und hat bereits einige großartige Demos für diese Bibliothek gemacht, die uns wirklich begeistert haben. Diese Bibliothek befindet sich noch in der Beta-Phase und kommt der Veröffentlichung sehr nahe.
Vorteile:
- Es gibt Dinge wie Formen, Ausbrüche und Verwirbelungen, mit denen man sehr einfach arbeiten kann. Mit Mo.js müssen Sie nicht der beste und kreativste Illustrator der Welt sein, um etwas Neues in Gang zu bringen.
- Mo.js bietet einige der besten und schönsten Werkzeuge im Internet, darunter Player, Timelines und benutzerdefinierte Pfadersteller. Das ist der Hauptgrund, um Mo.js zu nutzen.
- Es gibt verschiedene Möglichkeiten zu animieren – eine ist ein Objekt, eine zeichnet ein Objekt auf. Ändern Sie im Laufe der Zeit eine Leichtigkeit – so können Sie entscheiden, in welcher Richtung Sie sich wohler fühlen.
Nachteile:
- Es bietet noch nicht die Möglichkeiten, ein SVG als übergeordnetes Element für die benutzerdefinierten Formen zu verwenden, so dass die Arbeit mit Koordinatensystemen und die Skalierung für die Reaktion weniger intuitiv und schwieriger ist, die Arbeit auf den mobilen Endgeräten zu machen. Dies ist jedoch eine ziemlich fortgeschrittene Technik, so dass Sie sie möglicherweise nicht benötigen.
- Es korrigiert das browserübergreifende Verhalten wir GreenSock noch nicht, was bedeutet, dass Sie möglicherweise Hacks schreiben müssen, wie es bei der CSS auch der Fall ist.
Three.js
Three.js ist ein wunderbares dreidimensionales Animationswerkzeug. Bei der Entwicklung unserer Echtzeit-3D-Konfiguratoren greifen wir regelmäßig auf Three.js zurück und haben damit bisher ausschließlich positive Erfahrungen gemacht.
Bodymovin
Bodymovin ist für die Erstellung von Animationen in Adobe After Effects gedacht, die Sie einfach in SVG und JavaScript exportieren können. Einige der Demos sind wirklich beeindruckend. Wir arbeiten nicht damit, weil wir es wirklich mögen. Dinge von Grund auf mit Code zu erstellen, aber wenn Sie mehr ein Designer als ein Entwickler sind, werden Sie es wirklich mögen. Nachteilig ist nur, dass wenn Sie später etwas ändern müssen, Sie es wieder exportieren müssen. Das könnte ein seltsamer Workflow sein. Außerdem ist der ausgegebene Code normalerweise irgendwie groß, aber wir haben nicht gesehen, dass das die Performance im Falle von Bodymovin zu sehr beeinträchtigt, also ist es wahrscheinlich in Ordnung.
React-spezifische Workflows.
Bevor wir auf React eingehen, lassen Sie uns darüber sprechen, warum wir Animationen in React überhaupt anders behandeln müssen. DOM steht für Document Object Model. So erstellen wir ein strukturiertes Dokument mit Objekten, deren Nodes wir als Baum bezeichnen. React interagiert mit einem virtuellen DOM, was im Gegensatz zur nativen Browser-Implementierung eine Abstraktion ist.
React verwendet eine Reihe von virtuellen DOM-Gründen, von denen der überzeugendste die Fähigkeit ist, herauszufinden, 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 arbeiten, werden ihnen in einer React-Umgebung Ärger bereiten. iQuery zum Beispiel wird mit React einwandfrei funktionieren, da es die primäre Funktion ist, mit dem nativen DOM des Browsers zu interagieren und zu manipulieren. Wir haben sogar schon einige seltsame CSS Race Conditions gesehen.
React Motion.
React Motion ist eine sehr beliebte Methode, um in React zu animieren und die Community hat es über die alte ReactCSSTransitionGroup übernommen, die früher am häufigsten verwendet wurde.
React Motion ist der spielerischen Animation ziemlich ähnlich, bei der man einem Element Masse und Physik gibt und es auf den Weg bringt und es kommt an, wenn es ankommt. Das bedeutet, dass Sie nicht wie bei CSS oder anderen traditionellen webbasierten sequentiellen Bewegungen eine Zeitspanne angeben. Das ist eine ganz andere Art, über Animationen nachzudenken. Dies kann bedeuten, dass die Bewegung die Fähigkeit hat, wirklich realistisch auszusehen, was sehr schön sein kann. Aber Benutzeroberflächen haben andere Anforderungen als Spiele, so dass die Arbeit damit schwierig werden kann. Nehmen wir an, Sie haben zwei Dinge, die unabhängig voneinander feuern und gleichzeitig dorthin gelangen müssen, die unterschiedlich sind. Es kann schwierig sein, sie genau aufeinander abzustimmen.
Bis vor kurzem gab es keine Sequenzierung. Erst letzte Woche hat Cheng Lou in 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. Sie benötigen das vielleicht nicht, aber wir dachten, dass es an dieser Stelle zumindestens nicht unerwähnt bleiben sollte. Als FYI für die Performance-Sensitiven verwendet es das Rendering.
Vorteile:
- Die Animation kann wirklich schön und realistisch aussehen und die Optionen für den Frühling sind beeindruckend.
- Der atemberaubende Effekt ist ziemlich gut. Es ist auch in den meisten JS-Bibliotheken verfügbar, aber diese wird basierend auf der letzten Bewegung erstellt, nicht durch Duplizieren der letzten, so dass es einige schöne Bewegungsmöglichkeiten gibt.
- Die Aufnahme von onRest ist eine großartige Sache. Es ermöglicht einige Sequenzierungen, die vorher nicht verfügbar waren, so dass Sie, wenn Sie sich die Demos ansehen, noch nicht einmal alles sehen, was sie zu bieten haben.
- Ich würde dies derzeit als das Animationswerkzeug betrachten, das mit React am besten funktioniert.
Nachteile:
- Es ist kein super Plug-and-Play wie einige andere oder native Bibliotheken, was bedeutet, dass Sie am Ende ein wenig mehr Code schreiben. Einige Leute mögen das an der Sache, andere nicht. Es ist allerdings nicht gut für Anfänger geeignet.
- Die Sequenzierung ist aufgrund der komplexen Natur des Codes nicht so einfach und lesbar wie einige der Alternativen.
- OnRest funktioniert noch nicht für die Staffelung von Parametern.
GSAP in React.
GreenSock hat so viel zu bieten, dass es sich immer noch lohnt, es in einer React-Umgebung einzusetzen. Dies gilt insbesondere für komplexe Sequenzierungen, bei denen React-Motion keine schlanke Lösung bietet und GreenSock glänzt. Es braucht ein wenig mehr Feinarbeit als sonst und einige Dinge, die funktionieren sollten und mit dem DOM zu tun haben, sind nicht in React vorhanden.
- Hängen Sie sich in die nativen Methoden des React-Komponentenlebenszyklus ein.
- Erstellen Sie eine Funktion, die eine Timeline hat und rufen Sie diese Funktion dann innerhalb von etwas auf, das Sie für die Interaktion verwenden. Wir können einen Inline-Eventhandler wir onClick() haben und innerhalb der benutzerdefinierten Funktion, werden wir eine andere Funktion aufrufen, die eine Timeline enthält. In einem jQuery oder Vanilla JS-Setup würden wir die Timeline zunächst anhalten und die Wiedergabe starten, aber wir werden das hier nicht tun.
- Sie können eine Bibliothek wie React-GSAP-Enhancer verwenden. Wir haben selbst nicht allzu viel damit gearbeitet, aber es existieren wirklich tolle Demos.
CSS in React.
CSS-Animationen haben in letzter Zeit eine gewissen Wiederbelebung erfahren, da es der einfachste Weg ist, Animationen in React zu erstellen. Für kleine Animationen wir UI/UX-Interaktionen ist React hervorragend geeignet. Darüber hinaus eignen sie sich auch gut für kleine Anpassungen der Benutzeroberfläche.
Schlußfolgerungen.
Mit diesem Beitrag haben wir ihnen einen kurzen Überblick darüber gegeben, welche Technologien Sie für das Erstellen ihrer Animationen verwenden können. Es sind unsere persönlichen Erfahrungen, so dass andere Nutzer andere Erfahrungen gemacht haben können. Dennoch hoffen wir, ihnen einen ersten kurzen Überblick ermöglicht zu haben.
Vielen Dank für ihren Besuch.