Vektorgrafiken übernehmen jetzt das Web und sogar mobile Anwendungen. Symbole, Schaltflächen und Elemente von Webseiten oder mobilen Apps werden zunehmend vektorbasiert, wodurch Bitmaps gelöscht werden, weil sie auf allen Arten von Bildschirmauflösungen, dpi, Verhältnissen usw. gerendert werden müssen und die Möglichkeit zum "Zoomen" besteht Besser gelesene Seiten in mobilen Browsern machten die Bitmaps-Assets hässlich und unbrauchbar.

Es ist an der Zeit, animierte Symbole, Hintergründe und Steuerelemente in SVG zu erstellen. Wie animieren Sie SVG-Dateien?

Viele dieser Antworten finden Sie auch in dieser verwandten Frage zum Animieren von Illustrationen für das Web.

Vermeiden Sie SMIL-Animationen

Sara Soueidan, wahrscheinlich die beste Animatorin von SVGs im Internet, schrieb: "Ich weiß, dass ich den Leitfaden für SMIL-Animationen geschrieben habe, aber da ich ihre Zukunft sehe, benutze ich sie nicht mehr persönlich." Das solltest du auch nicht.

SMIL - Animationen funktionieren nicht in jedem IE, Rand, einige mobile Browser und werden durch Chrome / Opera allmählich fallen gelassen (obwohl in jüngerer Zeit, sagte der Chrome - Team diese deprecation vorübergehend ausgesetzt wird ). Sie sollten es in 99% der Fälle vermeiden, sie zu verwenden.

Verwenden Sie CSS für sehr einfache Animationen

SVG kann weitgehend mit reinem CSS animiert werden (einschließlich der Verwendung von :hoverStatus, transformS, transitionS und animationS). Es ist geplant, vollständige CSS-Animationsunterstützung zu erhalten, aber derzeit werden nur einige unterstützt und können bei browserübergreifenden Problemen fehlerhaft sein.

Sara Soueidan sagt CSS ist für belebende SVGs aber bevorzugt JS , weil es diese Cross - Browser - Probleme zu lösen hilft. Verwenden Sie es als solches, wenn Sie auf JS zurückgreifen können, wenn die Animationen komplexer sind oder nicht browserübergreifend funktionieren.

Verwenden Sie JavaScript-Animationen, wenn CSS nicht funktioniert

Meistens können SVGs mit etwas JavaScript animiert werden, ohne dass eine JavaScript-Animationsbibliothek erforderlich ist. Das Animieren in JS unterstützt wesentlich mehr Browser-übergreifende Funktionen und ist mit einigen Grundkenntnissen recht einfach zu verwenden.

Für komplexe Animationen, die die Verwendung einer Zeitleiste oder Ähnlichem erfordern, kann die Verwendung einer Bibliothek wie GSAP sehr hilfreich sein. Es gibt unzählige andere SVG-Animationsbibliotheken, Snap.svg ist eine weitere große, aber die meisten verarbeiten Animationen nicht annähernd so einfach und performant wie GSAP.

Für bestimmte Arten von Animationen kann die Verwendung eines bestimmten JS-Plugins wie MorphSVG von GSAP viel Zeit sparen, da die browserübergreifenden Probleme und alle Berechnungen berücksichtigt werden. Für die meisten Animationen sind solche Plugins jedoch nicht erforderlich. Weitere Informationen finden Sie unter "Eine Anleitung zu Alternativen zu SMIL-Funktionen" .

Es ist auch akzeptabel, Polyfills für SMIL zu verwenden, aber ich bin müde, dies zu tun, weil sie nicht sehr häufig verwendet / getestet werden. Damit wird gesagt, Eric Willigers und FakeSmile sind die beiden am häufigsten.

Werkzeug

Die einzige Software, die mir für den Export nach SVG + JS begegnet ist, ist ein Adobe After Effects-Plugin namens Lottie (ehemals Bodymovin), eine Flash-Erweiterung namens Flash 2 SVG und ein kleines Online-Tool namens SVG Circus . Davon abgesehen exportieren Software-Animatoren wie Adobe Edge Animate, Adobe Animate CC oder Animatron in SMIL-Animationen, die nicht verwendet werden sollten. Daher ist es am besten, wenn einige Entwickler SVG + CSS- oder SVG + JS-Animationen mit exportierten SVGs aus einem Editor erstellen . Inkscape verfügt über eine hervorragende Ressource , in der Lernprogramme und Beispiele dazu verlinkt werden.

Ich bin mir sicher, dass in Zukunft mehr Animationssoftware den Export nach SVG + JS unterstützen wird.

Einige andere wichtige Hinweise

• Es ist wichtig, die Leistung im Auge zu behalten . Sara Drasner hat einige Performance-Benchmarks für SVG erstellt, die zeigen, dass Sie sich nach Möglichkeit für hardwarebeschleunigte CSS-Animationen entscheiden sollten, wenn dies nicht möglich ist, sollten Sie auf einen guten JavaScript-Ansatz zurückgreifen .

• 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 .

Lesen Sie Rachel Nabors Beitrag in A List Part , um mehr über Webanimationen zu erfahren . Für einige zusätzliche Vorschläge zum Werkzeugbau ist dieser Beitrag sehr hilfreich, obwohl ich nicht mit allen Ansichten einverstanden bin, insbesondere mit der Darstellung von SMIL-Animationen.

Ich habe immer festgestellt, dass das Verlassen auf etwas anderes als JS-Bibliotheken eine große Herausforderung für die WRT-Unterstützung und -Wartung darstellt.

Ich habe immer D3.js verwendet . Es wurde ursprünglich erstellt, um interaktive SVG / DOM-Elemente aus Datensätzen zu erstellen. Sie können jedoch SVG / DOM, das in einer Seite enthalten ist, ändern, sofern JS Zugriff darauf hat.

Ich habe in einer Vielzahl von Projekten verwendet, um SVG / DOM zu erstellen / zu animieren. Einige Beispiele umfassen weiche Echtzeit-Dashboards, Kartenvisualisierungen, DOM-Transformationen und das Erstellen von SVG-Dateien zur Aufnahme in PDF-Dateien. Ich habe es auch im ganzen Web gesehen. Die Website enthält eine Reihe von Beispielen und Links zu Seiten, die sie verwendet haben.

Ich empfehle es, weil es ziemlich browserkompatibel ist, eine aktive Community hat und leicht zu erlernen ist. Werfen Sie einen Blick auf die Webseite und achten Sie auf die Verwendung in der realen Welt, um eine kleine Auswahl dessen zu sehen, was Sie damit tun können.

Die folgenden Möglichkeiten zum Animieren von svg:

SVG-SMIL-ANIMATIONEN

Die SVG kann über die leistungsstarke native Markup-Sprache SMIL animiert werden, die direkt aus Animationstools wie dem Adobe Animate CC + flash2svg-Plugin exportiert wird.

Um eine SVG-Datei mit SMIL auch in Browsern zu animieren, die keine Unterstützung bieten, müssen Sie lediglich eine SMIL-Polyfüllung verwenden.

Eine Polyfüllung ist ein spezieller Javascript-Code, der Funktionen unterstützt, die in einem Browser fehlen, und die die ursprüngliche Codierung in eine für den Browser verständliche übersetzt.

Das SMIL-Polyfill von Eric Willigers macht genau das: Es übersetzt SMIL in eine Web-Animations-API, die sogar der Microsoft-Browser unterstützt. Es ist so effizient, dass Google Chrome-Entwickler beschlossen, die native SMIL-Unterstützung einzustellen und sich auf Webanimationen zu konzentrieren, und Eric Willigers die Aufgabe überlassen, SMIL-Dateien in Chrome abzuspielen.

Jemand hat dies fälschlicherweise als eine Ablehnung von SMIL durch Chrome interpretiert und die Entwickler für diese Wahl kritisiert. Es war jedoch keine echte Abwertung, sondern nur eine Verlagerung der Aufgabe, SMIL auf Polyfill-Ebene zu interpretieren.

Tatsächlich haben die Chrome-Entwickler selbst die Willigers-Polyfill in der sehr offiziellen Ankündigung über ihre Absicht, SMIL abzulehnen, zitiert.

Machen Sie sich also keine Sorgen, wenn Sie im Internet über den Niedergang von SMIL lesen. Der "Tod" von SMIL war zutiefst übertrieben. Es ist eher eine Wiedergeburt.

Um SMIL in allen Browsern, einschließlich IE und EDGE, zu verwenden, müssen Sie Ihrer Webseite nur diese Javascript-Polyfüllung hinzufügen:

https://github.com/ericwilligers/svg-animation

Hier ist eine Demoseite mit der Polyfill von Tom Byrne, dem Autor des beliebten flash2svg-Exporters:

Die Seite ohne Polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

und dieselbe Seite mit der Polyfüllung:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

Wenn Sie sich die Quelle ansehen, ist dies ziemlich selbsterklärend.

Auch die Leistungen mit der Polyfill sind oft besser als mit der ursprünglichen SMIL, da bei vielen Browsern die Webanimation hardwarebeschleunigt ist, während dies bei SMIL normalerweise nicht der Fall ist.

EXPORTIEREN SIE ANIMATIONEN IN SVG SMIL

Die einfachere Möglichkeit, SVG-Animationen zu erstellen, besteht darin, Werkzeuge wie Adobe Animate CC zum Zeichnen und Plug-ins wie Flash2svg ( https://github.com/TomByrne/Flash2Svg ) zum Exportieren in SVG zu verwenden. Mit ihm können Sie fast alle Animationen + Sounds als einzelne SVG-Datei exportieren, wie diese Cartoon-Episode:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg

SVG ANIMATION JS BIBLIOTHEKEN

Der Javascript-Weg ist komplizierter. Zunächst müssen Sie ein Javascript-Programmierer sein. Dann muss man zwischen vielen Bibliotheken wählen. Je beliebter sind:

• SnapSVG http://snapsvg.io
  Diese Bibliothek ist der Nachfolger der alten und beliebten Raphael-Animationsbibliothek desselben Autors. Sehr stabil, konvertiert aber SVG zur Laufzeit in ein internes Format, um es zu animieren. Morphing-Optionen sind auch sehr einfach, nur lineare Interpolation. (HINWEIS: Es gibt auch ein snap.svg-Plugin für Adobe Animate CC, aber die exportierten Dateien sind aufgebläht. Der Exporter erstellt einen Befehl snap svg für jeden Frame der Animation, nicht für jeden Keyframe, und erstellt eine 18-KB-Svg-Datei mit über 1000 Zeilen Code, nur um ein einfaches Rechteck um 360 Grad zu drehen. Das Flash2svg-Plugin ist viel effizienter (nur ein Befehl und wenige Bytes, um die gleiche Aufgabe zu erledigen).

• Greensock MorphSVG
  http://greensock.com/morphSVG
  Eine voll funktionsfähige Morphing-Bibliothek, mit der Sie SVG auf einfache Weise animieren können, ohne sie in ein internes Format konvertieren zu müssen. Erstellen Sie einfach 3-4 SVG-Keyframes in Inkscape und die Greenock SVGMorphing-Bibliothek interpoliert automatisch zwischen den Frames und erstellt alle dazwischen liegenden Frames für eine reibungslose Wiedergabe. Hier ist ein Beispiel:
  http://codepen.io/Emasoft/pen/reOqYE

• 3D Seen.js
  http://seenjs.io/demo-svg-canvas.html
  Wenn Sie in 3D animieren möchten, ist diese Bibliothek sehr leistungsfähig.
  Seen.js rendert 3D-OBJ-Dateien in SVG und animiert sie sehr einfach.

SVG IMAGES EDITORS

Bei den Tools können Sie die Animations-Keyframes hauptsächlich mit drei Programmen erstellen:

• Inkscape: Open Source verfügt über eine Vielzahl von Funktionen und ist ein fortschrittliches Vektorbearbeitungspaket, das von Teilnehmern der SVG-Arbeitsgruppe erstellt wurde. Die Referenz für das SVG-Format. Nicht leicht zu lernen.

• Adobe Illustrator: kommerzielle, sehr leistungsfähige Vektorzeichensoftware, die viele Funktionen bietet, die SVG noch nicht unterstützt, aber die schlechteste Kompatibilität mit dem Format aufweist. Sie müssen die exportierte SVG-Datei häufig manuell bearbeiten, um das Illustrator-Chaos zu beheben. Aber es ist sehr beliebt in der Kunstschule und alle Grafiker wissen, wie man es benutzt.

• Affinity Designer: Hierbei handelt es sich um eine kommerzielle Software wie Illustrator, die jedoch eine hervorragende SVG-Kompatibilität aufweist, die fast der von Inkscape entspricht. Die Benutzeroberfläche ist viel benutzerfreundlicher und erfreut sich bei SVG-Künstlern großer Beliebtheit.

SVG ANIMATION EDITORS

Derzeit ist der einzige SVG-Animationseditor dieser:

• Adobe Animate CC: Das frühere Adobe Flash Pro wurde von Adobe vollständig umgeschrieben, um von den mittlerweile veralteten Flash-Animationen auf die modernen SVG-Animationen zu migrieren. Sie können die resultierenden SVG-Animationen zusammen mit einer benutzerdefinierten Javascript-Bibliothek exportieren oder mithilfe von Plugins wie "flash2svg" in SVG + SMIL speichern. Diese letzte Option ist sehr effizient, ich verwende sie immer anstelle des aufgeblähten nativen Exporteurs.

Sie können das kostenlose Plugin hier herunterladen: https://github.com/TomByrne/Flash2Svg

Oder installieren Sie es über den Adobe Plugins-Bereich: https://creative.adobe.com/addons/products/7232

Adobe Animate CC ist leider kommerziell. Es gibt kostenlose alternative Open-Source-Animationsanwendungen, aber ich habe sie alle ausprobiert und sie saugen immer noch IMHO. Hoffen wir auf die Zukunft.

Referenzen:
Mein ausführlicherer Blogbeitrag zum Thema: https://medium.com/@fmuaddib/die-folgenden-sind- die-Möglichkeiten- ,- professionelle- Animationen-in-SVG-9d4caca5f4ec zu erstellen

Der Fall, auf den über snap.svg verwiesen wird: /programming/35727635/adobe-animate-snap-svg-plugin-huge-files