Um guia para iniciantes em animação SVG com CSS

Scalable Vector Graphics (SVGs) são mais do que apenas arquivos de imagem. Como um aplicativo XML, os SVGs contêm marcação que se parece e funciona muito como HTML. Você também pode usá-los em conjunto com o código CSS e JavaScript. Isso possibilita animar arquivos SVG, criando imagens complexas que funcionam bem para web design e outros ambientes dinâmicos.

Mas como você faz uma animação SVG? Comece com uma forma SVG, anime-a usando CSS e desenvolva esses princípios para usar animação em seu próprio trabalho.

Animando SVGs com HTML e CSS

Embora você possa usar JavaScript para animar SVGs programaticamente, o CSS agora também tem um bom suporte para animações. Você pode encontrar todo o código de exemplo em o CodePen para este projeto.

Construindo uma imagem SVG dentro de HTML

O primeiro passo neste processo é construir a imagem SVG com a qual você trabalhará. Você pode encontrar a marcação SVG no painel HTML no CodePen.

Estrutura SVG

Embora os SVGs compartilhem um formato semelhante ao HTML, as tags usadas para criá-los são diferentes. Um SVG tem tags de abertura e fechamento () que pode conter uma variedade de propriedades diferentes. No nosso caso, estamos usando

Eu iria e caixa de visualização propriedades. A propriedade id funciona como qualquer outro ID HTML, fornecendo a você um identificador exclusivo para usar em seu CSS/JS. A propriedade viewBox define o tamanho do nosso SVG.

<!-- SVG com tamanho responsivo -->
<svg id="Animação MUOSVGA" viewBox="0 0 800 600">
<!-- Conteúdo SVG -->
</svg>

Em vez disso, você pode usar as propriedades de largura e altura, conforme demonstra o exemplo a seguir. No entanto, viewBox cria um SVG responsivo que corresponderá ao tamanho da janela de visualização sem quebrar sua proporção.

 SVG com um tamanho estático 
<svg id="Animação MUOSVGA" largura="800" altura="600">
<!-- Conteúdo SVG -->
</svg>

Formas SVG

Você pode criar imagens detalhadas com SVGs, com uma variedade de ferramentas de formas diferentes à sua disposição. Este exemplo de SVG usa três das formas disponíveis, mas há muitas outras. Cada uma das formas neste exemplo tem um ID exclusivo que as animações CSS podem usar posteriormente.

• SVG Elipse: Esta é uma ferramenta circular/oval. Ele especifica propriedades para o raio do eixo y/x (rx/ry), cor de preenchimento e largura do traço. É importante lembrar que o raio que você escolher com esta ferramenta será metade do diâmetro da forma.

<ID da elipse ="círculo" rx="100" ry="100" preencher ="#ffed00" largura do traço="0"/>

• SVG Rect: A ferramenta SVG rect cria um quadrado ou retângulo. Este tem propriedades para largura/altura, uma transformação, cor de preenchimento e largura do traço.

<ID correto ="quadrado" largura="200" altura="200" transformar="traduzir (300 200)" preencher ="#05f"
 largura do traço="0"/>

• Polígono SVG: Use um polígono SVG para definir um número específico de pontos e criar formas arbitrárias de tamanhos diferentes. O polígono no exemplo tem três lados, tornando-o um triângulo, e você pode ver a posição de cada ponto plotado em suas propriedades. Junto com isso, temos propriedades para a posição, cor de preenchimento e largura do traço do triângulo.

<código do polígono ="triângulo" pontos="15,-97 115,102 -84,102 15,-97"
 transformar="traduzir (0,0)" preencher ="#f00" largura do traço="0"/>

Quando a animação estiver no lugar, as formas se alinharão uma ao lado da outra.

Essas três formas SVG são algumas das mais comuns, mas há mais para você escolher. Você pode usar as seguintes formas quando trabalhando com uma animação SVG:

• Círculo SVG: Esta forma é semelhante a uma elipse, mas sempre tem raios X e Y iguais.
• Linha SVG: Uma linha SVG é um único segmento de linha com dois pontos, um em cada extremidade.
• Polilinha SVG: As polilinhas são como linhas básicas, só que podem ter mais de dois pontos.
• Polígono SVG: Os polígonos SVG são como retângulos, só que podem ter mais de quatro pontos, tornando possíveis formas complexas.
• Caminho SVG: Os caminhos SVG funcionam de maneira semelhante à ferramenta caneta no Adobe Photoshop. As linhas podem se conectar como uma polilinha/polígono, mas também podem ter curvas aplicadas a elas.

Como animar SVGs com CSS

Agora que você tem algumas formas dentro do seu SVG, é hora de passar para a animação CSS. Cada uma das formas tem uma animação diferente para demonstrar algumas das opções que você tem, mas há muito mais para explorar com seus próprios designs. O círculo se move pela tela, os cantos do quadrado se tornam redondos e o triângulo gira. Todos esses usam Keyframes CSS para criar animações suaves.

Movendo o Círculo Usando Transformar e Traduzir

O círculo no exemplo SVG se move da parte inferior para a parte superior da tela durante seu ciclo de animação. Você precisa atribuir uma animação ao círculo antes que ele possa se mover, por meio de uma propriedade CSS:

#círculo {
 animação: circle_anim 2000ms linear infinito normal para frente
}

A primeira palavra no valor, círculo_animal, é um nome para a animação. Ele é executado por dois segundos (2.000 ms). Tem um linear curva que mantém sua velocidade consistente e está configurada para executar um infinito número de vezes no para a frente direção. Você pode usar quadros-chave para definir fases individuais da animação:

@keyframes círculo_anim {
 0% { transformar: traduzir(155px, 305px) }
 45% { transformar: traduzir(155px, -123px) }
 50% { transformar: traduzir(-123px, -123px) }
 55% { transformar: traduzir(-123px, 728px) }
 60% { transformar: traduzir(155px, 728px) }
 100% { transformar: traduzir(155px, 305px) }
}

Há seis quadros-chave nesta animação, então o círculo se moverá para seis locais diferentes em cada ciclo. o transformar: traduzir A propriedade define a posição do círculo em cada estágio. Em 0%, o círculo está no meio da tela e se move para cima e fora de vista em 45%. Em 50%, ele se moveu para a esquerda da tela antes de descer abaixo da janela de visualização em 55%. O círculo volta à sua posição horizontal em 60% e a animação é completada em 100% com o círculo de volta no meio da tela.

Animar a propriedade do raio da borda do quadrado

O quadrado no exemplo oferece uma boa referência para animações de propriedades gerais. Contanto que você saiba a sintaxe correta a ser usada, você pode animar qualquer propriedade CSS. A propriedade border-radius é uma boa demonstração disso. O quadrado tem cantos afiados que se transformam em cantos arredondados e depois voltam em cantos quadrados novamente.

#quadrado { animação: quadrado_anim 2.000 ms facilidade de entrada infinita para frente normal }

A animação quadrada é chamada square_anim e tem um tempo de execução de dois segundos. o facilidade de entrada curva torna a animação mais lenta no início e no final, criando um efeito suave.

@keyframes quadrado_anim {
 0% { rx: 0px; ry: 0px }
 45% { rx: 40px; ry: 40px }
 55% { rx: 40px; ry: 40px }
 100% { rx: 0px; ry: 0px }
}

Como você pode ver, esta animação tem quatro quadros-chave. O raio da borda X e Y muda de 0px para 40px entre 0% e 45%, pausando em 40px até 55%. Em seguida, ele volta para 0px para cada raio quando a animação atinge 100%.

Gire o triângulo SVG com transformação

A animação SVG final no exemplo é a mais simples, com o triângulo girando em torno de seu ponto central. A forma completa uma revolução a cada dois segundos e continua funcionando infinitamente. Ele tem uma curva fácil que resulta na desaceleração da animação no final. A animação é chamada de triângulo_anim.

#triângulo { animação: triângulo_anim 2.000 ms facilidade infinita para frente normal }

Esta animação tem dois quadros-chave, um em 0% e outro em 100%. A propriedade Transform gira o triângulo de 0 graus em 0% para 360 graus em 100%, criando um giro completo.

@keyframes triângulo_anim {
 0% { transformar: traduzir(644px, 297px) girar(0 graus) }
 100% { transformar: traduzir(644px, 297px) girar(360 graus) }
}

Como animar outras propriedades

As três animações abordadas acima são um bom ponto de partida quando você está trabalhando com SVGs, mas provavelmente desejará levar isso adiante. Você pode usar a regra de animação CSS para ajustar praticamente qualquer valor de propriedade que possa atribuir ao seu SVG. Isso inclui valores básicos, como dimensionamento e posicionamento, bem como valores mais avançados, como bordas, sombras e modos de mesclagem.

Em casos raros em que o CSS não pode fazer o trabalho, você pode usar o código JavaScript para animar imagens SVG. Você pode encontrar muitos guias para ajudá-lo com isso quando se sentir pronto para dar o próximo passo com seus SVGs.

Fazendo suas próprias animações SVG

Seja você um web designer, desenvolvedor de software ou simplesmente uma pessoa criativa, as animações SVG podem ser divertidas e satisfatórias de fazer. Você pode encontrar muitos recursos na web que podem ajudá-lo com animação baseada na web, quando você estiver familiarizado com o básico.

10 padrões de fundo CSS que você pode usar em seu site

Leia a seguir