## Atualização: Animação com Javascript *Para uma abordagem mais simples, consulte Animação (abaixo)* A animação de objetos em um documento [SVG](https://www.w3.org/TR/SVG/Overview.html) com Javascript pode ser feitas de várias formas, como: - alterando as propriedades do [DOM](https://pt.wikipedia.org/wiki/Modelo_de_Objeto_de_Documentos) (parecida com **Animação**, abaixo) - modificando as transformações dos vetores (ex: através das propriedades [transform](https://www.w3.org/TR/SVG/coords.html#SVGGlobalTransformAttribute) ou [matrix](https://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix)) - animação direta de propriedades internas (ex: alterar os vetores que formam o [`path`](https://www.w3.org/TR/SVG/paths.html)) O acesso a atributos do objeto pode ser feito diretamente, porém, para acessar elementos do SVG, deve-se utilizar um [namespace](https://pt.wikipedia.org/wiki/Espa%C3%A7o_de_nomes): 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`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) ou [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/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`](https://developer.mozilla.org/en-US/docs/Web/API/window/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`: <br /> [![Animação JS][1]][1] <br /> **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](https://code.google.com/p/chromium/issues/detail?id=539385)** no `Google Chrome`. <br /> [Veja rodando no jsfiddle](https://jsfiddle.net/gomiero/z4r40Lw0/) <br /> --- ## 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: - [SMIL - Wikipedia](https://pt.wikipedia.org/wiki/Linguagem_de_Integra%C3%A7%C3%A3o_de_Multim%C3%ADdia_Sincronizada) - [CSS](https://www.w3.org/Style/CSS/) 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](http://jsfiddle.net/wyj51v2b/) 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](https://pt.wikipedia.org/wiki/Interpola%C3%A7%C3%A3o) de tempo. <br /> [![inserir a descrição da imagem aqui][2]][2] <br /> [Veja rodando no jsfiddle](https://jsfiddle.net/gomiero/ea2so8q7/) <br /> 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); } } <br /> [Veja rodando no jsfiddle](https://jsfiddle.net/gomiero/ku1bpwL6/) <br /> --- ## Animação de Caminhos (*paths*) ## <br /> 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](http://stackoverflow.com/questions/32729752/css-transition-animation-doesnt-work-on-svg-paths-d-attribute-change). 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`. <br /> [Veja rodando no jsfiddle](http://jsfiddle.net/gomiero/hL08ahw2/) <br /> --- ## 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: - [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) - [Apple - Safari](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html) - [MS - Internet Explorer](https://msdn.microsoft.com/en-us/library/ms531209(v=vs.85).aspx) - [Opera](http://www.opera.com/docs/specs/opera95/css/) 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](https://pt.wikipedia.org/wiki/Desenho_vetorial) e não [mapa de bits](https://pt.wikipedia.org/wiki/Raster). <br /> --- Abaixo, seguem outros links que ajudaram na elaboração da resposta: [Basic SVG path tweening with SMIL](http://fettblog.eu/blog/2013/07/16/basic-svg-path-tweening-with-smil/) [Keyframe Animation Syntax](https://css-tricks.com/snippets/css/keyframe-animation-syntax/) [How SVG Line Animation Works](https://css-tricks.com/svg-line-animation-works/) [A Guide to SVG Animations - SMIL](https://css-tricks.com/guide-svg-animations-smil/) [W3 - Animation](https://www.w3.org/TR/SVG2/animate.html#AnimationAttributesAndProperties) [SVG Path Morphing](http://tavmjong.free.fr/blog/?p=741) [1]: https://i.sstatic.net/q2XBz.gif [2]: https://i.sstatic.net/Wm8wC.gif