# Animação #

<br />


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


Após uma busca, encontrei vários posts, como [este](https://www.chromestatus.com/feature/5371475380928512),
ou [este](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5o0yiO440LM%5B1-25%5D),
ou [este aqui](https://cinchws.com/svg-smil-animations-to-be-deprecated/), indicando que a linguagem SMIL é ou se tornará obsoleta,
por isso, optei pelo CSS para fazer as animações.

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 (mudança no tamanho do objeto) com uma operação de rotação.

Para isso, criei o seguinte código CSS:

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

A alteração do tamanho da imagem (`width` e `height`), gerou um deslocamento da figura para baixo, por isso, foi necessário alterar também
a posição (`top` e `left`) para compensar esse deslocamento.

A técnica utilizada para chegar nesses valores foi **paciência, tentativa e erro.**

:)

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

[Veja rodando no jsfiddle](https://jsfiddle.net/gomiero/ea2so8q7/)

<br />

Uma outra possibilidade é combinar duas animações (escala e rotação) 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 animar um conjunto de caminhos, a técnica utilizada foi:

 1. Salvar o objeto original em um arquivo `animXXX.svg`, para `XXX = 001` (valor inicial)  

 2. Aplicar alguma modificação no objeto (para teste, apliquei somente rotação de 30°)  

 3. Incrementar o valor de `XXX` e voltar ao passo `1` até obter um número suficiente de imagens  

O número "suficiente" depende da qualidade final desejada para a animação.

Quanto mais "quadros", melhor, porém, a quantidade de quadros pode reduzir o desempenho da aplicação e, nesse caso, o melhor é efetuar testes para chegar no valor ideal.


Nos arquivos gerados, a única informação importante (para o código desenvolvido aqui) é:

    <path
       style="fill:#b3b3b3;fill-opacity:0.74566471;stroke:# ...
       d="m 365.39429,541.71227 a 42.188788,44.166031 0 0 0 ...
       id="path4136"
       inkscape:connector-curvature="0" />

o valor atributo: `d`.

Abri cada um dos arquivos de animação, extraí os caminhos e agrupei-os em um `keyframe`, da seguinte forma:

    @keyframes animacao-d {
      0%   { d="m 301.13413,465.29503 ...
      50%  { d="m 223.64702,530.51361 ...
      75%  { d="m 366.35271,542.78214 ...
      100% { d="m 288.8656,608.00072 a...
    }

Porém, o código acima **não funcionou**.

Encontrei a resposta em um post do Stack Overflow:

[css transition animation doesn't work on svg path's "d' attribute change](http://stackoverflow.com/questions/32729752/css-transition-animation-doesnt-work-on-svg-paths-d-attribute-change)

A animação do atributo `d` deve ser feita com **SMIL**.

Com essa informação, foi possível animar os caminhos com o código abaixo:

    <path
       style="fill:#b3b3b3;fill-opacity:0. ...
       d="m 288.8656,608.00072 a 44.166031 ...
       id="novanuvem2"
       inkscape:connector-curvature="0">
       <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>

As linhas dentro do atributo `values` foram extraídas dos arquivos gerados pelo Inkscape (a partir das tags `path`, no atributo `d`).

A última linha deve ter um valor igual ou próximo ao da primeira, para evitar um "pulo" na animação (já que se trata apenas de uma rotação).

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

As técnicas apresentadas podem ser aplicadas para vários objetos diferentes dentro da aplicação e pode-se obter vários efeitos interessantes combinando diversas animações na mesma página.

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:


[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/)


Para animações mais avançadas, eventualmente será necessário recorrer ao Javascript.

Animar objetos com **path** ou **propriedades** depende do objetivo final do projeto e a melhor dica aqui é fazer um teste de conceito antes de decidir por uma ou outra.

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](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/BmROC.png
  [2]: https://i.sstatic.net/WxyGz.png