Élément d'animation SVG <Animation>

L'élément <Animation> SVG est utilisé pour créer des animations de graphiques SVG. Les éléments d'animation ont été définis à l'origine dans le langage de intégration multimédia synchronisée (SMIL). Dans l'animation, il est nécessaire de spécifier les attributs, les mouvements, les couleurs, ainsi que les valeurs de début et de fin des durées d'animation.

Il est possible d'animer les formes d'une image SVG. Il existe plusieurs méthodes différentes pour animer des formes SVG. Dans cet article, je vais présenter diverses possibilités.

Exemple d'animation SVG

Voici un exemple simple d'animation SVG :

<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"
　　　　　　　　　　　　set
　　　　　　　　　　　　dur="20s"
　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　from="0　60　60"
　　　　　　　　　　　　这些SVG动画元素中的每一个都设置或设置SVG形状的不同方面的动画。这些动画元素将在本文的其余部分中进行说明。360　60　60"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　/>
　　　　</rect>
</svg>

Attention à la manière dont l'élément <rect> est imbriqué à l'intérieur de l'élément <animateTransform>. C'est cet élément qui anime le rectangle.

Voici l'animation SVG générée :

Aperçu des options d'animation

通过操纵形状随时间变化的属性来完成动画制作。使用5个SVG动画元素中的一个或多个完成此操作：

4. 通过操纵形状随时间变化的属性来完成动画制作。使用

5. 个SVG动画元素中的一个或多个完成此操作：

<set>

<animate>

<animateColor>

<animateTransform>

<svg　width="500" height="100"><circle　cx="30"　cy="30"　r="25"　style="stroke:　none;　fill:　#0000ff;">
　　　　<animateMotion>
　　　　　　　　　这些SVG动画元素中的每一个都设置或设置SVG形状的不同方面的动画。这些动画元素将在本文的其余部分中进行说明。100"
　　　　　　　　　set　　/>
</circle></svg>

该set元素是SVG动画元素中最简单的元素。在经过特定时间间隔后，它只是将属性设置为特定值。因此，形状不会连续进行动画处理，而只是更改属性值一次。-这是一个<set>元素示例：

<set　attributeName="r"　attributeType="XML"

上面的示例r在5秒钟后将属性设置为100。运行后图像效果：

attributeType

前面的示例在<set>元素中也有一个attributeType属性。 该值已设置为XML。 这是因为在示例中要为其设置值的属性(r属性)是SVG Circle元素的属性。 因为SVG元素是XML元素，所以SVG属性也是XML属性。

您还可以设置形状的CSS属性的动画。如果这样做，则需要将attributeType设置为CSS。如果不提供attributeType属性，则浏览器将尝试猜测要制作动画的属性是XML属性还是CSS属性。

animate

animate元素用于为SVG形状的属性设置动画。您可以将animate元素嵌套在要应用的形状内。这是一个示例：

<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>

Dans cet exemple, l'attribut cx de l'élément <circle> est animé de la valeur30 (attribut "from") est réglé sur la valeur479(attribut "to"). L'animation commence à 0 seconde (attribut "begin"), et sa durée est5secondes (attribut "dur").

Après la fin de l'animation, les attributs d'animation sont réglés sur leurs valeurs d'origine (attribut "fill" = "remove"). Si vous souhaitez que les attributs d'animation conservent la valeur "to"-valeur), définissez l'attribut "fill" sur "freeze". L'animation répète indéfiniment (attribut "repeatCount").

Voici l'animation générée :

animateTransform

L'élément <AnimateTransform> peut définir l'animation de l'attribut Transform pour la forme. L'élément <Animate> ne peut pas faire cela.

Voici un exemple :

<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="indefinite"
　　　　　　　　　　/>
</rect></svg>

Dans cet exemple <animateTransform>, les attributs des éléments <rect> imbriqués dans transform sont animés. L'attribut type est réglé sur rotate (fonction de transformation de rotation), ce qui signifie que la transformation animée sera une rotation. Les paramètres définis dans les attributs from et to sont animés et passés à la fonction rotate. Dans cet exemple, le point de rotation est100,100 tours de 0 degrés à360 degrés.

Voici un exemple qui anime la proportion du carré :

<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="indefinite"
　　　　　　　　　　　　　　　　></animateTransform>
　　　　</rect>
</svg>

À nouveau, les attributs from et to contiennent les valeurs généralement passées en paramètres à la fonction de transformation scale().

Voici l'animation générée :

animateMotion (mouvement d'animation)

L'élément <animateMotion> peut animer la forme le long de la forme du chemin. Il peut également faire pivoter la forme pour correspondre à l'inclinaison du chemin, comme une voiture en montée sur une colline. Voici un exemple :

<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>

Le path est spécifié dans les attributs de l'élément <animateMotion> pour l'animation le long du chemin rectangulaire. L'attribut path utilise la même syntaxe queélément pathMême syntaxe.

C'est aussi une animation de chemin affichée, donc vous pouvez mieux suivre le mouvement.

Pour faire pivoter le carré afin de l'aligner avec l'inclinaison du chemin, définissez l'attribut rotate de l'élément <animateMotion> sur auto. Voici un exemple :

<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>

Voici l'animation générée. Notez comment la rotation du carré change pour s'adapter au chemin.

Vous pouvez également définir l'attribut rotate sur une valeur spécifique, par exemple20 ou30. De cette manière, vous pouvez faire tourner la forme d'un certain angle tout au long de l'animation.

Unité de temps

Lorsque vous définissez une animation SVG, vous pouvez spécifier le temps de début et la durée de l'animation. Lorsque vous le spécifiez, vous pouvez choisir entre différentes unités de temps. Les attributs begin, dur et end des différents éléments d'animation sont généralement spécifiés dans les unités de temps.

Dans ces attributs, vous pouvez spécifier un nombre suivi d'une unité de temps, comme dans l'exemple de cet article. Par exemple5s5Les secondes. Voici la liste des unités de temps que vous pouvez utiliser :

Vous pouvez également spécifier le temps sous forme de format contenant des heures, des minutes et des secondes. Le format est le suivant :

hh:mm:ss

Voici un exemple :

1:30:45

Dans cet exemple, la valeur spécifiée est1heure30 minute45secondes (pour une animation, cela représente un temps assez long, bien sûr).

Synchronisation des animations

Vous pouvez synchroniser le début d'une animation avec la fin d'une autre animation. Voici comment vous pouvez le faire :

<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>

Voici l'animation générée :

L'attribut id de la première animation est défini sur one.

La deuxième animation fait référence à la première animation via son attribut begin. La valeur de l'attribut begin est définie sur one.end, ce qui signifie que l'animation doit commencer à la fin de l'animation ID one.

Lorsque l'autre animation commence ou se termine, vous pouvez utiliser id.begin ou id.end pour démarrer l'animation. Au lieu d'utiliser l'ID, utilisez l'ID de l'élément d'animation pour la synchronisation.

Vous pouvez également spécifier un décalage de temps par rapport au début ou à la fin d'une autre animation, comme indiqué ci-dessous :

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

De plus, vous pouvez spécifier un temps de fin explicite dans l'attribut end de l'animation. Cela ne remplace pas l'attribut dur. Il ajoute simplement une autre éventuelle fin à l'animation, donc selon ce qui se produit en premier.

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

La durée de cette animation est10secondes, ou arrêter à la fin de l'animation ID one, selon ce qui arrive en premier.

Animation répétée

Vous pouvez utiliser deux attributs dans l'élément d'animation pour répéter l'animation.

Le premier attribut est repeatCount. Dans cet attribut, vous pouvez définir un nombre qui fait que l'animation se répète ce nombre de fois, ou la valeur indefinite qui fait que l'animation continue de fonctionner sans s'arrêter.

Le deuxième attribut est repeatDur, qui spécifie la durée de répétition de l'animation. Vous pouvez également utiliser la valeur indefinite dans l'attribut repeatDur, ce qui a le même effet que l'utilisation de la valeur repeatCount.

Voici deux exemples :

<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"
　　　　　　　　/>

Combinaison d'animations

Vous pouvez lister plusieurs animations à l'intérieur d'un élément <animation> pour combiner les animations. Vous avez vu, mais voici un autre exemple :

<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="indefinite"
　　　　　　　　　　　></animate>
　　　<animate attributeName="y"
　　　　　　　　　　　　attributeType="XML"
　　　　　　　　　　　　from="10"　to="100"
　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　fill="freeze"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　></animate>
</rect>
</svg>

Dans cet exemple, il y a deux animations, chaque animation réglant l'animation des attributs x et y du rectangle. Voici l'animation générée :

Lorsque vous combinez les éléments <animateTransform>, le comportement par défaut est que la deuxième animation annule la première animation. Cependant, vous pouvez combiner les animations de transformation en ajoutant les attributs additive et sum aux deux éléments <animateTransform>. Voici un exemple :

<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="indefinite"
　　　　　　　　　　　　　　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="indefinite"　additive="sum"
　　　　　　　　　　　　></animateTransform>
</svg>

Voici l'animation de résultat de zoom et de rotation du rectangle :