Como criar animação SVG usando CSS
A animação do SVG pode ser feita por meio de elementos nativos, como
A Animação CSS também pode ser uma forma alternativa de usar a biblioteca JavaScript, como o SnapSVG. Neste post vamos ver o que podemos oferecer com CSS Animation no SVG.
1. Criando as Formas
Primeiro de tudo, precisaremos desenhar as formas e objetos que queremos animar. Você pode usar aplicativos como Esboço, Adobe Illustrator, ou Inkscape para criar um.
Para este exemplo, eu desenhei um céu nublado como pano de fundo, e um foguete atirando para cima, chamas incluídas:
Uma vez feito o desenho, precisamos exportar cada objeto criado no SVG.
Eu vou usar o Sketch como um exemplo para esta etapa. Selecione o objeto que você deseja transformar em formato SVG. No canto inferior direito da sua janela, clique em Tornar Exportável. Escolha o formato SVG e clique em Exportar object-name. Você precisa fazer esse objeto de cada vez.
2. Insira o SVG em HTML
Quando você abre o arquivo SVG em um editor de código, verá que os códigos SVG são bastante confusos. Assim, antes de implantar o arquivo SVG, vamos arrumar o código e otimizá-lo com esta ferramenta de linha de comando chamada SVGO.
Lançamento terminal ou Prompt de comando, e instale o SVGO com esta linha de comando:
[sudo] npm instalar -g svgo
Tun o comando, svgo, no arquivo SVG usando --bonita para produzir código SVG legível:
svgo rocket.svg --pretty
Se você tiver vários SVGs em um diretório, poderá otimizá-los todos juntos, de uma só vez. Supondo que o diretório é nomeado / images, então, a partir do diretório pai, use este comando:
svgo -f imagens --pretty
Vamos ver a diferença antes e depois de usar o SVGO.
Copie o código dentro do arquivo SVG e cole em um arquivo HTML. Vamos trabalhar em um espaço de trabalho de 800px por 600px de largura, então não vamos esquecer de definir o largura no elemento SVG.
O SVG é definido no arquivo HTML. Vamos precisar definir um ID para cada objeto, para que possamos selecioná-los no CSS mais tarde.
Para este tutorial, precisamos definir o ID para o foguete e as chamas, e algumas das nuvens. Para que os objetos manipulem o estágio de animação mais tarde, precisamos adicionar identidade - você também pode usar classe - para cada objeto. Nesta fase, o código ficará assim:
3. Animar usando CSS
Agora vamos nos divertir. O plano é impulsionar o foguete para o espaço. O foguete é dividido em dois grupos; o foguete em si e a chama.
Primeiro de tudo, posicionamos o foguete no meio do espaço de trabalho, como segue:
#rocket transform: translate (260px, 200px);
O que você vê é isto:
Agora, para fazer o foguete parecer que está subindo, precisamos criar a ilusão de nuvens caindo. O CSS que usamos para isso é:
# cloud1 animação: queda 1s infinita linear; @keyframes fall from transform: translateY (-100px); para transform: translateY (1000px)
Para que pareça ainda mais realista, vamos animar quatro nuvens e torná-las “outono” em diferentes velocidades. Também os posicionaremos diferentemente do eixo X.
A segunda nuvem terá código como este:
# cloud2 animação: queda-2 2s infinito linear; @keyframes fall-2 from transform: translate (200px, -100px); para transform: translate (200px, 1000px)
Note que nós movemos a nuvem # 2 um pouco para a direita, 200 px com traduzir. Nesta fase, o resultado deve ficar assim.
Em seguida, vamos fazer o foguete ganhar vida. Atribuiremos um quadro-chave de animação da seguinte maneira:
#rocket animação: popup 1s facilidade infinita; @keyframes popup 0% transformar: traduzir (260 px, 200 px); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
E adicione animação à chama do foguete também:
#flame animação: agitar .2s infinito linear; @keyframes shake 0% transform: translate (55px, 135px) rotate (7deg); 20% transform: translate (55px, 135px) rotate (0deg); 40% transform: translate (55px, 135px) rotate (-7deg); 60% transform: translate (55px, 135px) rotate (0deg); 100% transform: translate (55px, 135px) rotate (0deg);
Certo! Agora que nossos códigos estão todos definidos, a animação deve estar trabalhando em nosso SVG.
Dê uma olhada no nosso foguete explodindo no espaço.
Pensamento final
A animação não é o recurso mais fácil de entender no CSS. Mas esperamos que você ache este tutorial como um bom ponto de partida para explorar ainda mais a Animação CSS no SVG; Você ficaria surpreso em saber o que pode ser conseguido com CSS Animation na mão.
Se você quiser começar com o básico, você pode começar aqui com este post: Uma olhada em: Scalable Vector Graphics (SVG) Animação ou siga o resto da série SVG.
- Ver demonstração
- Fonte de download
