10 besten Webanimationen von Chris Gannon

Der preisgekrönte Animator Chris Gannon wird auf der Generate London zeigen, wie er seine Webanimationen erstellt

wie man Perspektive im Illustrator macht
Der preisgekrönte Animator Chris Gannon wird auf der Generate London zeigen, wie er seine Webanimationen erstellt

Chris Gannon ist ein preisgekrönter interaktiver Designer, Programmierer und Webanimator, der interaktive animierte SVG-Projekte für einige der größten Tech-Player erstellt hat, darunter BBC, Google, Microsoft und Amazon.

Gannon wird bei sprechen London generieren Am 21. September wird er einige dieser Arbeiten analysieren, seine Prozesse teilen und die Werkzeuge untersuchen, mit denen er sie erstellt. Als kleinen Vorgeschmack erzählt er uns hier einige seiner besten Animationen.



01. Tischventilator

Diese Animation ist jetzt Teil von Twitter

Diese Animation ist jetzt Teil der offiziellen GIF-App von Twitter.

SVG hat seine Grenzen und manchmal ist es einfach nicht möglich, das zu tun, was ich brauche. Desk Fan ist eines meiner ersten 3D-Modelle in Kino 4D (Eigentlich gab es vorher viele, aber es ist das erste Modell, das ich teilen wollte). Ich habe mehrere Tutorials durchgearbeitet, um herauszufinden, wie man verschiedene Teile wie die Klingen, das Netz und die Windphysik erstellt.

Cinema 4D verfügt über einen Renderer namens Sketch and Toon, der flache Farben ausgibt. Wie Sie sich vorstellen können, ist dies mein Lieblingsausgabestil. Dies ist eine meiner beliebtesten Animationen und jetzt Teil der offiziellen GIF-App von Twitter.

02. Laden Sie Dot Bounce herunter

Lader sind der perfekte Ort, um so viel wie möglich zu stopfen.

Lader sind der perfekte Ort, um so viel wie möglich zu stopfen.

Ich habe dies in den ersten Monaten des Lernens von SVG-Animation gemacht. GreenSock hatte veröffentlicht DrawSVGPlugin (ein erstaunliches und flexibles Plugin) und ich wollte üben, also habe ich es für so ziemlich jedes animierte Element verwendet. Ich liebe es, so viel wie möglich in kurzer Zeit zu stopfen, und Lader sind einfach der perfekte Ort dafür.

Ich wollte sicherstellen, dass es nicht nur eine Augenweide ist und dass es auch nützlich ist. Deshalb habe ich ein Animationsobjekt / einen Wrapper mit einer API erstellt, die die Methoden Start, Pause, Zurücksetzen und Prozent / Fortschritt verfügbar macht. Dies war das erste Mal, dass ich dies getan habe, und jetzt ist es etwas, das ich für alle meine Kunden tue, um ihnen mehr Kontrolle über ihre Animationen zu geben.

03. Feuerlader

Gannon verwendete für diese Animation das GreenSock-Plugin CustomEase.

Gannon verwendete für diese Animation das GreenSock-Plugin CustomEase.

Diese Animation wurde von einer viel einfacheren Version von Dribbble inspiriert. Tatsächlich war die allererste Version davon nur ein paar einfache Quadrate, die sich auf einer Schleife nach oben bewegten. Eine zweite Iteration wurde von einem anderen Designer durchgeführt, der es zurückprallte und es eher wie Feuer aussehen ließ. Endlich ich erholte sich das erholt sich, indem die Bewegung verfeinert, Funken hinzugefügt und interaktiv gemacht werden.

Ich habe das ungefähr zu der Zeit gemacht, als GreenSock ein Plugin namens veröffentlicht hat CustomEase (und CustomBounce ) und ich hatte Juckreiz, es zu drehen. Mit CustomEase können Sie, wie Sie wahrscheinlich vermutet haben, benutzerdefinierte Easy-Shapes erstellen (wie Dinge langsamer oder schneller werden), die Sie entweder durch Zeichnen oder mithilfe vorhandener Bezier-Pfaddaten erstellen können.

Wenn Sie genau hinschauen, können Sie sehen, wie die Funken in den Himmel fliegen, sich dann in einer Schleife wieder auf sich selbst verdoppeln und dann weiter nach oben fahren. Dies gab den Funken eine viel natürlichere Bewegung.

04. Goo Bubble

Diese Goo-Blase bringt den Goo-Effekt weiter ...

Diese Goo-Blase bringt den Goo-Effekt weiter ...

Ungefähr zu der Zeit, als ich das gemacht habe, machte der Goo-Effekt die Runde und wurde immer beliebter (ursprünglich von uns zu unseren kollektiven Aufmerksamkeiten gebracht Lucas Bebber über Codrops ). Ich wollte noch weiter gehen, indem ich eine Flüssigkeit animierte und diese Flüssigkeit als Hauptkörper für die klebrigen Tropfen verwendete.

Es ist eigentlich ziemlich einfach zu tun. Zunächst wenden Sie einen Unschärfefilter auf einen Container an, wodurch alle Grafiken im Inneren mit einer gefiederten Kante versehen werden. Und weil sie verschwommen sind, werden ihre Kanten transparent.

Wenden Sie als Nächstes eine ColorMatrix an, um die Deckkraft aller verblassten Kanten wieder auf die volle Deckkraft zu erhöhen. Dies bedeutet, dass sich zwei Kanten überlappen, wenn sich zwei unscharfe Elemente berühren. Und weil die Transparenz dieser Kanten wieder voll ist, verbinden sie sich und erzeugen das Erscheinungsbild von Flüssigkeit.

Um die Szene weiter zu 'verkaufen', habe ich zwei versetzte Wellenbewegungen hinzugefügt, um die 'Flüssigkeit' zu maskieren, einen Gradienten hinzugefügt und schließlich Blasen, die sprangen und platzten. Kürzlich hat Xavier Cazalot eine Werkzeug Auf diese Weise können Sie Ihre eigenen Farben auswählen und Ihre eigene Goo-Blase erstellen.

05. Interaktive Eiablage

Mit ein wenig Arbeit gab Gannon diese After Effects-Animation als animiertes SVG aus

Mit ein wenig Arbeit gab Gannon diese After Effects-Animation als animiertes SVG aus

Dies war ursprünglich eine direkte Charakteranimation, die ich in After Effects mit erstellt habe Gummischlauch für die Glieder. Es hatte nichts mit dem Web zu tun. Später jedoch das SVG-Export-Tool Bodymovin Unterstützung für RubberHose hinzugefügt. Dies bedeutete, dass ich mit ein wenig zusätzlicher Arbeit zum Entfernen nicht unterstützter Funktionen die Animation als animiertes SVG ausgeben konnte.

Außerdem bedeutete dies, dass ich Interaktivität hinzufügen konnte, indem ich einen Klassennamen (in After Effects) hinzufügte und einen von GreenSock gesteuerten Schieberegler überlagerte, der die Wiedergabegeschwindigkeit von Bodymovin kontrollierte. Dies war wirklich ein Test, um zu sehen, was möglich war.

06. Sprunglader

Jump Loader war ein Experiment in Kreativität.

Jump Loader war ein Experiment in Kreativität.

Im Jahr 2015 wurde ich gebeten, eine zu schreiben Artikel über SVG-Animation für Codrops und erstellen Sie mehrere begleitende SVG-Animationen. Jump Loader war einer von ihnen, aber es war eine viel einfachere Version, die in reinem SVG und GreenSock gebaut wurde.

Ich hatte kürzlich einen erweiterten kreativen Block, also habe ich beschlossen, einige alte Arbeiten (was ich selten mache) noch einmal zu besuchen und sie mit verschiedenen Tools neu zu erstellen. Ich habe After Effects und Bodymovin verwendet, um es ein wenig zu verschieben, indem ich einige physikbasierte Splash-Partikel hinzugefügt habe, die in erstellt wurden Newton 2 . Ich sehe dies als eine Erkundung eines möglichen Weges, mein Mojo zurückzubekommen. Es hat irgendwie funktioniert.

Größe ändern / groß / aus / verstecken

07. LEGO Loader

Diese Animation bringt LEGO in den digitalen Bereich.

Diese Animation bringt LEGO in den digitalen Bereich.

In der gesamten Kreativbranche ist der Ausdruck „Bleib bei dem, was du weißt“ ein Mantra, wenn du etwas schaffen willst, das mit anderen in Resonanz steht. Wir sind eine Familie von LEGO-Fans - unmögliche Fahrzeuge oder unwahrscheinliche Strukturen erscheinen regelmäßig auf dem Küchentisch - daher ist LEGO selten weit von mir entfernt.

Mit dieser Animation wollte ich sie nur für einen Moment aus dem analogen Raum in mein digitales Reich bringen. Dies ist eine von drei oder vier Webanimationen, die ich erstellt habe und die alle neue Tools enthalten, die ich lerne, wie z. B. Newton 2.

08. Lichtgeschwindigkeit

Gannon dachte eine Weile über diese Idee nach, bevor er es versuchte.

Gannon dachte eine Weile über diese Idee nach, bevor er es versuchte.

Dies ist eine Simulation von Ampeln mit einer langen Verschlusszeit in der Nacht. Ich hatte ein paar Probleme damit, es in reinem SVG zu machen, aber ich konnte einfach nicht den perspektivischen Look erreichen, den ich wollte. Und bis wir in SVG nette Dinge wie eine variable Strichbreite haben können, werden Animationen wie diese den Aufwand einfach nicht wert sein.

wie man eine Form im Illustrator wiederholt

Ich habe es geschafft, es mit Strichen konstanter Breite zu fummeln, die unter einer Maske aus Pfaden animiert wurden, die von dünn nach dick gingen, aber ehrlich gesagt sah es wie Müll aus und es gab ein Problem mit der Z-Tiefe. Also sprang ich in Cinema 4D ein und innerhalb weniger Stunden hatte ich den Hauptlichteffekt.

Leider hat das Modellieren der Straßenlaterne am längsten gedauert, da meine Modellierungsfähigkeiten und mein Gespür für 3D-Proportionen praktisch nicht vorhanden waren. Ich habe dieses GIF ein gutes Stück kommerziell lizenziert, oft an Unternehmen, die Daten oder Bandbreite darstellen möchten. Wer wusste.

Gannon hat diese After Effects-Animation mit reinem SVG und GreenSock neu erstellt.

Gannon hat diese After Effects-Animation mit reinem SVG und GreenSock neu erstellt.

Das Original Lottie Animation ist von Salih Abdul-Karim und wurde in After Effects und Ausgabe mit gemacht Lottie , eine Echtzeit-Rendering-Engine für iOS und Android, die auf der Bodymovin-Codebasis basiert. Dies war, bevor ich Bodymovin ausprobiert hatte, und zu der Zeit war die Rede davon, dass so komplizierte Animationen nur in After Effects möglich sind.

Ich habe es aus zwei Gründen mit reinem SVG und GreenSock neu erstellt. Erstens, weil ich es geliebt habe und mich herausfordern wollte, es so genau wie möglich nachzubilden. Und zweitens, weil ich den Mythos widerlegen wollte, dass reine SVG-Animation zu komplex oder schwierig ist, um solche Ergebnisse zu erzielen.

10. SVG Radio Splat

Mit Radio Splats ist das Leben besser.

Mit Radio Splats ist das Leben besser.

Eine weitere Animation, die den klassischen Goo-Effekt verwendet. In dieser Animation wollte ich sie auf eine andere, interaktive Weise verwenden - etwas mit etwas mehr Kontrolle und Richtung. ich liebe ZWIEBEL Arbeiten und lustige Interaktionen wie diese zu machen, ist eine lebenslange Mission. Normale Optionsfelder sind nur langweilig, deshalb habe ich beschlossen, dass das Leben mit Radio Splats besser ist.

Ungefähr zu dieser Zeit war eine der Fragen, die mir am häufigsten gestellt wurden, wie man diesen Goo-Effekt erzeugt. Deshalb habe ich die Technik in etwas Interaktives integriert und sie als Tutorial auf meinem YouTube-Kanal veröffentlicht. Es ist derzeit mein beliebtestes Video:

Wenn Ihnen dieser Artikel gefallen hat, verpassen Sie Chris Gannon nicht live bei London generieren am 21. September. Die zweitägige Konferenz umfasst 16 Sitzungen zu adaptiven Schnittstellen, Webleistung, Prototyping, Barrierefreiheit, Konversationsdesign, UX-Strategie, Aufbau reaktionsschneller, wiederverwendbarer Komponenten und vielem mehr. Es gibt auch vier Workshops zur Auswahl, und wenn Sie Kaufen Sie ein Bundle-Ticket Sie sparen £ 95.

Zum Thema passende Artikel: