SMIL-Animationen – wieder auferstanden
SMIL (»smile«) ist Teil der SVG-Spezifikation und animiert Grafiken ohne Script auf der Basis von XML-Elementen – als »deklarative Animationen«. Nun kann SVG zwar auch mit CSS und Javascript animiert werden, aber SVG mit Javascript kann aus Sicherheitsgründen nicht mit einem img-Tag geladen werden.
Die Blink-Entwickler hinter Chrome hatten laut und deutlich gedroht, SMIL unter den Teppich zu kehren, aber dann still und leise einen Rückzieher gemacht. So wirken SVG-SMIL-Animationen auch 2024 in allen modernen Browsern.
Chrome is like Game of Thrones, fall in love with it and hope it doesn’t kill your favorites
Original von Google Developers auf Twitter
SMIL-Animation entlang eines Pfads und dazu die Rotation des animierten Elements:
<path id="ie" d="m0 0c0-5.72-1.5-11.12-4-15.888 …" …>
<animateMotion dur="10s" repeatCount="indefinite">
<mpath xlink:href="#p3" />
</animateMotion>
<animateTransform repeatCount="indefinite"
attributeName="transform" type="rotate"
from="0" to="360" begin="0" dur="5s" />
</path>
SMIL-Animationen können miteinander verbunden oder verkettet (chained) werden und kennen ähnliche Events wie Javascript. Sie werden auch durch klassische Events wie begin=“elem.mouseover“ gestartet und zudem in Abhängigkeit von Events wie begin=“orangefox.end + 1.5s“. Allerdings – sobald Animationen durch Benutzer-Events wie mouseover getriggert werden, ist es auch schon wieder das AUS für das Laden der SVG-Datei in einem img-Tag.
SVG: Grenzen der CSS-Animationen
Für SVG-Animation mit CSS gelten dieselben Einschränkungen wie für CSS-Animationen auf HTML-Elementen: CSS kennt keine Events und kann Elemente nicht in Abhängigkeit von anderen Animationen steuern. CSS-Animationen laufen an, wenn die Seite geladen wurde, der Benutzer kann sie nicht pausieren und nicht erneut starten. Da ist JavaScript gefordert.
Der Aufruf von animate () setzt ein Array von CSS-Keyframes mit Dauer und der Zahl der Wiederholungen ein.
┌── JavaScript Object mit Eigenschaften
│ wie Dauer, Iterationen, Verzögerung
▼
animate (keyframes, options)
▲
│
└── Array von Keyframes
const wheel = document.querySelector (".wheel").animate (
[ ◀──────┐
{ transform: "rotate(0deg)" }, │
{ transform: "rotate(360deg)" } ├── Array der Keyframes
], ◀──────┘
{ ◀──────┐
duration: 2000, │
iterations: Infinity ├── Objekt mit Optionen
} ◀──────┘
);
Das ist jetzt natürlich kein großer Akt: Da hätte einfach CSS auch gereicht. Aber JavaScript kann Animationen pausieren und neu starten und weitere Elemente in Abhängigkeit anderer Elemente animieren.
Mehr zum Web Animation API
Mehr zu SVG-Animationen
- Rückzug zurückgezogen: Chrome und SVG SMIL-Animationen
- SVG Animate mit SMIL – SVG-Attribute animieren
- Elemente in Abhängigkeit von anderen Elementen animieren: SVG SMIL Animations-Sequenzen synchronisieren