## 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](https://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