SVGs (Scalable Vector Graphics) oferecem uma maneira moderna de aprimorar interfaces da Web e de aplicativos com gráficos escalonáveis ​​e de alta qualidade. Ao contrário dos gráficos bitmap tradicionais, os SVGs são compostos de dados vetoriais, o que significa que podem ser dimensionados para qualquer tamanho sem perder qualidade. Essa escalabilidade torna os SVGs imensamente populares entre os desenvolvedores de UI que buscam criar designs dinâmicos, responsivos e visualmente atraentes.

Nesta postagem do blog, iremos nos aprofundar no mundo das animações SVG. Quer você seja um iniciante procurando explorar esta área interessante ou um desenvolvedor experiente que deseja refinar suas habilidades, este guia irá guiá-lo por dez métodos diferentes para animar SVGs com exemplos práticos de código. Ao final, você estará pronto para implementar essas técnicas em seus projetos, elevando seus designs de UI para o próximo nível.

Por que animar SVGs?

Antes de entrarmos nos métodos específicos, vale a pena entender por que as animações SVG são tão benéficas:

Independência de resolução: os SVGs ficam nítidos em qualquer densidade de tela, o que é crucial para oferecer suporte a diversas resoluções de dispositivos.

Tamanhos de arquivo pequenos: em comparação com muitos formatos de bitmap, os SVGs normalmente têm tamanhos de arquivo menores, especialmente quando as animações envolvem formas geométricas simples e cores limitadas.

Manipulabilidade: SVGs podem ser manipulados por meio de CSS e JavaScript, proporcionando flexibilidade na forma como as animações são implementadas e controladas.

Acessibilidade: o texto dentro dos SVGs permanece selecionável e pesquisável, melhorando a usabilidade e a acessibilidade.

Método 1: transições CSS

Uma das maneiras mais simples de começar a animar um SVG é usando transições CSS. As transições CSS permitem que você altere as propriedades SVG suavemente durante um período especificado.

Exemplo: girando uma engrenagem

Imagine que você tem um SVG de uma engrenagem. Você deseja que esta engrenagem gire continuamente para indicar um processo ou estado de carregamento.

#gear {
  transition: transform 2s linear infinite;
}

#gear:hover {
  transform: rotate(360deg);
}

No CSS, especificamos que a propriedade transform da engrenagem deve fazer a transição ao longo de dois segundos de forma linear e infinita. Quando um usuário passa o mouse sobre a engrenagem, ela gira 360 graus.

Método 2: quadros-chave CSS

Para animações mais complexas, os quadros-chave CSS fornecem o controle que você precisa. Os quadros-chave permitem definir os valores das propriedades em vários estágios da animação.

Exemplo: Círculo Pulsante

Vamos animar um círculo para pulsar, crescendo e diminuindo continuamente.

@keyframes pulse {
  0%, 100% {
    r: 30;
  }
  50% {
    r: 40;
  }
}
circle {
  animation: pulse 2s infinite;
}

Aqui, @keyframes define uma animação de pulso onde o raio (r) do círculo muda.

Método 3: animações SVG SMIL

SMIL (Synchronized Multimedia Integration Language) é uma linguagem baseada em XML que permite animações complexas diretamente em arquivos SVG.

Exemplo: Movendo-se ao longo do caminho

Imagine animar um objeto para se mover ao longo de um caminho predefinido.

O círculo se move ao longo da curva definida pelo caminho, graças ao elemento animateMotion.

Método 4: Bibliotecas JavaScript (GreenSock)

Muitas bibliotecas JavaScript, como GreenSock (GSAP), facilitam animações SVG complexas. O GSAP tem alto desempenho e funciona em todos os principais navegadores.

Exemplo: bola quicando

Veja como você pode criar uma animação de bola quicando usando GSAP:

gsap.to("#ball", {
  y: 60,
  duration: 1,
  ease: "bounce.out",
  repeat: -1,
  yoyo: true
});

A bola quica continuamente com efeito ioiô que a faz se mover para frente e para trás.

Método 5: variáveis ​​JavaScript e CSS

Usar JavaScript junto com variáveis ​​CSS (propriedades personalizadas) pode tornar as animações SVG responsivas às interações do usuário ou outras condições dinâmicas.

Exemplo: mudança de cor

Suponha que você queira que a cor de preenchimento de um elemento SVG mude com base na posição do cursor.

document.addEventListener("mousemove", function(e) {
  const color = e.clientX > window.innerWidth / 2 ? 'red' : 'blue';
  document.documentElement.style.setProperty('--color', color);
});

Aqui, a cor do círculo muda conforme o mouse se move horizontalmente pela tela.

Método 6: filtros SVG para animação

Os filtros SVG são ferramentas poderosas para aplicar efeitos visuais complexos a elementos SVG por meio de animações.

Exemplo: efeito de desfoque

Um efeito de desfoque animado pode criar uma sensação de movimento ou mudança.

@keyframes blur {
  from {
    stdDeviation: 0;
  }
  to {
    stdDeviation: 5;
  }
}
circle {
  animation: blur 8s infinite alternate;
}

Nesta animação, o círculo desfoca e desfoca suavemente, chamando a atenção e ao mesmo tempo proporcionando um efeito visual dinâmico.

Exemplo: Texto Revelador

O texto pode ser revelado progressivamente usando um traçado de recorte animado.

@keyframes reveal {
  from {
    width: 0;
  }
  to {
    width: 100;
  }
}
rect {
  animation: reveal 5s forwards;
}

O texto Olá! é gradualmente revelado da esquerda para a direita.

Método 8: Transformando Formas

A transformação de formas pode ser obtida usando diversas bibliotecas e recursos SVG nativos, criando transições perfeitas entre diferentes formas.

Exemplo: Morph de coração para círculo

Um exemplo comum é transformar o formato de um coração em um círculo.

/* Add keyframes for morphing */

Usando bibliotecas como flubber ou mesmo CSS, o atributo "d" dos caminhos é interpolado entre as formas de coração e círculo.

Método 9: gradientes animados

Os gradientes em SVG também podem ser animados, o que é útil para fundos vibrantes ou elementos atraentes.

Exemplo: animação de fundo gradiente

Um gradiente radial animado que muda de cor pode servir como um plano de fundo dinâmico.

O preenchimento deste retângulo transita suavemente por um espectro de cores, criando um efeito de fundo animado.

Exemplo: Mudança de cor interativa

Uma interação simples onde o SVG muda de cor ao clicar.

função altera banco de dados ENORME com códigos de amostra, baseados em narrativas
botão e um painel baseado em assinatura.BUTTON TEXT HERE JavaScript.

document.querySelector('svg').addEventListener('click', function() {
  this.querySelector('circle').setAttribute('fill', 'pink');
});

Ao clicar no SVG, a cor de preenchimento do círculo muda para rosa, demonstrando uma animação interativa simples.

Conclusão

As animações SVG abrem uma vasta gama de possibilidades para tornar suas UIs mais atraentes e envolventes. Desde simples transições CSS até animações interativas baseadas em JavaScript, cada método oferece benefícios e recursos exclusivos. Experimentar várias técnicas e compreender suas implicações no desempenho e na compatibilidade do navegador é fundamental para dominar as animações SVG. Seja melhorando a experiência do usuário ou simplesmente adicionando um toque visual, esses dez métodos fornecem uma base sólida para qualquer desenvolvedor de UI que queira mergulhar no mundo das animações SVG.