Das Animieren von SVG ist insofern etwas einzigartig, als es drei deutlich unterschiedliche Möglichkeiten gibt, wie Sie es animieren können.
1. Animieren mit CSS @keyframes
SVG-Elemente können mit CSS gezielt gestaltet und gestaltet werden. Das heißt, Sie können Animationen über @keyframes anwenden. So was:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Sie können diese Animation auch wählen, wenn…
- Die Animation ist ziemlich einfach.
- Sie müssen nur Eigenschaften animieren, die CSS animieren kann.
- Sie kennen CSS-Animationen bereits und sind mit ihnen vertraut.
2. Animieren mit SMIL
Es gibt eine Syntax für Animationen, die direkt in SVG integriert sind. Hier ist ein sehr einfaches Beispiel:
Hier ist ein großes Tutorial zu SMIL.
Sie können diese Animation auch wählen, wenn…
- Sie müssen Eigenschaften animieren, die CSS nicht kann, wie die Form selbst.
- Sie benötigen andere SMIL-spezifische Funktionen, z. B. das Starten einer Animation, wenn eine andere endet, ohne die Dauer / Verzögerung manuell zu synchronisieren. Oder Interaktionsmaterial, wie das Starten einer Animation mit einem Klick.
3. Animieren mit JavaScript
Mit JavaScript haben Sie Zugriff auf Dinge wie requestAnimationFrame (oder andere Schleifen), sodass Sie nur durch sich schnell ändernde Eigenschaftswerte animieren können. Es gibt auch Frameworks für die Arbeit mit SVG, in denen normalerweise Animationsmaterial integriert ist. Oder Animations-Frameworks, die mit SVG funktionieren. Wie SnapSVG, GreenSock, SVG.js oder Velocity.js.
Hier ist ein Beispiel mit SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Sie können diese Animation auch wählen, wenn…
- Sie arbeiten sowieso in JavaScript. Vielleicht hat Ihre Animation mit Daten zu tun, die Sie mit JSON oder ähnlichem erhalten.
- Du brauchst sowieso JavaScript, weil du die Logik oder Mathematik oder etwas anderes brauchst, das wirklich nur dort möglich ist.
- Sie interessieren sich für das JavaScript, das einige Fehler für Sie löst.
- Der Umfang Ihrer Animation ist ziemlich groß / kompliziert und Sie benötigen die Abstraktion und Organisation, die JavaScript bereitstellen kann.
Demo
Sehen Sie sich den Stift Drei Möglichkeiten zum Animieren von SVG von Chris Coyier (@chriscoyier) auf CodePen an.
Hat die Art und Weise, wie Sie die SVG letztendlich verwenden, keinen Einfluss auf Ihre Optionen?
Es tut. Wenn Sie SVG-as- verwenden , können Sie keine CSS-Animationen aus einem anderen Stylesheet verwenden. Ihre SMIL-Animationen funktionieren jedoch in einigen Browsern (zum Zeitpunkt des Schreibens Chrome Ja, Firefox Nein). Es würde mich nicht wundern, wenn eingebettetes CSS in SVG-Dateien funktioniert oder eines Tages funktioniert. JavaScript wahrscheinlich nicht.
Wenn Sie SVG in einem CSS-Hintergrundbild verwenden, stelle ich mir eine ähnliche Geschichte wie oben vor.
Wenn Sie Inline verwenden , stehen Ihnen alle Möglichkeiten offen.
Wenn Sie SVG über ein objectoder verwenden iframe, müssen Sie die Skripte / Stile direkt in das SVG einbetten, damit es funktioniert.