Elemento de Animação <Animation> no SVG

O elemento de animação <Animation> do SVG é usado para criar animações em gráficos SVG. O elemento de animação foi originalmente definido no linguagem de integração de multimídia sincronizada (SMIL). Em animações, é necessário especificar atributos, movimento, cor, tempo de início e valores de início e fim da duração da animação.

É possível animar formas em imagens SVG. Existem várias maneiras diferentes de animar formas SVG. Neste artigo, vou apresentar várias possibilidades.

Exemplo de animação SVG

Este é um exemplo simples de animação 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>

Atenção como o elemento <rect> está aninhado dentro do elemento <animateTransform>. É esse elemento que faz a animação retangular.

Este é o SVG animado gerado:

Resumo das opções de animação

Realizando animações através da manipulação das propriedades de uma forma que variam ao longo do tempo. Utilizando5um ou mais desses elementos de animação SVG completam essa operação:

1. <set>

2. <animate>

3. <animateColor>

4. <animateTransform>

5. <animateMotion>

Cada um desses elementos de animação SVG define ou define animações em diferentes aspectos de uma forma SVG. Esses elementos de animação serão explicados no resto deste artigo.

set

Este elemento set é o mais simples dos elementos de animação SVG. Após um intervalo de tempo específico, ele simplesmente define o atributo como um valor específico. Portanto, a forma não será animada continuamente, mas apenas terá seu valor de atributo alterado uma vez.

Este é um exemplo 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>

Atenção: o elemento <set> está aninhado dentro do elemento circle. Isso é a maneira de aplicar o elemento <set> à forma.-ao colocá-lo aninhado no elemento SVG que será aplicado.

O elemento <set> define o valor de um atributo em um momento específico. O nome do atributo a ser definido está especificado no atributo attributeName. O valor a ser definido está especificado no atributo to. O momento de definir o valor está especificado no atributo begin.

No exemplo acima, o r no5segundos após definir o atributo como100. O efeito da imagem após a execução:

attributeType

O exemplo anterior também tem um atributo attributeType no elemento <set>. O valor já está definido como XML. Isso é porque o atributo (r atributo) que está sendo configurado no exemplo é um atributo do elemento SVG Circle. Como os elementos SVG são elementos XML, os atributos SVG também são atributos XML.

Você também pode definir animações nas propriedades CSS da forma. Se fizer isso, você precisa definir o attributeType como CSS. Se não fornecer o atributo attributeType, o navegador tentará adivinhar se o atributo a ser animado é um atributo XML ou CSS.

animate

O elemento animate é usado para definir animações nas propriedades de um forma SVG. Você pode anexar o elemento animate dentro da forma que será aplicada. Este é um exemplo:

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

Este exemplo move o atributo cx do elemento <circle> do valor30 (atributo "from") configurado para o valor479do animação (atributo "to"). A animação começa a partir de 0 segundos (atributo "begin"), com uma duração de5segundos (atributo "dur").

Após a conclusão da animação, os atributos de animação serão configurados de volta aos seus valores originais (atributo "fill" configurado como "remove"). Se você desejar que os atributos de animação mantenham o valor "to"-value), configure o atributo "fill" como "freeze". A animação repetirá indefinidamente (atributo "repeatCount").

Esta é a animação gerada:

animateTransform

O elemento <AnimateTransform> pode definir animações para o atributo Transform da forma. O elemento <Animate> não pode fazer isso.

Este é um exemplo:

<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 exemplo <animateTransform> anima os atributos do elemento <rect> aninhado dentro de transform. O atributo type é configurado como rotate (função de transformação de rotação), o que significa que a transformação de animação será uma rotação. Os parâmetros definidos nos atributos from e to são animados e passados para a função rotate. Este exemplo gira em torno do ponto100,100 girando de 0 graus para360 graus.

Este é um exemplo de animação de proporção do quadrado:

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

Atenção novamente, os atributos from e to contêm os valores que são tipicamente passados para a função de transformação scale().

Esta é a animação gerada:

animateMotion (movimento animado)

O elemento <animateMotion> pode animar a forma ao longo da trajetória da animação. Ele também pode girar a forma para se alinhar com a inclinação da trajetória, como um carro dirigindo em uma colina. Este é um exemplo:

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

O path especifica a trajetória da animação retangular no atributo do elemento <animateMotion>. O atributo path usa a mesma sintaxe queelemento pathA mesma sintaxe.

Este também é o resultado da animação da trajetória exibida, para que você possa seguir melhor o movimento.

Para girar o quadrado para alinhá-lo com a inclinação da trajetória, defina o atributo rotate do elemento <animateMotion> como auto. Este é um exemplo:

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

Esta é a animação gerada. Note como a rotação do quadrado muda para se ajustar ao caminho.

Você também pode definir a propriedade rotate para um valor específico, por exemplo20 ou30. Assim, você pode fazer a forma girar esse número de graus ao longo da animação.

unidade de tempo

Ao definir animações SVG, você pode especificar o tempo de início e a duração da animação. Ao especificar, você pode escolher entre diferentes unidades de tempo. As propriedades de diferentes elementos de animação, como begin, dur e end, são especificadas dentro das unidades de tempo.

Nestas propriedades, você pode especificar um número seguido de uma unidade de tempo, como no exemplo deste texto. Por exemplo5s5segundos. Abaixo está a lista de unidades de tempo que você pode usar:

Você também pode especificar o tempo em formato de tempo que inclui horas, minutos e segundos. O formato é o seguinte:

hh:mm:ss

Este é um exemplo:

1:30:45

Neste exemplo, especifica1horas30 minutos45segundos de tempo (para animação, isso é claro, é um tempo longo).

Sincronização de animação

Você pode sincronizar o início de uma animação com o fim de outra animação. Você faz isso assim:

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

Esta é a animação gerada:

A propriedade id do primeiro animação é definida como one.

A segunda animação se referencia à primeira animação através de sua propriedade begin. O valor da propriedade begin é definido como one.end, o que significa que a animação deve começar no final da animação ID one.

Quando outra animação começar ou terminar, você pode usar id.begin ou id.end para iniciar a animação. Em vez de usar o ID, use o ID do elemento de animação para sincronizar.

Você ainda pode especificar a offset de início ou fim de outro animação, conforme mostrado a seguir:

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

Além disso, você pode especificar um tempo de fim claro no atributo end da animação. Isso não substitui o atributo dur. Ele apenas adiciona outra possibilidade de fim para a animação, então o que acontecer primeiro prevalece. Este é um exemplo:

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

A duração da animação é10segundos, ou para parar quando a animação com ID 'one' terminar, dependendo de quem chegar primeiro.

Repetição de animação

Você pode usar dois atributos dentro do elemento de animação para repeti-lo.

O primeiro atributo é repeatCount. Dentro deste atributo, você pode definir um número que fará a animação repetir várias vezes, ou usar o valor indefinite para que a animação continue rodando sem parar.

O segundo atributo é repeatDur, que especifica a duração de repetição da animação. Você também pode usar o valor indefinite no repeatDur, que tem o mesmo efeito que usar o valor repeatCount.

Aqui estão dois exemplos:

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

Combinação de animações

Você pode listas várias animações dentro de um elemento <animation> para combiná-las. Você já viu, mas aqui está outro exemplo:

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

Neste exemplo, há duas animações, cada uma configurando animações para os atributos x e y do retângulo. Este é o resultado da animação gerada:

Quando você combina o elemento <animateTransform>, o comportamento padrão é que o segundo efeito cancela o primeiro. No entanto, você pode combinar animações de transformação adicionando os atributos additive e value='sum' aos dois elementos <animateTransform>. Este é um exemplo:

<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 é o resultado da animação de escalonamento e rotação do retângulo: