SVG <Animation> Animationselement

Der SVG <Animation>-Element wird verwendet, um Animationen für SVG-Grafiken zu erstellen. Das Animationselement wurde ursprünglich in der Sprache für die Integration von Synchronmultimedia (SMIL) definiert. In der Animation müssen Attribute, Bewegungen, Farben, der Startzeitpunkt der Animation und die Werte für den Start und das Ende der Animationsdauer angegeben werden.

SVG-Bilder können animiert werden. Es gibt verschiedene Methoden, um SVG-Formen zu animieren. In diesem Artikel werde ich verschiedene Möglichkeiten vorstellen.

SVG-Animationsexample

Dies ist ein einfaches Beispiel für eine SVG-Animation:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"　y="10"　height="110"　width="110"
　　　　　　　　　style="stroke:#ff0000;　fill:　#0000ff">
　　　　　　　　<animateTransform
　　　　　　　　　　　　attributeName="transform"
　　　　　　　　　　　　begin="0s"
　　　　　　　　　　　　dur="20s"
　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　from="0　60　60"
　　　　　　　　　　　　to="360　60　60"
　　　　　　　　　　　　repeatCount="unendlich"
　　　　　　　　/>
　　　　</rect>
</svg>

Beobachten Sie, wie das <rect>-Element innerhalb des Elements <animateTransform> eingebettet ist. Es ist genau dieses Element, das die Rechteck-Animation ermöglicht.

Dies ist die generierte SVG-Animation:

Übersicht über Animationsoptionen

Durch die Manipulation der mit der Zeit verändernden Attribute der Formen wird die Animation erstellt. Verwenden Sie5Ein oder mehrere der SVG-Animationselemente erfüllen diese Aufgabe:

1. <set>

2. <animate>

3. <animateColor>

4. <animateTransform>

5. <animateMotion>

Jedes dieser SVG-Animationselemente setzt oder setzt die Animationen verschiedener Aspekte der SVG-Formen. Diese Animationselemente werden im Rest dieses Dokuments erläutert.

set

Dieser set-Element ist der einfachste Element in den SVG-Animationselementen. Nach einer bestimmten Zeitintervall wird es nur das Attribut auf einen bestimmten Wert setzen. Daher wird die Form nicht kontinuierlich animiert, sondern nur einmal den Attributwert geändert.

Dies ist ein Beispiel für ein <set>-Element:

<svg　width="500"　height="100"><circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
　　　　<set attributeName="r" attributeType="XML"
　　　　　　　　　to="100"
　　　　　　　　　begin="0s"　　/>
</circle></svg>

Beachten Sie, dass das <set>-Element im Inneren des circle-Elements eingebettet ist. Dies ist die Art und Weise, wie das <set>-Element auf die Form angewendet wird-durch das Einfügen in den SVG-Element, den die Form anwenden soll.

<set>Element setzt die Werte der Attribute zu bestimmten Zeitpunkten. Der zu setzende Attributname wird im attributeName-Attribut angegeben. Der zu setzende Wert wird im to-Attribut angegeben. Der Zeitpunkt der Wertsetzung wird im begin-Attribut angegeben.

Der obige Beispiel r in5Sekunden später wird das Attribut auf100. Nach dem Lauf der Bildwirkung:

attributeType

Das obige Beispiel hat auch ein attributeType-Attribut im <set>-Element. Der Wert ist auf XML gesetzt. Dies liegt daran, dass das Attribut (r-Attribut), für das ein Wert gesetzt werden soll, ein Attribut der SVG-Circle-Form ist. Da SVG-Elemente XML-Elemente sind, sind SVG-Attribute auch XML-Attribute.

Sie können auch Animationen für die CSS-Attribute der Formen einstellen. Wenn Sie dies tun, müssen Sie attributeType auf CSS setzen. Wenn keine attributeType-Attribute bereitgestellt wird, versucht der Browser zu erraten, ob das zu animierende Attribut ein XML-Attribut oder ein CSS-Attribut ist.

animate

Der animate-Element wird verwendet, um Animationen für die Attribute von SVG-Formen zu setzen. Sie können das animate-Element in die zu animierenden Formen einbetten. Dies ist ein Beispiel:

<svg　width="500"　height="100"><circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
　　　　<animate attributeName="cx" attributeType="XML"
　　　　　　　　　　　　　from="30" to="470"
　　　　　　　　　　　　　begin="0s"　dur="5s"
　　　　　　　　　　　　　fill="remove" repeatCount="indefinite"/>
</circle></svg>

In diesem Beispiel wird das Attribut 'cx' des Elements <circle> von dem Wert30 (Attribut 'from') wird auf den Wert479der Animation (Attribut 'to'). Die Animation beginnt bei 0 Sekunden (Attribut 'begin'), und die Dauer beträgt5Sekunden (Attribut 'dur').

Nach Abschluss der Animation werden die Animationseigenschaften auf ihren ursprünglichen Wert zurückgesetzt (Attribut 'fill' auf 'remove'). Wenn Sie möchten, dass die Animationseigenschaften den Wert 'to' beibehalten,-value), setzen Sie das Attribut 'fill' auf 'freeze'. Die Animation wird unbegrenzt wiederholt (Attribut 'repeatCount').

Dies ist die generierte Animation:

animateTransform

<AnimateTransform>-Element kann die Animation der Transform-Attribute der Form setzen. Das Element <Animate> kann dies nicht tun.

Dies ist ein Beispiel:

<svg　width="500"　height="100"><rect　x="20" y="20" width="100"　height="40"
　　　　style="stroke: #ff00ff; fill:none;"　>
　　<animateTransform attributeName="transform"
　　　　　　　　　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　　　　　　　　　from="0　100　100"　to="360　100　100"
　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　repeatCount="unendlich"
　　　　　　　　　　/>
</rect></svg>

In diesem Beispiel wird das Attribut des in 'transform' eingeschlossenen <rect>-Elements animiert. Das Attribut 'type' ist auf 'rotate' (Drehtransformation) gesetzt, was bedeutet, dass die Animation eine Rotation sein wird. Die Parameter, die in den Attributen 'from' und 'to' gesetzt sind, werden an die Funktion 'rotate' übergeben. Dies ist ein Beispiel, das um den Punkt100,100 von 0 Grad rotieren bis360 Grad.

Dies ist ein Beispiel, um die Proportionsanimation des Quadrats zu ermöglichen:

<svg　width="500"　height="200">
　　　　<rect　x="20" y="20" width="40"　height="40"
　　　　　　　　　　style="stroke: #ff00ff; fill: none;"　>
　　　　　　　　<animateTransform attributeName="transform"
　　　　　　　　　　　　　　　　　　　　　　　　　　type="scale"
　　　　　　　　　　　　　　　　　　　　　　　　　　from="1　1"　to="2　3"
　　　　　　　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　　　　　　　repeatCount="unendlich"
　　　　　　　　　　　　　　　　></animateTransform>
　　　　</rect>
</svg>

Bemerken Sie nochmals, dass die Attribute 'from' und 'to' die Werte enthalten, die normalerweise an die Funktion 'scale()' als Parameter übergeben werden.

Dies ist die generierte Animation:

animateMotion (animierte Bewegung)

Das Element <animateMotion> kann entlang der Form der Pfadanimation bewegen. Es kann auch die Form drehen, um die Neigung des Pfades zu entsprechen, wie ein Auto auf einem Berg hochfährt. Dies ist ein Beispiel:

<svg　width="500"　height="150">
　　　　<path　d="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　style="stroke: #000000; fill: none;"
　　　　　　　　　　　　></path>
　　　　<rect　x="0"　y="0"　width="30"　height="15"
　　　　　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　　　　　<animateMotion
　　　　　　　　　　　　　　　　path="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　　　　　　　begin="0s"　dur="10s"　repeatCount="indefinite"
　　　　　　　　　　　　　　　　></animateMotion>
　　　　</rect>
</svg>

Der Pfad wird im Attribut 'path' des Elements <animateMotion> für die Animation entlang des Rechtecks angegeben. Das Attribut 'path' verwendet die gleiche Syntax wiepath-ElementGleiche Syntax.

Dies ist auch eine animierte Darstellung des Pfades, damit Sie besser den Bewegung folgen können.

Um den Quadrat zu drehen, um es mit dem Neigungswinkel der Strecke auszurichten, setzen Sie das Attribut 'rotate' des Elements <animateMotion> auf 'auto'. Dies ist ein Beispiel:

<svg　width="500"　height="150">
　　　　<path　d="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　style="stroke:　#000000;　fill:　none;"></path>
　　　　<rect　x="0"　y="0"　width="30"　height="15"
　　　　　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　　　　　<animateMotion
　　　　　　　　　　　　　　　　path="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　　　　　　　begin="0s"　dur="10s"　repeatCount="indefinite"
　　　　　　　　　　　　　　　　rotate="auto"
　　　　　　　　　　　　　　　></animateMotion>
　　　　</rect>
</svg>

Dies ist die generierte Animation. Beachten Sie, wie die Rotation des Quadrats variiert, um der Kurve zu entsprechen.

Sie können auch den rotate-Attribut auf einen bestimmten Wert setzen, zum Beispiel20 oder30. So kann die Form während der gesamten Animation um diesen Winkel gedreht werden.

Zeiteinheit

Bei der Definition von SVG-Animationen können Sie den Start- und Dauerzeitpunkt der Animation angeben. Bei der Angabe können Sie zwischen verschiedenen Zeitединицами wählen. In den Attributen von verschiedenen Animationselementen werden in der Regel begin, dur und end innerhalb der Zeitединиц angegeben.

In diesen Eigenschaften können Sie eine Zahl und eine Zeitединиц angeben, wie im Beispiel beschrieben. Zum Beispiel5s5Sekunden. Hier ist eine Liste der Zeitединиц, die Sie verwenden können:

Sie können auch Zeitformate mit Stunden, Minuten und Sekunden angeben. Das Format ist wie folgt:

hh:mm:ss

Dies ist ein Beispiel:

1:30:45

In diesem Beispiel wird angegeben1Stunden30 Minuten45Sekundenzeit (was für Animationen natürlich sehr lange Zeit bedeutet).

Synchronisierte Animation

Sie können den Anfang einer Animation mit dem Ende einer anderen Animation synchronisieren. Das geht so:

<svg　width="500"　height="100">
<rect　x="0"　y="0"　width="30"　height="15"
　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　<animate　id="one"　attributeName="x"　attributeType="XML"
　　　　　　　　　　　　　from="0"　to="400"
　　　　　　　　　　　　　begin="0s"　dur="10s"　fill="freeze"
　　　　　　　　　　></animate>
　　　　<animate　attributeName="y"　attributeType="XML"
　　　　　　　　　　　　from="0"　to="50"　begin="one.end"　dur="10s"　fill="freeze"
　　　　　　　　　　></animate>
</rect>
　　　　</svg>

Dies ist die generierte Animation:

Die id-Eigenschaft der ersten Animation ist auf one gesetzt.

Die zweite Animation referenziert die erste Animation über ihre begin-Eigenschaft. Der Wert der begin-Eigenschaft ist auf one.end gesetzt, was bedeutet, dass die Animation am Ende der Animation mit ID one beginnt.

Wenn eine andere Animation beginnt oder endet, kann mit id.begin oder id.end die Animation gestartet werden. Anstatt von id wird der ID des Animationselements für die Synchronisation verwendet.

Sie können auch einen Abstand zur Anfangs- oder Endzeit einer anderen Animation angeben, wie folgt:

one.begin+10s
one.end+5s

Außerdem können Sie eine klare Endzeit in der Animationseigenschaft end angeben. Dies ersetzt nicht das Attribut dur. Es fügt nur eine weitere mögliche Endzeit zur Animation hinzu, daher ist das Erste, was passiert, entscheidend. Dies ist ein Beispiel:

<animate
　　　　　　　　attributeName="y"　attributeType="XML"
　　　　　　　　from="0"　to="50"
　　　　　　　　begin="one.begin+3s"　dur="10s"　end="one.end"
　　　　　　　　fill="freeze"
　　　　　　　　/>

Die Dauer der Animation beträgt10Sekunden oder stoppen, wenn die Animation mit der ID one endet, je nachdem, was zuerst passiert.

Wiederholte Animationen

Sie können zwei Attribute im Animationselement verwenden, um die Wiederholung der Animation zu steuern.

Das erste Attribut ist repeatCount. In diesem Attribut können Sie eine Zahl einstellen, die die Anzahl der Wiederholungen der Animation festlegt, oder indefinite, um die Animation ohne Unterbrechung fortzuführen.

Der zweite Attribut ist repeatDur, das die Dauer der Wiedergabe der Animation angibt. Sie können auch den Wert indefinite in repeatDur verwenden, der den gleichen Effekt wie der Wert repeatCount im Attribut hat.

Dies sind zwei Beispiele:

<animate
　　　　　　　　attributeName="y"　attributeType="XML"
　　　　　　　　from="0"　to="50"
　　　　　　　　begin="one.begin+3s"　dur="10s"
　　　　　　　　repeatCount="3"
　　　　　　　　fill="freeze"
　　　　　　　　/>

<animate
　　　　　　　　attributeName="y"　attributeType="XML"
　　　　　　　　from="0"　to="50"
　　　　　　　　begin="one.begin+3s"　dur="10s"
　　　　　　　　repeatDur="30s"
　　　　　　　　fill="freeze"
　　　　　　　　/>

Kombinierte Animationen

Sie können mehrere Animationen in einem Element mit <animation> auflisten, um Animationen zu kombinieren. Wie Sie bereits gesehen haben, ist dies ein weiteres Beispiel:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
<rect　x="10"　y="10"　width="40"　height="20"
　　　　　style="stroke:　#000000;　fill:　none;">
　　　<animate　attributeName="x"
　　　　　　　　　　　　attributeType="XML"
　　　　　　　　　　　　from="10"　to="400"
　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　repeatCount="unendlich"
　　　　　　　　　　　></animate>
　　　<animate　attributeName="y"
　　　　　　　　　　　　attributeType="XML"
　　　　　　　　　　　　from="10"　to="100"
　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　fill="freeze"
　　　　　　　　　　　　repeatCount="unendlich"
　　　　　　　　　　　></animate>
</rect>
</svg>

In diesem Beispiel gibt es zwei Animationen, jede für die x- und y-Attribute des Rechtecks. Dies ist die generierte Animation:

Wenn Sie die <animateTransform>-Elemente kombinieren, ist das Standardverhalten, dass die zweite Animation die erste Animation aufhebt. Sie können jedoch durch Hinzufügen der Attribute additive und den Wert sum zu beiden <animateTransform>-Elementen die Transformationen der Animationen kombinieren. Dies ist ein Beispiel:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><rect　x="10"　y="10"　width="40"　height="20"
　　　　　　style="stroke:　#000000;　fill:　none;">
　　　　<animateTransform　attributeName="transform"　attributeType="XML"
　　　　　　　　　　　　　　　　　　　　　　type="scale"
　　　　　　　　　　　　　　　　　　　　　　from="1"　to="3"
　　　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　　　repeatCount="unendlich"
　　　　　　　　　　　　　　additive="sum"
　　　　　　　　　　　　></animateTransform>
　　　　<animateTransform　attributeName="transform"　attributeType="XML"
　　　　　　　　　　　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　　　　　　　　　　　from="0　30　20"　to="360　30　20"
　　　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　　　fill="freeze"
　　　　　　　　　　　　　　　　　　　　　　repeatCount="unendlich"　additive="sum"
　　　　　　　　　　　　></animateTransform>
</svg>

Dies ist die Animationsergebnis von Vergrößerung und Drehung des Rechtecks: