Atualização: Animação com Javascript
Para uma abordagem mais simples, consulte Animação (abaixo)
A animação de objetos em um documento SVG com Javascript pode ser feitas de
várias formas, como:
alterando as propriedades do DOM (parecida com Animação, abaixo)
modificando as transformações dos vetores (ex: através das
propriedades transform ou matrix)
animação direta de propriedades internas (ex: alterar os vetores que formam o path
)
O acesso a atributos do objeto pode ser feito diretamente, porém, para
acessar elementos do SVG, deve-se utilizar um namespace:
const svgNS = 'http://www.w3.org/2000/svg';
// Referência ao objeto SVG (sem o namespace)
svgRef = document.getElementById('svgImg01');
// Cria um caminho (usa namespace)
pathRef = document.createElementNS(svgNS, "path");
// Atributos são acessados sem o namespace
pathRef.setAttribute('id','cam');
pathRef.setAttribute('style', "fill:#000000");
pathRef.setAttribute('d', 'M0 0 Z');
// Adiciona o caminho criado ao documento SVG
svgRef.appendChild(pathRef);
Looping da Animação
A forma mais simples para atualizar os objetos durante a animação, é utilizar as
funções setInterval
ou setTimeout
.
A desvantagem, é que essas funções não tem muita precisão (de tempo) para atualizar a animação e podem ocorrer falhas ("pulos") durante a execução.
Um exemplo de como criar a estrutura básica do looping de animação com setInterval
:
var handleInterval = -1;
function renderizar()
{
// Código da animação
}
// inicia o timer
function iniciaAnimacao()
{
handleInterval = setInterval('renderizar();', 300);
}
// para o timer
function pausaAnimacao()
{
clearInterval(handleInterval);
handleInterval = -1;
}
Uma outra forma (com precisão e desempenho melhores) para atualizar a animação é
utilizar um looping auxiliar e a função requestAnimationFrame
:
var handleFrame = -1;
// tempo que o último frame foi renderizado
var ultimoFrame = 0;
// tempo até a renderização do próximo frame
const numFrames = 30.0;
// Looping auxiliar
function loopingAnimacaoFrameComTempo(tempo)
{
if ((tempo - ultimoFrame) > numFrames) {
renderizar();
ultimoFrame = tempo;
};
handleFrame = requestAnimationFrame(loopingAnimacaoFrameComTempo);
return;
}
// inicia o looping
function iniciaAnimacao()
{
ultimoFrame = performance.now() - numFrames + 1;
handleFrame = requestAnimationFrame(loopingAnimacaoFrameComTempo);
}
// interrompe o looping
function pausaAnimacao()
{
cancelAnimationFrame(handleFrame);
hanldeFrame = -1;
}
Como a função requestAnimationFrame
aguarda a próxima operação de repaint do
dispositivo, é possível obter velocidades maiores e, ao mesmo tempo, manter uma
atualização "suave" dos frames.
A constante numFrames
controla a velocidade da animação. Quanto menor o valor,
mais rápida será a animação.
Objetos
Neste exemplo, a animação deforma (aleatóriamente) os vetores de um polígono.
Criar ou alterar as propriedades de outros objetos (ex: círculos, retângulos), além do path
, segue a mesma lógica e pode ser utilizada para qualquer tipo de animação (gráficos comerciais, banners, histogramas, jogos, etc.).
Os vetores são criados pela função abaixo e retornam em uma string, que será atribuída a
propriedade d
do caminho criado:
function cria_path_inicial(x, y, r, tess)
{
var ponto_x = Math.cos(0.0)*r + x;
var ponto_y = Math.sin(0.0)*r + y;
var ret = 'M' + ponto_x + ' ' + ponto_y + ' ';
for (var angulo=0.0; angulo<2.0*Math.PI; angulo+=tess) {
ponto_x = Math.cos(angulo)*r + x;
ponto_y = Math.sin(angulo)*r + y;
ret += 'L' + ponto_x + ' ' + ponto_y + ' ';
}
return ret + 'Z';
}
e a função que deforma o polígono dentro de um cage:
// Pontos importantes nos comentários
function renderizar()
{
var i = 0;
var px = 0.0;
var py = 0.0;
// Obtém a lista de vetores do caminho
var segmentos = pathRef.pathSegList;
// Percorre a lista
for (i=1; i<segmentos.numberOfItems; i++) {
// Obtém uma referência ao vértice 'i' e as coordenadas do vértice
var vertice = segmentos.getItem(i);
px = vertice.x;
py = vertice.y;
dx = Math.random()*2;
dy = Math.random()*2;
if (Math.random() < 0.5) {
px += (px+dx < 400) ? dx : -dx;
py += (py+dy < 400) ? dy : -dy;
} else {
px -= (px-dx > 0) ? dx : -dx;
py -= (py-dy > 0) ? dy : -dy;
}
// Atualiza os vértices
vertice.x = px;
vertice.y = py;
}
return;
}
A complexidade na implementação depende, principalmente: do objetivo da animação,
os algoritmos que serão utilizados, a quantidade de objetos, sincronização dos movimentos, etc.
O formato SVG pertime a declaração de código Javascript dentro do documento, portanto,
também há possibilidade usar essa área para codificar a animação.
O resultado abaixo foi implementado com controles para iniciar e pausar a animação, resetar o polígono
e alternar o looping entre setInterval
e requestAnimationFrame
:
Observação: O exemplo no jsfiddle
foi testado com os navegadores FireFox 43.0.4 64bit
, Opera 31.0
, Safari 9.0.3
e Internet Explorer 11
, porém, não funciona no Google Chrome
.
Veja rodando no jsfiddle
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.
Veja rodando no jsfiddle
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); }
}
Veja rodando no jsfiddle
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
.
Veja rodando no jsfiddle
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.
Ao animar objetos no SVG, seja através das tags CSS, SMIL ou através de Javascript, a animação pode apresentar comportamentos diferentes ou exigir uma sintaxe específica conforme o navegador, por isso a dica é consultar e testar a aplicação em diversos navegadores:
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
Keyframe Animation Syntax
How SVG Line Animation Works
A Guide to SVG Animations - SMIL
W3 - Animation
SVG Path Morphing