Ich habe ein paar Illustrationen in Illustrator erstellt und plane, sie für eine Website zu animieren, an der ich arbeite. Ich habe vom Create.js- Toolkit mit Flash gehört, aber ist es der beste Weg oder gibt es einen anderen " bessere" Vorgehensweise?
Hier ist ein Beispiel für die Art von Animationen, die ich anstrebe: http://kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/
Es gibt viele Möglichkeiten, Dinge im Web zu animieren. Es gibt noch mehr Möglichkeiten, Animationen zu erstellen und sie dann in Webanimationen zu exportieren.
Das Entwerfen von Animationen in etwas wie AfterEffects oder Animate CC (das sowohl Illustrator- als auch Photoshop-Dateien importieren kann) bietet enorme Vorteile aus den offensichtlichen Gründen der Arbeitsteilung und der Verwendung eines grafischen Editors.
Davon abgesehen sollten Sie am Ende immer zu einem der folgenden kompilieren :
Eingeschränkte Interaktionsmöglichkeiten:
Mehr vollständig interaktiv:
Nun werde ich auf jeden etwas detaillierter eingehen.
Ein GIF ist eine gute Möglichkeit, wenn die Animationen nicht viel Interaktion erfordern, nicht dynamisch in der Größe angepasst werden müssen und relativ klein sind. Gut gemachte GIFs können so detailliert sein wie die von Ihnen verlinkte Illustration, ohne dass Sie sich Sorgen um die Leistung machen müssen. Sogar eine geringfügige Interaktion mit einem transparenten Overlay darüber (oder nur einem Teil davon) ist möglich.
Nebenbemerkung: Es gibt jetzt ein von Imgur erstelltes.gifv Format , das GIF-Dateien im Handumdrehen in die Videoformate WebM oder MP4 konvertiert. Dies erhöht die Leistung, indem die Größe der Enddatei stark reduziert wird. Sie könnten in Betracht ziehen, dasselbe zu tun.
Eine andere Möglichkeit, eine reibungslose, aber hochstilisierte Animation beizubehalten, ist die Verwendung eines Sprites. Google verwendet diesen Ansatz beispielsweise für Logoanimationen . Ein weiteres großartiges Beispiel ist die alte Website von Alexander Engzell, die eine kranke Typografie-Animation mit diesem Ansatz hatte. Dies ist optimal, wenn ein GIF zu groß wäre, Sie aber nicht viel Interaktion benötigen.
Ich habe auch eine sehr interessante JavaScript-Animation gesehen, die einem Sprite oder GIF ähnelt, das von Google verwendet wird (bewegen Sie das Chrome-Bild oben links – es muss sich in Chrome befinden), aber stattdessen eine animierte Maske verwendet. Ich vermute, sie haben diesen Ansatz verwendet, um die Gesamtdateigröße zu begrenzen.
Wir haben in den letzten Jahren großartige Fähigkeiten in Bezug auf Video gewonnen. Mit dem <video>Element können wir die Art und Weise, wie wir interagieren, anpassen und Videos wie nie zuvor verwenden. Jetzt können wir ganz einfach Hintergrundvideos im Vollbildmodus verwenden und Dinge wie Bild für Bild beim Scrollen tun . Mir ist auch aufgefallen, dass Facebook Videos für einige einfache Animationen verwendet , wenn es Benutzer bei besonderen Ereignissen in ihrem Feed willkommen heißt. Die Vorteile sind, dass es auf eine ziemlich kleine Dateigröße komprimiert werden kann und eine größere Auswahl an Animationen erstellen kann (alles, was eine Videobearbeitungssoftware kann). Wenn also jemand ein krankes Video machen kann, ist es ziemlich einfach, daraus eine fantastische Ergänzung zu einer Webseite zu machen.
Offensichtlich eignen sich Videos nicht für die meisten Animationen im Web (z. B. Schaltflächenübergänge usw.), verwenden Sie sie also nicht überall.
Wenn Sie möchten, dass die Animation dynamisch generiert wird, wenn Sie mehr als eine wirklich einfache Interaktion benötigen, wenn Sie 3D-Umgebungen erstellen möchten, und in vielen anderen Fällen, reicht ein GIF, Sprite oder Video einfach nicht aus Schneide es. Sobald dies entschieden ist, gibt es mehrere andere Optionen, von denen die beste von Ihrer Animation und Ihren Bedürfnissen abhängt.
Viele Webanimationen verwenden Canvas . Canvas ist aufgrund seiner Leistung und Flexibilität bei der Erstellung großartig zu verwenden. Es verwendet nur ein Browserelement (DOM), da es einfach - wie auf einer echten Leinwand - Dinge übereinander malt. Indem wir mit JavaScript nachverfolgen, was wo gemalt wurde, können wir einige ziemlich tolle Animationen und sogar Spiele erstellen.
Der Hauptnachteil der Verwendung von Canvas ist jedoch die relative Schwierigkeit, sie zu skalieren. Abhängig von der Animation ist es natürlich oft schwieriger, eine responsive Canvas-Animation zu erstellen, als mit anderen Mitteln. Ein weiterer Nachteil ist, dass es nicht sehr SEO-freundlich ist, viele Inhalte auf einem Canvas zu haben, da Canvas-Elemente nicht gecrawlt werden können (Sie können dies umgehen, indem Sie ggf. visuell verstecktes HTML des Inhalts einfügen). Ebenso sind Dinge wie die Textauswahl für Benutzer mit Canvas schwierig (insbesondere ohne die Verwendung einer Bibliothek wie CreateJS).
Eine Hauptanwendung von Canvas sind die Doodles von Google , die häufig in Canvas erstellt werden. Wenn sie ein Spiel oder eine interaktive Animation haben, verwenden sie Canvas jedes Mal, wenn ich nachgesehen habe. Wenn es keine Interaktion gibt, verwenden sie ein GIF oder Sprite.
Es gibt viele großartige Bibliotheken, die die Arbeit mit Canvas erleichtern, obwohl dies definitiv nicht erforderlich ist, je nachdem, was getan werden muss. Zu den nur für Canvas erstellten gehören CreateJS (in das Sie aus Animate CC exportieren können), Pixi.js , PaperJS , KineticJS und FabricJS (in der Reihenfolge meines Eindrucks von ihnen). Ein After Effects-Plugin namens Lottie (ehemals BodyMovin) kann auch nach Canvas (oder SVG [1] ) exportieren und hat eine eingebaute Animations-Engine.
Natürlich können Sie auch größere Animationsbibliotheken wie GSAP problemlos mit Canvas koppeln. Für etwas so Detailliertes wie die von Ihnen verlinkte Illustration würde ich empfehlen, eine Art Framework zu verwenden, aber für viele Dinge sind sie nicht wirklich notwendig, nur nützlich - besonders wenn Sie bereits wissen, wie man eines davon verwendet.
Eine weitere unglaublich leistungsstarke Möglichkeit, Dinge im Web reaktionsschnell zu animieren, ist die Verwendung von SVG ( Scalable Vector Graphics ). Sie erfüllen ihren Zweck - skalierbare Vektoren zu sein - gut. Viele finden die Verwendung von SVGs zunächst verwirrend, aber für die meisten Dinge wie das Koordinatensystem und die Transformationen von SVG gibt es großartige Artikel, die sie erklären.
Eines der vielen schönen Dinge an SVG ist, dass es mit JavaScript, reinem CSS (einschließlich :hoverZuständen, transforms, transitions und animations) oder SMIL-Animationen (die "native" Art, Dinge mit SVG zu animieren - aber IE nicht) animiert werden kann überhaupt nicht unterstützen und es wird allmählich abgeschrieben ). Ich empfehle, zuerst CSS und dann JavaScript zu verwenden, wenn es in CSS nicht (relativ) einfach ist. Zum Morphen von SVG-Elementen ist es praktisch notwendig, ein Tool wie das MorphSVG-Plugin von GSAP zu verwenden, es sei denn, Sie sind mit nur teilweiser Unterstützung einverstanden, in diesem Fall könnte SMIL akzeptabel sein.
Da SVG-Elemente jede beliebige Form haben können, können sie verwendet werden, um einige coole Effekte zu erzeugen . Sarah Drasner hat einige hilfreiche Performance-Benchmarks zu SVG-Animationen erstellt, die zeigen, welche Art der Animation von SVG leistungsmäßig am besten ist.
Abhängig von der Animation (und dem Bedarf an Browserunterstützung) kann eine Bibliothek wie Snap.svg oder GSAP nützlich sein, aber oft ist CSS und, falls erforderlich, ein wenig benutzerdefiniertes JS alles, was erforderlich ist. Vor diesem Hintergrund können ein After Effects-Plug-in namens Lottie (ehemals BodyMovin) und eine Flash-Erweiterung namens Flash 2 SVG beim Erstellen von SVG-Animationen sehr hilfreich sein.
Weitere Einzelheiten finden Sie in diesem verwandten Beitrag speziell zum Animieren von SVG-Elementen.
PS Es ist am besten, SVGs in einem <object>Tag zu verwenden oder direkt in ein <svg>XML-Element einzubetten, wenn es interaktiv ist, und als Hintergrundbild, wenn es nicht interaktiv ist, aber es gibt auch andere Möglichkeiten , dies zu tun.
Meiner Erfahrung nach sollten CSS-Animationen und -Übergänge hauptsächlich für UI-Elemente und andere grundlegende Übergänge und Animationen verwendet werden. Selbst dann ist es manchmal angebracht, eine JS-Animationsbibliothek wie GSAP für UI-Animationen/Übergänge zu verwenden. Es hängt wirklich von der Art des gewünschten Verhaltens ab und davon, ob es in CSS bequem ist oder nicht.
Während wir mit reinem CSS verrückte Dinge erstellen können , ist es im Allgemeinen schwieriger, komplizierte Illustrationen wie die, die Sie als Beispiel bereitstellen, mit CSS zu erstellen, selbst wenn Sie zusätzlich Bilder manipulieren. Komplexe CSS-Animationen sind oft auch schwieriger zu warten als ihre JavaScript-Pendants. Der andere Nachteil ist, dass CSS-Animationen mit JavaScript schwer zu ändern sind und nicht gut funktionieren, wenn sie mit JavaScript gemischt werden.
Abgesehen davon sollten einfache Interaktionen mit Übergängen und Animationen normalerweise CSS verwenden. Sie sollten es standardmäßig verwenden. Um zu lernen, wie man mit CSS animiert, sieh dir meine Einführung in die Webanimation an .
Hilfreiche Animationen und Beschleunigungsfunktionen finden Sie auch in Bibliotheken wie Animate.css , die Sie aus Ihren eigenen Projekten ziehen und hinzufügen können. Sie werden fast nie die gesamte Bibliothek benötigen, nehmen Sie nur die gewünschten Teile.
DOM-basierte JavaScript-Animationen sind ziemlich geradlinig. Sie haben einen schlechten Ruf wegen schrecklicher Animationsbibliotheken wie jQuery's animate(), aber sie können besonders leistungsfähig sein, insbesondere wenn die Webanimations-API (siehe unten) oder eine spezialisierte Animationsbibliothek wie GSAP , Anime oder tween.js verwendet wird . Mit einer solchen Bibliothek können sie andere Arten von Animationen für intensivere Animationen, z. B. das Animieren einer ganzen Menge von Elementen, oft übertreffen.
Der Hauptgrund, warum Sie eine DOM-basierte Animation verwenden müssen, ist, wenn Sie viele Benutzeranimationen oder komplexe Zeitleisten mit bereits erstellten DOM-Elementen haben. Oftmals ist es aus bereits genannten Gründen am besten, so etwas wie Canvas über dem DOM zu verwenden.
Mit Bibliotheken wie GSAP können wir verrückte Dinge tun, wie z . B. eine Animation beim Schweben verlangsamen , indem wir die Animationsmatrizen verfolgen. Auf diese Weise können DOM-basierte Animationen individueller und interaktiver sein als jede andere Form der Animation, wenn sie gut gemacht ist. Der einzige Nachteil ist, dass es manchmal, je nachdem, wie es gebaut ist und was es tun muss, nicht gut funktioniert.
WebGL ist eine Möglichkeit, hauptsächlich 3D-Werke zu erstellen. Es hat einige tolle Projekte , die Sie sich ansehen sollten. Es muss natürlich nicht auf jeder Webseite verwendet werden, aber es ist wichtig zu erwähnen.
Aus meiner Erfahrung ist die Verwendung einer WebGL-Bibliothek praktisch notwendig. Zum Glück gibt es einige gute. ThreeJS ist bei weitem das häufigste, das ich gesehen habe, gefolgt von PixiJS . Um Bilder und Videos einer normalen Website zu animieren, ist Curtains.js eine großartige Option. Ein WebGL-Framework wie A-Frame kann auch das Aufnehmen und Erstellen grundlegender Dinge ziemlich einfach machen.
Ich habe mehr über das Hinzufügen von WebGL-Effekten zu "normalen" Webseiten auf CSS-Tricks geschrieben .
Die Webanimations-API ist ein Versuch, die Implementierung und Wartung von Animationen über Browser hinweg zu standardisieren, gepaart mit Leistungsverbesserungen. Es soll mit DOM-Elementen einschließlich SVG verwendet werden. Es ähnelt der Struktur einer CSS-Animation (in einer JS-ähnlichen Form), fügt jedoch Funktionen wie eine Zeitleiste und verbesserte Leistung hinzu.
Es verbessert die Leistung, indem Animationen in den Compositor-Thread eingefügt werden (weitere Einzelheiten finden Sie in diesem großartigen Beitrag zu diesem Thema). Eine Einführung in die Verwendung finden Sie in der Mozilla -Dokumentation oder in diesem Einführungsbeitrag .
Sie fragen sich vielleicht: „ Wird dies JavaScript-Animationsbibliotheken ersetzen? “ Die Antwort lautet „ Hoffentlich einige “. Es ist für alle von Vorteil, wenn sich die nativen Browser-Animations-Engines verbessern, und dadurch werden einige weniger leistungsstarke Animationsbibliotheken nutzlos. Abgesehen davon werden leistungsfähigere Animationsbibliotheken immer noch zusätzliche Vorteile haben, wie die von GSAP festgestellten . Ob Sie eine Bibliothek benötigen oder nicht, wenn WAAPI weithin unterstützt wird, hängt immer noch von Ihren Bedürfnissen ab.
WAAPI hat ziemlich gute Unterstützung und hat eine Polyfill , wenn Sie IE-Unterstützung benötigen.
Vermeiden Sie die Verwendung von leistungsschwachen Eigenschaften oder das Verursachen von Reflows/Repaints .
Vermeiden Sie es, eine Reihe von Elementen auf der Seite zu animieren, da sie intensiver sind und später auch mühsam geändert werden können.
Verwenden Sie bei der Verwendung von CSS transitionwann immer möglich (im Rahmen des Zumutbaren) ein über einer Animation. Sie funktionieren besser und sind im Allgemeinen einfacher zu handhaben.
Verwenden Sie die Eigenschaft intelligent will-changefür große Elemente, die Sie animieren werden, damit der Browser dies im Voraus weiß. Für weitere Details und Vorschläge dazu lesen Sie so etwas wie diesen SitePoint-Artikel zu diesem Thema.
Vermeiden Sie setIntervalund entscheiden Sie sich dafür requestAnimationFrame, wenn Sie Timings in JavaScript erstellen (gute Animationsbibliotheken wie GSAP erledigen dies für Sie, wenn Sie ihre Timelines verwenden).
Verwenden Sie nach Möglichkeit die Webanimations-API, da sie über Funktionen zum Animieren mit anderen Methoden in JavaScript verfügt, die nicht vorhanden sind.
Es gibt verschiedene Möglichkeiten, Dinge beim Scrollen zu animieren. Eine Übersicht finden Sie in meinem Beitrag zu CSS-Tricks .
Sie sollten Flash niemals im Endprodukt ausführen . Flash ist offiziell tot. Verwenden Sie es nicht. Der einzige Fall, in dem Sie es in Betracht ziehen könnten, ist, wenn Sie eine Installation durchführen und über spezielle Hardware und Software verfügen, von der Sie wissen, dass sie Flash ausführt.
Abgesehen davon ist Animate CC (ein Rebranding von Flash) eine nützliche Methode zum Erstellen von Animationen und kann mit Create.js nach Canvas exportiert werden .
Es gibt normalerweise mehrere Methoden, die Sie verwenden können, um eine Animation zu erstellen. Die beste Methode hängt davon ab, was Sie tun möchten, und manchmal gibt es keine eindeutig bessere Methode. Oft finde ich mich dabei, mehrere für dasselbe Projekt zu verwenden. Das Wichtigste ist, kritisch zu denken , genau zu verstehen, wie sich die Animation verhalten soll, und auf dieser Grundlage über die Methode zu entscheiden. Es hilft auch, wenn Sie in jedem ein wenig gearbeitet haben.
Nach meiner Erfahrung habe ich bei statischen Animationen (Animationen, die nicht für eine Interaktion mit dem Benutzer vorgesehen sind) festgestellt, dass es für mich am besten funktioniert hat, die Illustrationen in After Effects zu animieren und anschließend das Endergebnis in eine .GIF-Datei zu exportieren. Das macht die Animation absolut browserfreundlich und garantiert eine identische Darstellung auf jedem Endgerät.
Wenn Sie jedoch nach etwas suchen, mit dem ein Benutzer interagieren könnte, glaube ich, dass Canvas in der Tat der richtige Weg ist, und dafür scheint CreateJS mit der EaseJS-Bibliothek genau das Richtige für den Job zu sein.
Wie auch immer, nach Ihrem Beispiel könnten Sie es genauso gut mit einer animierten GIF-Datei machen und genau das gleiche Ergebnis erzielen.
Wenn Sie mit After Effects arbeiten, können Sie das Plug-in Bodymovin verwenden. Es rendert Ihre Arbeit für die mobile und Web-Nutzung. Sie haben .json- und lottie.js-Dateien, die Sie in Ihrem HTML verwenden können. Aber zuerst müssen Sie Allow Scripts to Write files und access Network in den allgemeinen Einstellungen deaktivieren. Wenn Sie das getan haben, gehen Sie zu Fenster , Erweiterungen und suchen Sie Bodymovin . Wählen Sie Ihre Komposition aus, legen Sie den Speicherort fest und klicken Sie auf „Rendern“. Fügen Sie Ihre .json- und lottie.js-Dateien in Ihren HTML-Code ein und Ihre Arbeit ist erledigt. Ich denke, dass GIF nicht die beste Lösung ist, da es mehr Zeit zum Laden benötigt.
Sie können es hier herunterladen: http://aescripts.com/bodymovin Fügen Sie einfach Ihren Preis hinzu, oder wenn Sie es kostenlos haben möchten, können Sie einfach 0,00 $ eingeben...
Hier ist ein Tutorial zur Verwendung eines Bodymovin und zum Einstellen Ihrer Animation auf Ihrer Website mit Visual Studio: youtube.com/watch?v=YmPsCD5jRDw&t=282s
Wenn Sie HTML- und CSS-Grundlagen kennen, sollte es für Sie einfach sein. Dieses Tutorial hat mir geholfen, ich hoffe, dass dies Ihnen helfen könnte.
nachts2