Estou estudando para o Hackathon do Firefox OS, onde o objetivo é desenvolver um game para o Firefox OS, vou desenvolver um Bicho Virtual, sendo assim, tive a necessidade de estudar o SVG para desenhar o bicho virtual, e para realizar algumas pequenas animações estou estudo SMIL, que é o recurso de animação disponível nativamente pelo SVG.
O que é SVG?
SVG (Scalable Vector Graphics / Gráfico Vetor Escalável) é um arquivo XML que descreve um gráfico vetorial, sendo assim, o navegador consegue renderizar o gráfico sem qualquer problema. A maior vantagem de um vetor, é que ele não perde a qualidade quando ampliado. Para saber mais detalhes sobre o SVG recomendo o site do Maujor sobre SVG.
Fazendo SVG Animação com SMIL
Agora que já sabemos o básico sobre o SVG, vamos entender o SMIL na prática. Para fazer a animação com SMIL, vamos utilizar as chaves <animate> e <animateTransform> com seus atributos. Agora vamos para o exemplo prático.
Animação utilizando um atributo (<animate>)
Utilizando a chave <animate>, podemos realizar uma animação interagindo com um atributo qualquer de um elemento SVG.
Exemplo:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Utilizando a chave animate</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg"> <circle fill="#F7941E" stroke="#000" cx="100" cy="99" r="20"> <animate attributeName="cy" from="99" to="21" dur="1s" repeatCount="indefinite" /> </circle> </svg> </body> </html>
- attributeName – qual atributo receberá a animação;
- from – qual valor inicial da animação;
- to – qual valor final da animação;
- dur – define o tempo da animação;
- repeatCount – quantidade de vezes que a animação será executada, aceita inteiros ou valor indefinite.
Transformando atributos (<animateTransform>)
Outra forma de realizar animação, é transformando os atributos, temos 5 tipos de transformação (translate, scale, rotate, skewX, skewY). Hoje vamos ver apenas o rotate.
Exemplo:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<g>
<g>
<circle fill="#F7941E" stroke="#000" cx="50" cy="50" r="50" />
<line stroke="#000" y1="50" x1="0" y2="50" x2="100" />
<line stroke="#000" y1="0" x1="50" y2="100" x2="50" />
</g>
<animateTransform
attributeName="transform"
begin="1s"
dur="3s"
type="rotate"
from="0 100 100"
to="180 100 100"
/>
</g>
</svg>
- attributeName – como não vamos manipular um atributo, utilizamos o valor “transform”;
- begin – caso seja necessário aguardar um tempo antes da animação inicializar, você pode adicionar o valor em segundo conforme o exemplo acima, caso contrario só deixar o valor zerado “0s”;
- dur – tempo em segundos da duração da animação;
- type – tipo de transação (translate, scale, rotate, skewX, skewY);
- from – pontos de origem da animação;
- to – pontos de destino da animação.
Tem mais opções de animação com SMIL, se precisar saber mais sobre o SMIL, recomendo o post da Mozilla Developer sobre Animação com SMIL.
The post SVG Animação com SMIL appeared first on Desenvolvedor Front-End - Marco Bruno.
