Ich habe ein paar Illustrationen in Illustrator gemacht und plane, sie für eine Website zu animieren, an der ich arbeite. Ich habe von Create.js Toolkit mit Flash gehört, aber ist es der beste Weg oder gibt es einen anderen ? " bessere "Art und Weise, es zu tun?
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/
Antworten:
Es gibt viele Möglichkeiten, Dinge im Web zu animieren. Es gibt noch mehr Möglichkeiten, Animationen zu erstellen, als sie in Webanimationen zu exportieren.
Das Entwerfen von Animationen in AfterEffects oder Animate CC (mit denen Illustrator- und Photoshop-Dateien importiert werden können) bietet aus offensichtlichen Gründen der Arbeitsteilung und der Verwendung eines grafischen Editors enorme Vorteile.
Vor diesem Hintergrund sollten Sie am Ende immer eine der folgenden Anweisungen kompilieren :
Eingeschränkte Interaktionsmöglichkeiten:
Vollständiger interaktiv:
Jetzt werde ich näher auf die einzelnen Punkte eingehen.
Ein GIF ist ein guter Weg, wenn die Animationen nicht viel Interaktion erfordern, nicht dynamisch dimensioniert werden müssen und relativ klein sind. Gut gemachte GIFs können so detailliert sein wie die Abbildung, die Sie verlinkt haben, ohne Leistungsprobleme. Selbst geringfügige Interaktionen mit einem transparenten Overlay (oder nur einem Teil davon) sind möglich.
Randnotiz: 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 Enddateigröße stark reduziert wird. Sie könnten erwägen, dasselbe zu tun.
Eine andere Möglichkeit, eine flüssige, aber gut gestaltete Animation beizubehalten, ist die Verwendung eines Sprites. Google verwendet diesen Ansatz beispielsweise für Logoanimationen . Ein weiteres gutes Beispiel ist die alte Website von Alexander Engzell, auf der eine kranke Typografie-Animation mit diesem Ansatz gezeigt wurde. Dies ist optimal, wenn ein GIF zu groß wäre, Sie jedoch nicht viel Interaktion benötigen.
Ich habe auch eine sehr interessante JavaScript-Animation gesehen, die einem von Google verwendeten Sprite oder GIF ähnelt (bewegen Sie den Mauszeiger über das Chrome-Bild oben links - es muss in Chrome sein), aber stattdessen wird eine animierte Maske verwendet. Ich vermute, sie haben diesen Ansatz verwendet, um die Gesamtgröße der Datei zu begrenzen.
Wir haben in den letzten Jahren in Bezug auf Video großartige Fähigkeiten erlangt. Mit diesem <video>Element können wir die Art und Weise anpassen, in der wir interagieren, und Videos wie nie zuvor verwenden. Jetzt können wir ganz einfach Hintergrundvideos im Vollbildmodus verwenden und beispielsweise Frame für Frame durch Scrollen gehen . Mir ist auch aufgefallen, dass FaceBook Video für einige einfache Animationen verwendet , um Benutzer in ihren Feeds zu besonderen Ereignissen einzuladen . Die Vorteile sind, dass es auf eine ziemlich kleine Dateigröße komprimiert werden kann und eine breitere Palette von Animationen (alles, was Videobearbeitungssoftware kann) ausführen kann. Wenn jemand ein krankes Video machen kann, ist es ziemlich einfach, daraus eine fantastische Ergänzung für eine 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 daher nicht überall.
Wenn Sie möchten, dass die Animation dynamisch generiert wird, wenn Sie mehr als eine grundlegende Interaktion benötigen, wenn Sie 3D-Umgebungen erstellen möchten und in vielen anderen Fällen GIFs, Sprites oder Videos einfach nicht Schneide es. Sobald dies entschieden ist, gibt es mehrere andere Optionen, von denen die beste von Ihrer Animation und Ihren Bedürfnissen abhängt.
Ich habe keine Statistiken, aber die meisten Webanimationen, die ich gesehen habe, verwenden Canvas . Canvas eignet sich aufgrund seiner Leistung und Flexibilität bei der Erstellung hervorragend. Es wird nur ein Browser (DOM) -Element verwendet, da es - wie auf einer echten Leinwand - nur Dinge übereinander malt. Indem wir mit JavaScript verfolgen, was und wo gemalt wurde, können wir einige ziemlich großartige Animationen und sogar Spiele erstellen.
Der Hauptnachteil der Verwendung von Canvas ist jedoch die relative Skalierbarkeit. Abhängig von der Animation ist es häufig schwieriger, eine reaktionsschnelle Canvas-Animation zu erstellen, als dies mit anderen Mitteln möglich ist. Ein weiterer Nachteil ist, dass viele Inhalte auf einem Canvas nicht sehr SEO-freundlich sind, da Canvas-Elemente nicht gecrawlt werden können. Aus dem gleichen Grund ist die Auswahl von Text für Benutzer mit Canvas schwierig (insbesondere ohne die Verwendung einer Bibliothek wie CreateJS).
Eine Hauptanwendung von Canvas sind Googles Doodles , die häufig in Canvas erstellt werden. Wenn sie ein Spiel oder eine interaktive Animation haben, verwenden sie jedes Mal Canvas, wenn ich sie angeschaut habe. Wenn keine Interaktion stattfindet, wird ein GIF oder ein Sprite verwendet.
Es gibt viele großartige Bibliotheken, die die Arbeit mit Canvas erleichtern, obwohl dies definitiv nicht erforderlich ist, je nachdem, was getan werden muss. Unter den nur für Canvas erstellten sind CreateJS (das Sie aus Animate CC exportieren können), Pixi.js , PaperJS , KineticJS und FabricJS (in der Reihenfolge meines Eindrucks). Ein After Effects-Plugin namens Lottie (ehemals BodyMovin) kann auch in Canvas (oder SVG [1] ) exportiert werden und verfügt über 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 Abbildung, die Sie verlinkt haben, würde ich empfehlen, eine Art Framework zu verwenden, aber für viele Dinge sind sie nicht wirklich notwendig, nur nützlich - insbesondere, wenn Sie bereits wissen, wie man eines davon verwendet.
Eine weitere unglaublich leistungsstarke Methode, um Dinge im Web auf einfache Weise 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 die meisten Dinge wie das Koordinatensystem und die Transformationen von SVG enthalten großartige Artikel, in denen sie erklärt werden.
Eines der vielen schönen Dinge an SVG ist, dass es mit JavaScript, reinem CSS (einschließlich :hoverStatus, transforms, transitions und animations) oder SMIL-Animationen (die "native" Art, Dinge mit SVG zu animieren - aber der IE tut es nicht) animiert werden kann. t überhaupt unterstützen und es wird allmählich abgeschrieben ). Ich empfehle, zuerst CSS und dann JavaScript zu verwenden, wenn dies in CSS nicht (relativ) einfach ist. Zum Verwandeln von SVG-Elementen ist es praktisch erforderlich, ein Tool wie das MorphSVG-Plugin von GSAP zu verwenden, es sei denn, Sie können nur eine teilweise Unterstützung in Anspruch nehmen. In diesem Fall ist SMIL möglicherweise akzeptabel.
Da SVG-Elemente in jeder Form vorliegen können, können mit ihnen einige coole Effekte erzeugt werden . Sarah Drasner hat einige hilfreiche Leistungsbenchmarks in Bezug auf SVG-Animationen erstellt, die zeigen, welche Arten der Animation von SVG in Bezug auf die Leistung am besten sind.
Abhängig von der Animation (und der Notwendigkeit der Browserunterstützung) kann eine Bibliothek wie Snap.svg oder GSAP nützlich sein, aber häufig ist nur CSS und bei Bedarf ein wenig benutzerdefiniertes JS erforderlich. Vor diesem Hintergrund können ein After Effects-Plugin namens Lottie (ehemals BodyMovin) und eine Flash-Erweiterung namens Flash 2 SVG für die Erstellung von SVG-Animationen sehr hilfreich sein.
Weitere Informationen finden Sie in diesem verwandten Beitrag 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. Es gibt jedoch auch andere Möglichkeiten , dies zu tun.
Nach meiner Erfahrung sollten CSS-Animationen und -Übergänge hauptsächlich für Benutzeroberflächenelemente und andere grundlegende Übergänge und Animationen verwendet werden. Selbst dann ist es manchmal angebracht, eine JS-Animationsbibliothek wie GSAP oder Velocity.js 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 praktisch ist oder nicht.
Während wir mit reinem CSS verrückte Dinge kreieren können , ist es im Allgemeinen schwieriger, komplizierte Illustrationen wie die, die Sie als Beispiel zur Verfügung stellen, mit CSS zu erstellen, selbst wenn Sie zusätzlich Bilder manipulieren. Komplexe CSS-Animationen sind oftmals schwieriger zu warten als die entsprechenden JavaScript-Animationen. Der andere Nachteil ist, dass CSS-Animationen mit JavaScript nur schwer zu ändern sind und in Kombination mit JavaScript nicht gut wiedergegeben werden können.
Trotzdem 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, lesen Sie meine Einführung in die Webanimation .
Hilfreiche Animationen und Beschleunigungsfunktionen finden Sie auch in Bibliotheken wie Animate.css , die Sie aus Ihren eigenen Projekten abrufen und zu diesen hinzufügen können. Sie werden fast nie die ganze Bibliothek brauchen, nur die Teile, die Sie wollen.
DOM-basierte JavaScript-Animationen sind recht einfach. Sie haben einen schlechten Ruf wegen schrecklicher Animationsbibliotheken wie jQuery animate(), aber sie können besonders leistungsfähig sein, insbesondere wenn sie die Webanimations-API ( siehe unten) oder eine spezialisierte Animationsbibliothek wie GSAP , Velocity.js oder mo.js verwenden . GSAP hat sogar ein spezielles Plugin , um jQueries .animatespezifisch zu ersetzen . Mithilfe einer solchen Bibliothek können sie andere Arten von Animationen für intensivere Animationen übertreffen, z. B. das Animieren einer ganzen Reihe von Elementen.
Der Hauptgrund, warum Sie eine DOM-basierte Animation benötigen, ist, wenn Sie viele Benutzeranimationen oder komplexe Zeitleisten mit bereits erstellten DOM-Elementen haben. Oft ist es aus bereits genannten Gründen am besten, etwas wie Canvas über dem DOM zu verwenden.
Mit Bibliotheken wie GSAP können wir verrückte Dinge tun, z. B. eine Animation beim Schweben verlangsamen, indem wir die Animationsmatrizen verfolgen. Auf diese Weise können DOM-basierte Animationen besser angepasst und interaktiver sein als jede andere Form der Animation, wenn sie ordnungsgemäß ausgeführt werden. Der einzige Nachteil ist, dass es manchmal, abhängig davon, wie es gebaut wurde und was es tun muss, keine gute Leistung bringt.
WebGL ist eine Möglichkeit, hauptsächlich 3D-Werke zu erstellen. Es hat einige tolle Projekte , die Sie überprüfen sollten. Es sollte natürlich nicht auf jeder Webseite verwendet werden, aber es ist wichtig zu erwähnen.
Tatsächlich werden DOM-Elemente animiert, um 3D- (und 2D-) Umgebungen zu erstellen, was aufgrund des Potenzials fantastisch ist. Wenn Sie eine Bibliothek verwenden, greift WebGL auf Canvas zurück, bietet jedoch auf Mobilgeräten keine großartige Unterstützung und kann sehr leistungsintensiv sein. Im Allgemeinen ist es ziemlich klar, wann Sie WebGL verwenden müssen oder nicht.
Nach meiner Erfahrung ist die Verwendung einer WebGL-Bibliothek praktisch erforderlich. Zum Glück gibt es einige gute. ThreeJS ist bei weitem das häufigste, das ich gesehen habe, gefolgt von PixiJS . Ein WebGL-Framework wie A-Frame kann es auch sehr einfach machen, es aufzunehmen und grundlegende Dinge zu erstellen.
Die Webanimations-API ist ein Versuch zu standardisieren, wie Animationen in Browsern implementiert und verwaltet werden, gepaart mit Leistungsverbesserungen. Es soll mit DOM-Elementen einschließlich SVG verwendet werden. Es ähnelt der Struktur einer CSS-Animation (in JS-Form), fügt jedoch Funktionen wie eine Zeitleiste und eine verbesserte Leistung hinzu.
Die Leistung wird verbessert, indem Animationen in den Compositor-Thread eingefügt werden (weitere Informationen finden Sie in diesem großartigen Beitrag zum Thema). Eine Einführung in die Verwendung finden Sie in den Mozilla-Dokumenten oder in diesem Einführungsbeitrag .
Sie können fragen: " Wird dies JavaScript-Animationsbibliotheken ersetzen? " Die Antwort lautet " Hoffentlich einige ". Es ist für alle von Vorteil, wenn die Animations-Engines des nativen Browsers verbessert werden und einige weniger leistungsfähige Animationsbibliotheken unbrauchbar werden. Davon abgesehen haben leistungsfähigere Animationsbibliotheken noch weitere Vorteile, wie die von GSAP . Ob Sie eine Bibliothek benötigen, sobald WAAPI allgemein unterstützt wird, hängt immer noch von Ihren Anforderungen ab.
WAAPI hat derzeit keinen guten Support , kann aber heute mit einer Polyfill in der Produktion eingesetzt werden. Es sieht so aus, als würde es weiterhin besser werden und mehr Unterstützung bekommen.
Vermeiden Sie die Verwendung nicht-performanten Eigenschaften oder verursachen Rückfluesse / Bemalungen .
Vermeiden Sie es, eine Reihe von Elementen auf der Seite zu animieren, da diese intensiver sind und auch später zu Änderungen führen können.
Verwenden Sie bei der Verwendung von CSS nach Möglichkeit eine transitionÜberanimation (innerhalb des zulässigen Rahmens). Sie sind leistungsfähiger und in der Regel einfacher zu bearbeiten.
Verwenden Sie die will-changeEigenschaft auf intelligente Weise für große Elemente, die Sie animieren möchten, damit der Browser dies rechtzeitig weiß. Weitere Details und Vorschläge dazu finden Sie in diesem SitePoint-Artikel zum Thema.
Vermeiden Sie setIntervalund entscheiden requestAnimationFrameSie sich, wenn Sie Timings in JavaScript durchführen (gute Animationsbibliotheken wie GSAP erledigen dies für Sie, wenn Sie ihre Timelines verwenden).
Verwenden Sie nach Möglichkeit die Webanimations-API, da diese Funktionen zum Animieren mit anderen Methoden in JavaScript nicht zur Verfügung stehen.
Sie sollten Flash im Endprodukt niemals ausführen . JavaScript-Animationen sind leistungsfähiger, dynamischer, einfacher zu bearbeiten, erfordern keine Downloads, funktionieren auf mehr Plattformen (Flash funktioniert auf den meisten Tablets / Handys nicht) und reagieren schneller als umfangreiche alte Flash-Animationen. Sie sind auch nicht sehr zugänglich und nicht SEO-freundlich.
Vor diesem Hintergrund ist Animate CC (eine Umbenennung von Flash) eine nützliche Methode zum Erstellen von Animationen und kann mit Create.js in Canvas exportiert werden .
Es gibt normalerweise mehrere Methoden, mit denen Sie eine Animation erstellen können. Das Beste hängt davon ab, was Sie wollen, und manchmal gibt es keine eindeutig bessere Methode. Oftmals benutze ich mehrere im selben Projekt. Das Wichtigste ist, kritisch zu denken , genau zu verstehen, wie sich die Animation verhalten soll, und die darauf basierende Methode zu bestimmen. Es hilft auch, wenn Sie in jedem etwas gearbeitet haben.
[1] - Lottie kann auch in native Android-, iOS- und React Native-Formate exportieren .
Bei statischen Animationen (Animationen, die nicht für die Interaktion mit dem Benutzer gedacht sind) stellte ich fest, dass das Animieren der Illustrationen in After Effects und das anschließende Exportieren des Endergebnisses in eine GIF-Datei das Beste für mich war. Dies macht die Animation absolut browserfreundlich und garantiert eine identische Visualisierung auf jedem Gerät.
Wenn Sie jedoch nach etwas suchen, mit dem ein Benutzer interagieren könnte, ist Canvas meiner Meinung nach der richtige Weg, und dafür scheint CreateJS für den Job mit der EaseJS-Bibliothek geeignet zu sein.
Wie auch immer, gemäß Ihrem Beispiel könnten Sie es genauso gut mit einer animierten GIF-Datei tun und genau das gleiche Ergebnis erzielen.
Wenn Sie mit After Effects arbeiten, können Sie das Bodymovin- Plug-In verwenden. Es macht Ihre Arbeit für mobile und Web-Nutzung. Sie haben die Dateien .json und lottie.js, die Sie in Ihrem HTML verwenden können. Zuvor müssen Sie jedoch die Option "Skripten erlauben, Dateien zu schreiben" deaktivieren und in den allgemeinen Einstellungen auf das Netzwerk zugreifen . 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, weil es mehr Zeit zum Laden braucht.
Sie können es hier herunterladen: http://aescripts.com/bodymovin Fügen Sie einfach Ihren Preis hinzu, oder, wenn Sie es kostenlos möchten, können Sie einfach 0,00 $ setzen ...
Hier finden Sie ein Tutorial zum Verwenden eines Bodymovins und zum Einstellen Ihrer Animation in Ihrer Website mit Visual Studio: youtube.com/watch?v=YmPsCD5jRDw&t=282s
Wenn Sie mit HTML- und CSS-Grundlagen vertraut sind, sollte dies für Sie einfach sein. Dieses Tutorial hat mir geholfen, ich hoffe, dass es Ihnen hilft.