Animação
Animar o objeto SVG consistem em alterar as suas propriedades em função de um intervalo de tempo.
É possível alterar essas propriedades (sem uso de Javascript), por exemplo, utilizando:
Através do CSS, é possível criar uma animação alterando uma ou mais propriedades em um intervalo de tempo utilizando, por exemplo, os comandos:
@keyframes
para definir como e quais propriedades serão alteradas.animation
para definir, por exemplo, o tempo da animação ou quantas vezes ela será executada
Ao analisar a imagem no link da pergunta, a primeira estratégia utilizada para copiar a animação, foi combinar uma operação de escala com rotação, conforme o código abaixo:
#container {
position: relative;
float: left;
width: 90mm;
height: 90mm;
left:20px;
top:100px;
background: rgb(240, 240, 255);
}
@keyframes animacao-escala-rotaciona {
0% { width:45mm; height: 45mm; top: 50%; left: 50%; }
50% { width:55mm; height: 55mm; top: 45%; left: 45%; }
100% { width:45mm; height: 45mm; top: 50%; left: 50%; transform: rotate(360deg); }
}
#svg2 {
position:absolute;
top: 50%;
left: 50%;
width: 45mm;
height: 45mm;
margin: -23mm 0 0 -23mm;
animation:
animacao-escala-rotaciona 4s infinite running linear;
}
No comando keyframes
, os passos (steps) da animação são definidos em porcentagens do tempo total da animação.
Dentro do bloco de código após cada porcentagem, estão as propriedades que serão alteradas em cada passo.
No objeto svg2
, o atributo animation
define o tempo da animação, a quantidade de repetições (infinite
)
o status (parada ou rodando) e o tipo de interpolação de tempo.
Uma outra possibilidade é combinar as duas transformações diretamente no atributo transform
, com o código:
@keyframes animacao-escala {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: scale(1.8) rotate(180deg); }
100% { transform: scale(1.0) rotate(360deg); }
}
Animação de Caminhos (paths)
Para este tipo de animação, basta alterar os caminhos conforme o tempo da animação no atributo d
da tag path
.
A animação do atributo d
deve ser feita com SMIL, pois o CSS não permite a animação desse atributo.
No código abaixo, o atributo values
(na tag animate
) armazena os caminhos de cada passo da animação, e o atributo d
(na tag path
), o caminho inicial:
<path
d="m 288.8656,608.00072 a 44.166031 ...
id="novanuvem2"
>
<animate
id="path"
xlink:href="#novanuvem2"
attributeName="d"
repeatCount="indefinite"
values="
m 288.8656,608.00072 a 44.166 ...
m 325.36386,601.50838 a 42.18 ...
m 352.99225,577.56713 a 42.18 ...
m 365.39429,541.71227 a 42.18 ...
m 358.90196,505.21401 a 44.16 ...
m 334.96071,477.58562 a 44.16 ...
m 299.10585,465.18357 a 44.16 ...
m 262.60758,471.6759 a 42.188 ...
m 234.97918,495.61715 a 42.18 ...
m 222.57713,531.47202 a 42.18 ...
m 229.06946,567.97029 a 44.16 ...
m 253.01071,595.59869 a 44.16 ...
m 288.8656,608.00072 a 44.166 ...
dur="5s"/>
</path>
Um ponto importante é que o atributo xlink:href="#novanuvem2"
na tag animate
deve corresponder ao id
da tag path
.
Conclusão
Há formas diferentes e, talvez, mais eficientes para implementar esse tipo de animação, mas o objetivo desta resposta é oferecer um exemplo prático de como criar animações com gráficos vetoriais.
As tags CSS e/ou SMIL possuem comportamentos ou sintaxe diferentes, conforme o navegador, por isso a dica é consultar e testar a aplicação em diversos nagevadores:
Para animações mais avançadas, eventualmente será necessário utilizar Javascript.
Além da animação de imagens SVG, existem outras possibilidades como, por exemplo, canvas 2D, canvas 3D com WebGL e, dependendo do tipo de animação desejada, a animação com canvas e Javascript pode ser uma boa opção.
A vantagem da animação SVG é que a qualidade da imagem não depende da resolução do dispositivo onde ela será renderizada (ex: monitores, celulares, etc.), devido a imagem ser formada por vetores e não mapa de bits.
Abaixo, seguem outros links que ajudaram na elaboração da resposta:
Basic SVG path tweening with SMIL