SVG-Animation mit SMIL
Synchronisierte Multimedia-Integrationssprache (SMIL) ist eine auf XML basierende Sprache zur Erstellung interaktiver Multimedia-Präsentationen. Autoren können die SMIL-Syntax in anderen XML-basierten Sprachen verwenden, um das Timing und Layout von Elementen zur Animation zu definieren. SMIL ermöglicht Ihnen:
- die numerischen Attribute eines Elements zu animieren (x, y usw.)
- die transform Attribute zu animieren (translation, rotate usw.)
- color Attribute zu animieren
- einem Bewegungspfad zu folgen
Die folgenden Abschnitte zeigen, wie Sie SMIL in SVG für diese vier Anwendungsfälle nutzen können.
Attribute eines Elements animieren
Das folgende Beispiel animiert das cx
-Attribut eines Kreises. Um dies zu tun, fügen wir ein <animate>
-Element innerhalb des <circle>
-Elements hinzu. Die wichtigen Attribute für <animate>
sind:
attributeName
-
Der Name des Attributs, das animiert werden soll.
from
-
Der Anfangswert des Attributs.
to
-
Der Endwert.
dur
-
Die Dauer der Animation (zum Beispiel: '5s' für 5 Sekunden).
Wenn Sie mehr Attribute innerhalb desselben Elements animieren möchten, können Sie weitere <animate>
-Elemente hinzufügen.
<svg width="300" height="100">
<title>Attribute Animation with SMIL</title>
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animate
attributeName="cx"
from="0"
to="500"
dur="5s"
repeatCount="indefinite" />
</circle>
</svg>
Die Transform-Attribute animieren
Das <animateTransform>
-Element erlaubt es Ihnen, transform-Attribute zu animieren. Dieses Element ist notwendig, da wir nicht ein einzelnes Attribut wie x animieren, welches eine Zahl ist. Rotationsattribute sehen so aus: rotation(theta, x, y)
, wobei theta
der Winkel in Grad ist, und x
und y
absolute Positionen sind. Im unten stehenden Beispiel animieren wir das Zentrum der Rotation und den Winkel.
<svg width="300" height="100">
<title>SVG SMIL Animate with transform</title>
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<rect
x="0"
y="50"
width="15"
height="34"
fill="blue"
stroke="black"
stroke-width="1">
<animateTransform
attributeName="transform"
begin="0s"
dur="20s"
type="rotate"
from="0 60 60"
to="360 100 60"
repeatCount="indefinite" />
</rect>
</svg>
Animation entlang eines Pfads
Das <animateMotion>
-Element ermöglicht es Ihnen, eine Elementposition und -rotation gemäß einem Pfad zu animieren. Der Pfad wird auf dieselbe Weise wie bei <path>
definiert. Sie können ein Attribut setzen, um festzulegen, ob das Objekt der Tangente des Pfads folgend rotiert.
Beispiel 1: Lineare Bewegung
In diesem Beispiel prallt ein blauer Kreis unendlich zwischen den linken und rechten Rändern eines schwarzen Kastens hin und her. Die Animation wird hier vom <animateMotion>
-Element gesteuert. In diesem Fall legen wir einen Pfad fest, der aus einem MoveTo-Befehl besteht, um den Startpunkt für die Animation zu definieren, dann dem Horizontal-line-Befehl, um den Kreis 300 Pixel nach rechts zu bewegen, gefolgt vom Z-Befehl, der den Pfad schließt und eine Schleife zurück zum Anfang etabliert. Indem der Wert des repeatCount-Attributs auf indefinite
gesetzt wird, geben wir an, dass die Animation endlos wiederholt werden soll, solange das SVG-Bild existiert.
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
<title>SVG SMIL Animate with Path</title>
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
</circle>
</svg>
Beispiel 2: Gebogene Bewegung
Dasselbe Beispiel wie zuvor mit einem gekrümmten Pfad und der Verfolgung der Richtung des Pfads.
<svg width="300" height="100">
<title>SVG SMIL Animate with Path</title>
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<rect
x="0"
y="0"
width="20"
height="20"
fill="blue"
stroke="black"
stroke-width="1">
<animateMotion
path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z"
dur="3s"
repeatCount="indefinite"
rotate="auto" />
</rect>
</svg>