Uma olhada na animação de gráficos vetoriais escaláveis ​​(SVG)

Hoje vamos continuar nossa discussão sobre Gráfico vetorial escalável (SVG), e desta vez vamos trabalhar com Animação SVG. Não tenha medo, porém, o SVG Animation é relativamente fácil e, na verdade, neste post vamos começar do básico.

Implementação Básica

A animação no SVG pode ser feita através de elemento;

Como você pode ver no snippet de código acima, adicionamos o dentro o elemento que será afetado. este contém alguns dos seguintes atributos;

Nome do Atributo: Este atributo especifica qual atributo do elemento será afetado na animação.

de: Este atributo é opcional, podemos especificar um valor exato ou deixá-lo para começar a partir de onde foi.

para: Este atributo especifica a direção da animação. Dependendo do valor especificado em Nome do Atributo, os resultados podem variar. Mas neste exemplo, vai estender o altura.

dur: Este atributo especifica a duração da animação. O valor desse atributo é expresso em Sintaxe do valor do relógio. Por exemplo, 02:33 representa 2 minutos e 33 segundos, enquanto 3h é igual a 3 horas, mas não precisamos desse tempo, então especificamos a duração de apenas 3s ou 3 segundos;

A mesma coisa vai para elemento, mas desta vez nós direcionamos o atributo de raio do círculo (r).

• Demonstração Básica de Implementação

Elemento movente

Ao mover elementos SVG, precisamos apenas segmentar a coordenada do elemento x e y;

No exemplo acima, nós movemos o retângulo de 0 para 200 em 3 segundos, o retângulo aparecerá movendo-se horizontalmente da esquerda para a direita. Além disso, se você olhar com cuidado, também adicionamos outro atributo ao elemento, nomeadamente preencher.

preencher atributo aqui não tem nada a ver com a cor de fundo como nos outros elementos SVG. Este atributo especifica como a animação atuará após o término da duração. Neste exemplo nós congelar o elemento afetado para que ele permaneça onde a animação termina.

Ele também funciona de forma semelhante ao elemento, podemos usar cx ou cy, igual a:

• Demonstração de elemento em movimento

Animar vários atributos

Até agora, apenas segmentamos um atributo para ser animado, mas também é possível animar mais de um atributo de uma só vez. O exemplo abaixo mostra como fazemos:

Como você pode ver, funciona de forma semelhante, só que agora temos dois elementos dentro do para segmentar o raio e a largura do traçado ser afetado.

• Demonstração de múltiplos atributos

Seguindo um caminho

Em nosso post anterior em Trabalhando com texto no SVG, nós mostramos como fluir o texto para um caminho. Também é possível fazer a mesma coisa Animação SVG, Podemos animar um elemento para seguir um caminho. Aqui está um exemplo.

O caminho é melhor definido dentro de um elemento, como mostrado acima. Para que o elemento siga o caminho, precisamos definir a animação com e ligar o caminho identidade com elemento, como segue;

É isso aí, agora vamos ver isso em ação;

• Seguindo a demonstração do caminho

Transformações

Nós também podemos usar a transformação como escala, traduzir e rodar para a animação, e para isso vamos usar ;

As transformações no SVG compartilham princípios semelhantes com o CSS3, e nós o abordamos de forma bastante abrangente em nosso post anterior sobre CSS3 2D Transformation.

• Demonstração de Transformação

Pensamentos finais

Dependendo da sua proficiência no SVG Animation você pode criar algo parecido com isto.

Uma vantagem de usar o SVG Animation em Flash Animation é que ele não depende de plugins de terceiros para funcionar e também consideravelmente mais rápido que o Flash. Depois que a Adobe interrompeu o suporte do Flash no Android, talvez você queira começar a experimentar essa abordagem para veicular a animação no seu próximo site..

Referências adicionais

• Documentação do SVG Animate
• Técnicas Avançadas de Animação SVG

• Ver demonstração
• Fonte de download