22 de julho de 2015 • 8 min de leitura

#13 - Animando SVG com SMIL

Aprenda a criar animações usando só SVG e nada mais!

Introdução

Enquanto escrevo esse post vou ouvindo Deftones, mudar para um som mais pesado para animar um pouco.

Já faz um tempinho que não escrevia sobre SVG, então vou dar uma quebra nos outros posts e voltar a falar um pouquinho sobre. Se você ainda não conhece SVG ~~sai daqui~~, dá uma olhadinha na série que eu escrevo nesse blog.

Esse post foi baseado num apanhado de informações de vários cantos:

Animações

Não é de hoje que animações são as queridinhas nos sites e apps, seja pela melhoria em algum aspecto na usabilidade, seja pela beleza que a animação pode proporcionar.

O SVG é tão incrível que permite vários tipos de animações, já falei sobre animações usando css e agora irei falar sobre um tipo específico do SVG, que é a animação usando SMIL.

Mas o que é SMIL? É de comer?

SMIL ou Synchronized Multimedia Integration Language é uma linguagem baseada em XML que permite escrever interações para os elementos. A sua sintaxe é basicamente representada pelos tempos de animações, mudanças dos elementos e inicializações dos comportamentos.

Obs.: funciona em todos os browsers exceto IE caniuse

Por que usar esse treco aí?

A animação em SMIL é declarativa, ou seja, você declara transições e estados para os elementos. A vantagem é que os browsers podem otimizar esse tipo de animação, não pesando tanto na renderização. A grande desvantagem de animações declarativas é que, em geral, elas não são tem tanto poder e não fazem tantas coisas. Eis que o SMIL brilha, ele tem a facilidade e otimização que o CSS permite com o poder de manipulação que só o JS teria.

Como o SMIL é mais poderoso, ele permite animar propriedades que o CSS não conseguiria, como, por exemplo, as formas das Paths.

Outra coisa bastante bacana é que animações feita em SMIL funcionam até mesmo quando o SVG é inserido na tag img! =)

E também conseguimos manipular as animações com eventos! Convencido?

Comandos básicos

Assim como as diferentes tags que o SVG possui para suas formas, ele também possui algumas poucas tags para realizar essas animações, que são:

<animate>: permite animar atributos e propriedades num determinado período de tempo.
<animateTransform>: usado para animar a transformação dos atributos num período de tempo.
<animateMotion: para mover um elemento ao longo de um path.
<set>: usado também como um "shorthand" para o animate, é útil para definir valores não numéricos para animação e propriedades, como a propriedade de visibility.

Sintaxe

<animate
  id="myAnim"
  attributeName=" "
  from=" "
  to=" "
  dur=" "
  begin=" "
  fill=" "
  ...
/>

Para o animate temos os principais atributos:

attributeName: o atributo do qual iremos alterar, pode ser um fill ou points de um path.
from: de onde se inicia.
to: para onde vai a animação.
dur: a duração da animação.
begin: é a "trigger" de inicialização da animação. Podemos colocar como click para dizer que só inicia com um click ou podemos colocar como begin=2s, onde dizemos que a animação só irá começar 2s depois de ter carregado.
fill: não confunda com preenchimento, esse atributo serve para dizer se a animação deve parar em seu estado final (freeze) ou a animação ser removida quando alcançar o estado final (remove).
repeatCount: como o nome já diz a quantidade de vezes que a animação vai repetir, se quiser que seja infinito, basta usar indefinite.
repeatDur: marca o tempo de duração da repetição, a notação é conforme relógio normal, exemplo, 1:30 significa 1 minuto e 30 segundos.

Modos de uso

Existem duas formas de se aplicar animações, que são:

Especificando um target

<rect id="myRect" ... /> <animate xlink:href="#myRect" ... />

Aninhando dentro do elemento

<rect id="myRect" ...>
  <animate ... />
</rect>

Um outro detalhe muito importante é que para cada animate só podemos animar um atributo principal, que é determinado pelo attributeName. Portanto se quisermos fazer 2 tipos diferentes de animação, iremos precisar de 2 elementos animate para cada atributo.