Um guia prático para animação SVG

Qualquer engenheiro de front-end que se preze está ciente dos desafios que o ecossistema fragmentado de dispositivos traz. Diferentes tamanhos de tela, resoluções e proporções dificultam a entrega de uma experiência consistente. Mais ainda para aqueles que desejam oferecer uma experiência perfeita em pixels.

Os Scalable Vector Graphics (SVGs) ajudam a resolver parte desse problema e o fazem muito bem. Embora tenham suas limitações, os SVGs podem ser muito úteis para determinadas ocasiões e, se você tiver uma boa equipe de design, também poderá criar uma experiência visualmente mais impressionante sem sobrecarregar indevidamente o navegador da Web ou dificultar os tempos de carregamento.

Durante os últimos meses, tenho trabalhado em um projeto que está fazendo uso extensivo de SVG e seus recursos de animação e efeito. Neste artigo, compartilharei como você pode usar o SVG e suas técnicas de animação para trazer uma nova vida ao seu trabalho de front-end da web.

Gráficos vetoriais escalonáveis

SVG é um formato de imagem baseado em XML, assim como o HTML funciona. Ele define diferentes elementos para várias formas geométricas familiares que podem ser combinadas na marcação para produzir gráficos bidimensionais.

A especificação SVG é um padrão aberto desenvolvido pelo World Wide Web Consortium (W3C) em 1999.

Todos os principais navegadores da web têm suporte de renderização SVG há algum tempo.

Como os gráficos SVG são documentos XML, os navegadores da Web fornecem APIs baseadas em nós DOM que podem ser usadas para interagir com as imagens. Fale sobre dar vida às fotos!

Caminhos SVG

Se houver um elemento sobrecarregado no SVG, esse seria o elemento <path> .

O elemento de caminho é uma forma básica que pode ser usada para criar praticamente qualquer forma 2D avançada que você possa imaginar.

O elemento funciona tomando uma sequência de comandos de desenho. É muito parecido com a linguagem de programação Logo de 1967, apenas modernizada e projetada para gráficos sofisticados. O elemento recebe essa sequência de comandos de desenho por meio do atributo d .

 <!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" />

Você pode pensar em uma caneta virtual que desenha na tela e os comentários de desenho no elemento de caminho apenas controlam a caneta. No exemplo acima, a caneta está sendo instruída a se mover para a posição (10, 10) ( M10 10 ), para desenhar uma linha para (75, 10) ( L75 10 ), para desenhar uma linha para (75, 75) L75 75 e depois fechar o percurso voltando ao ponto de partida ( Z ).

Usando outros comandos de desenho, como arcos ( A ), curvas bezier quadráticas ( Q ), curvas bezier cúbicas ( C ), etc, você pode criar formas e gráficos muito mais complexos em SVG.

Você pode aprender muito mais sobre o elemento path aqui.

Caminhos SVG e CSS

“Ok Juan, eu entendo. Caminhos são poderosos, mas como faço para animá-los?” você diz.

Para nossa primeira técnica, vamos aproveitar dois atributos SVG: stroke-dasharray e stroke-dashoffset .

O atributo stroke-dasharray controla o padrão de traços e espaços usados ​​para traçar o caminho. Se você quiser desenhar suas linhas como um grupo de traços e lacunas em vez de um traço contínuo de tinta, este é o atributo que você usaria.

Como as imagens SVG fazem parte do DOM do navegador da Web e o stroke-dasharray é um elemento de apresentação, o atributo também pode ser definido usando CSS.

Da mesma forma, o atributo stroke-dashoffset (que especifica até onde o padrão de traço deve ser iniciado) também pode ser controlado usando CSS.

Esses dois atributos SVG, juntos, podem ser usados ​​para animar caminhos SVG, dando ao espectador a ilusão de que os caminhos estão sendo desenhados gradualmente.

Tome esta curva de bezier quadrática, por exemplo:

 <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

Para animar este caminho como se estivesse sendo desenhado de forma gradual e suave na tela, teremos que definir os comprimentos do traço (e do intervalo), usando o atributo stroke-dasharray, igual ao comprimento do caminho. Isso é para que o comprimento de cada traço e lacuna na curva tracejada seja igual ao comprimento de todo o caminho.

Em seguida, definiremos o deslocamento do traço, usando o atributo stroke-dashoffset, para 0. Isso fará com que o caminho apareça na tela como uma curva sólida (estamos essencialmente olhando para o primeiro traço, e já fizemos cada traço abranger todo o comprimento da curva). Ao definir o deslocamento do traço igual ao comprimento da curva, terminaremos com uma curva invisível (agora estamos vendo a curva sendo renderizada como uma lacuna inteira - a parte que segue imediatamente um traço).

Agora, animando a propriedade stroke-dashoffset, você pode fazer a curva aparecer na tela gradualmente.

Veja os caminhos Pen Toptal - SVG & CSS do Toptal Blog (@toptalblog) no CodePen.

Como você pode ver, a curva está sempre lá. Estamos apenas alterando o deslocamento do traço para fazer a parte tracejada aparecer pouco a pouco.

Você pode dar um passo adiante usando o mesmo princípio, mas com mais caminhos:

Veja os caminhos Pen Toptal - SVG & CSS do Toptal Blog (@toptalblog) no CodePen.

Aqui você tem uma curva preta que é fixa, uma vermelha que está se movendo ao longo do caminho e outra preta seguindo a vermelha, mas 40px atrás.

Stroke-dasharray e stroke-dashoffset são dois atributos muito poderosos que podem ser usados ​​para aplicar uma infinidade de animações e efeitos aos seus caminhos SVG. Você pode tentar esta ferramenta útil que você pode usar para experimentar os dois atributos.

Animando objetos ao longo de caminhos SVG

Com SVG e CSS, outra coisa legal que você pode fazer é animar objetos ou elementos seguindo um caminho.

Existem 2 atributos SVG que vamos usar para a animação:

• offset-path: A propriedade CSS offset-path especifica o caminho de deslocamento onde o elemento é posicionado.

• offset-distance: A propriedade CSS offset-distance especifica uma posição ao longo de um caminho de deslocamento.

Ao combinar essas duas propriedades, você pode criar animações como esta facilmente:

Veja os caminhos Pen Toptal - SVG & CSS do Toptal Blog (@toptalblog) no CodePen.

Como você pode ver, temos um novo elemento div.ball .

Este elemento pode ser qualquer coisa, uma div, uma imagem, texto, qualquer coisa. A ideia neste exemplo é que com o uso de offset-path e offset-distance você pode dar ao elemento um caminho para seguir e animar a distância e o elemento se moverá pelo caminho.

Animações SVG usando JavaScript

Se tudo isso já não for sofisticado o suficiente, você sempre pode recorrer ao JavaScript.

Animar elementos SVG com JavaScript pode ser muito parecido com animar elementos DOM. No entanto, com JavaScript, você pode obter as técnicas de animação que verificamos acima, mas com mais facilidade.

Anteriormente, tínhamos que codificar os comprimentos do caminho em nosso CSS. Com a ajuda da função JavaScript path.getTotalLength() é possível calcular o comprimento do caminho em tempo real e usá-lo conforme necessário. Você pode aprender mais sobre isso aqui.

Além disso, várias bibliotecas já estão à sua disposição que podem tornar as animações SVG muito mais fáceis do que já são.

Snap.svg não apenas facilita o desenho de imagens SVG usando JavaScript, como também torna a animação tão simples quanto chamar .animate({}) .

Outra biblioteca, anime.js, permite que você faça um elemento div seguir um caminho SVG com apenas algumas linhas de código.

Se você está procurando uma biblioteca que faça mais por conta própria, mas faça com que os resultados pareçam impressionantes, então o Vivus é o que você está procurando. É preciso uma abordagem diferente e mais orientada à configuração para a animação de caminho SVG. Com esta biblioteca, você só precisa adicionar um ID ao elemento SVG que deseja desenhar e definir um objeto Vivus com esse ID. A Vivus cuidará do resto.

Leitura adicional

Abaixo está uma lista de recursos que você pode achar úteis ao lidar com imagens SVG e animá-las:

Para aprofundar a animação SVG, você pode ler este pequeno artigo sobre as três maneiras de animar imagens SVG e assistir ao screencast de vídeo por CSS Tricks.

Uma coisa que este artigo não abordou é a animação de imagens SVG com Synchronized Multimedia Integration Language (SMIL). Enquanto o uso de CSV para SVG oferece a vantagem de trabalhar com algo com o qual você já está familiarizado, o SMIL leva as coisas para o próximo nível.

Com SMIL, você pode implementar efeitos de animação avançados, como morphing de forma, usando apenas SVG. Um guia curto, mas eficaz, para usar SMIL para tais efeitos está disponível aqui.

Embora, o suporte para SMIL seja um pouco ousado neste momento (sem trocadilhos).

Animações sem compromisso para a Web

Neste artigo, você passou por várias maneiras de animar elementos SVG usando CSS ou elemento HTML em caminhos SVG.

O SVG é leve e pode ser usado para produzir gráficos nítidos, independentemente do tamanho da tela, nível de zoom e resolução da tela. Com o SVG, oferecer uma experiência moderna e vívida agora é mais fácil do que nunca, ao mesmo tempo em que colhe os benefícios do uso de tecnologias padrão da Web.

E é isso! Espero que você tenha achado este tutorial de animação SVG útil e tenha gostado de lê-lo.

Leitura adicional no Blog da Toptal Engineering:

• Como abordar animações SVG em CSS