Obwohl das Animieren von SVG mit CSS für die durchschnittliche Front-End-Person möglicherweise komfortabler ist, bietet SVG eine andere Möglichkeit, Animationen direkt in die SVG-Syntax selbst zu integrieren. Dies ist genau das, was wir in diesem Video kurz behandeln, aber wenn Sie eine vollständige Referenzanleitung wünschen, lesen Sie auf jeden Fall eine Anleitung zu SVG-Animationen (SMIL) von Sara Soueidan hier auf CSS-Tricks.
SMIL steht für Synchronized Multimedia Integration Language. So wie ich es verstehe, ist das ein „Ding“ für sich, das zufällig in SVG eingebaut ist. Aber SVG hat einige seiner eigenen SMIL-ähnlichen Ergänzungen. Ich werde alles nur als SMIL bezeichnen, obwohl ich sicher bin, dass ich manchmal technisch falsch bin.
Bei sehr einfachen Animationen spielt es keine Rolle, ob Sie dies in SMIL oder CSS tun, es wird dasselbe bei ungefähr demselben Schwierigkeitsgrad tun. Einige Dinge könnten in CSS sogar einfacher sein. Aber hier sind einige Dinge, bei denen SMIL der richtige Weg ist:
- Sie müssen etwas animieren, das CSS nicht berühren kann. Wie die Form eines Polygons oder Pfades.
- Sie möchten Ereignisse verwenden, um die Animation zu beeinflussen, z. B. ein
clickodermouseoveroder etwas. - Sie möchten additive Animationen erstellen, z. B. animieren, wo immer Sie sich gerade befinden, weitere x Pixel.
- Sie möchten Animationen haben, die sich direkt auf andere Animationen beziehen, z. B. wenn diese Animation beendet ist, starten Sie diese nächste Animation (ohne die Dauer manuell zu bearbeiten).
- Ich bin sicher, es gibt noch mehr.
Die Syntax wirkt zunächst einschüchternd, aber ich verspreche, es ist wirklich ziemlich einfach. Hier ist ein einfaches Beispiel:
Siehe den Stift jAipI von Chris Coyier (@chriscoyier) auf CodePen.
Das "Shape Morphing" -Ding ist mit SMIL wirklich super einzigartig. Hier ist ein besseres Beispiel als das seltsame, das wir im Video gemacht haben:
Siehe den Stiftform-Morph-Button von Chris Coyier (@chriscoyier) auf CodePen.
In dieser Demo werden die Ereignisse von JavaScript anstelle von SMIL behandelt. Schön zu wissen, dass Sie das auch können. SMIL-Ereignisauslöser sind cool, aber dann muss das, was angeklickt werden muss, in dieser SVG-Datei sein und nicht irgendwo anders im DOM.
