Elemento de animación <Animation> en SVG

El elemento de animación <Animation> de SVG se utiliza para crear animaciones de gráficos SVG. Los elementos de animación se definieron originalmente en el lenguaje de integración de multimedia sincronizada (SMIL). En la animación, se deben especificar las propiedades, el movimiento, el color, el tiempo de inicio de la animación y los valores de inicio y final de la duración de la animación.

Se puede animar las formas en imágenes SVG. Hay varias formas diferentes de animar formas SVG. En este artículo, se presentarán todas las posibilidades.

Ejemplo de animación SVG

Este es un ejemplo simple de animación 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"
　　　　　　　　　　　　begin="0s"
　　　　　　　　　　　　dur="20s"
　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　from="0　60　60"
　　　　　　　　　　　　to="360　60　60"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　/>
　　　　</rect>
</svg>

Atención a cómo el elemento <rect> está anidado dentro del elemento <animateTransform>. Es este elemento el que hace que el rectángulo se anime.

Este es el animación SVG generada:

Resumen de opciones de animación

Al manipular las propiedades de la forma que cambian con el tiempo para crear animaciones. Utilice5Un o más de los elementos de animación SVG completan esta operación:

1. <set>

2. <animate>

3. <animateColor>

4. <animateTransform>

5. <animateMotion>

Cada uno de estos elementos de animación SVG establece o establece animaciones en diferentes aspectos de las formas SVG. Estos elementos de animación se explicarán en el resto de este documento.

set

Este elemento set es uno de los elementos más simples de los elementos de animación SVG. Después de un intervalo de tiempo específico, solo establece el atributo en un valor específico. Por lo tanto, la forma no se anima continuamente, sino que cambia el valor del atributo una vez.

Este es un ejemplo de elemento <set>:

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

Nota: El elemento <set> se encapsula dentro del elemento circle. Esto es la forma de aplicar el elemento <set> a la forma.-Al encapsularlo dentro del elemento SVG de la forma a la que se aplica.

<set> establece el valor de la propiedad en un momento específico. El nombre de la propiedad a establecer se especifica en el atributo attributeName. El valor que se establece se especifica en el atributo to. El momento en que se establece el valor se especifica en el atributo begin.

El ejemplo anterior r en5después de segundos se establece el atributo en100. Efecto de la imagen después de ejecutar:

attributeType

El ejemplo anterior también tiene un atributo attributeType en el elemento <set>. Este valor se ha establecido en XML. Esto se debe a que en el ejemplo, el atributo (r atributo) al que se le asigna un valor es un atributo de la forma circular SVG. Porque los elementos SVG son elementos XML, los atributos SVG también son atributos XML.

También puede aplicar animaciones a las propiedades CSS de las formas. Si lo hace, debe establecer attributeType en CSS. Si no se proporciona el atributo attributeType, el navegador intentará adivinar si la propiedad a animar es un atributo XML o CSS.

animate

El elemento animate se utiliza para aplicar animaciones a las propiedades de las formas SVG. Puede encapsular el elemento animate dentro de la forma a la que se aplica. Aquí hay un ejemplo:

<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="eliminar" repeatCount="indefinido"/>
</circle></svg>

Este ejemplo cambia el atributo cx del elemento <circle> desde el valor30 (propiedad "from") se establece en el valor479animación del (propiedad "to"). La animación comienza a los 0 segundos (propiedad "begin"), y su duración es5segundos (propiedad "dur").

Después de que la animación se complete, los atributos de animación se restablecerán a sus valores originales (propiedad "fill" = "remove"). Si desea que los atributos de animación mantengan el valor "to"-value), configure la propiedad "fill" como "freeze". La animación se repetirá indefinidamente (propiedad "repeatCount").

这是生成的动画：

animateTransform

<Elemento AnimateTransform> puede establecer animaciones para el atributo Transform de la forma. El elemento <Animate> no puede hacer esto.

这是一个示例：

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

Este ejemplo de <animateTransform> anima las propiedades del elemento <rect> anidado en transform. El atributo type se establece en rotate (función de transformación de rotación), lo que significa que la transformación de animación será una rotación. Los parámetros establecidos en from y to se animan y se pasan a la función rotate. Este ejemplo se rodea del punto100,100 desde 0 grados girando a360 grados.

Este es un ejemplo de animación de proporción del cuadrado:

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

Tenga en cuenta de nuevo que las propiedades from y to contienen los valores que se pasan comúnmente como parámetros a la función de transformación scale().

这是生成的动画：

animateMotion (movimiento animado)

El elemento <animateMotion> puede animar la forma de movimiento a lo largo de la trayectoria. También puede girar la forma para que se alinee con la inclinación de la trayectoria, como un coche en una colina. Este es un ejemplo:

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

El path se especifica en los atributos del elemento <animateMotion> para la trayectoria de la animación del rectángulo. El atributo path utiliza la misma sintaxis queelemento pathLa misma sintaxis.

También se muestra el resultado de la animación de la trayectoria, por lo que puede seguir mejor el movimiento.

Para rotar el cuadrado para que se alinee con la pendiente de la trayectoria, configure la propiedad rotate del elemento <animateMotion> en auto. Este es un ejemplo:

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

这是生成的动画。注意正方形的旋转如何变化以适合路径。

您还可以将rotate属性设置为特定的值，例如20或30等。这样可以在整个动画中使形状旋转该角度数。

时间单位

定义SVG动画时，可以指定动画的开始时间和持续时间。指定时，您可以在不同的时间单位之间进行选择。的时间单位内的通常指定的begin，dur 和end各种动画元素的属性。

在这些属性中，您可以指定一个数字，后跟一个时间单位，如本文示例中所述。例如5s5秒。以下是您可以使用的时间单位列表：

您还可以以包含小时，分钟和秒的时间格式指定时间。格式如下：

hh:mm:ss

这是一个示例：

1:30:45

此示例指定1小时30分45秒的时间（对于动画来说这当然是很长的时间）。

同步动画

您可以将一个动画的开始同步到另一个动画的结束。您是这样的：

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

这是生成的动画：

第一个动画的id属性设置为one。

第二个动画通过其begin属性引用第一个动画。该begin属性值设置为one.end，意味着该动画应在ID one结束的动画结束时开始。

当另一个动画开始或结束时，可以使用id.begin或id.end启动动画。而不是使用动画元素的ID进行同步。

还可以指定到另一个动画的开始或结束时间的偏移量，如下所示：

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

Además, puede especificar un tiempo de finalización claro en la propiedad end de la animación. Esto no reemplaza el atributo dur. Lo que hace es agregar otro posible final a la animación, por lo que se toma el primero que ocurra. Este es un ejemplo:

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

La duración de esta animación es10segundos, o detenerse cuando finalice la animación con ID one, dependiendo de quién llegue primero.

Animaciones repetitivas

Puede usar dos atributos dentro del elemento de animación para repetir la animación.

El primer atributo es repeatCount. Dentro de este atributo, puede establecer un número que hará que la animación se repita ese número de veces, o usar el valor indefinite para que la animación se mantenga en ejecución sin detenerse.

El segundo atributo es repeatDur, que especifica la duración durante la cual se debe repetir la animación. También puede usar el valor indefinite en repeatDur, lo que tiene el mismo efecto que usar el valor indefinite en repeatCount.

Estos son dos ejemplos:

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

Animaciones combinadas

Puede listar varios animaciones dentro de un elemento <animation> para combinarlas. Ya ha visto, pero aquí hay otro ejemplo:

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

Este ejemplo tiene dos animaciones, cada una configura animaciones para las propiedades x e y del rectángulo. Esta es la animación generada:

Al combinar el elemento <animateTransform>, el comportamiento predeterminado es que la segunda animación anula la primera. Sin embargo, puede combinar animaciones de transformación mediante la adición de los atributos additive y value= sum a dos elementos <animateTransform>. Este es un ejemplo:

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

Este es el resultado de la animación de escala y rotación del rectángulo: