SVG SMIL zu CSS-Keyframes zu JavaScript animate ()

Das Laden in einem img-Tag war der Clou der SVG-SMIL-Animationen, aber die Chrome-Entwickler hatten SMIL versenkt. Inzwischen ist SMIL wieder »drin« und könnte GIF-Animationen ersetzen.

SVG SMIL Animationen in Chrome

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 in einer SVG-Datei, geladen mit img-Tag
SMIL-Animation: 7 KB

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

2024-02-12 SITEMAP BLOG
Suchen auf mediaevent.de