23: Animando SVG com SMIL - CSS-Tricks

Embora a animação de SVG com CSS possa ser mais confortável para a pessoa média do front-end, o SVG tem outra maneira de fazer a animação embutida na própria sintaxe SVG. Isso é exatamente o que abordamos resumidamente neste vídeo, mas se você quiser um guia de referência completo, confira Um Guia para Animações SVG (SMIL) de Sara Soueidan aqui no CSS-Tricks.

SMIL significa Synchronized Multimedia Integration Language. Pelo que entendi, isso é uma “coisa” por si só que acontece de ser integrado ao SVG. Mas o SVG tem algumas de suas próprias adições semelhantes a SMIL. Vou me referir a tudo isso como SMIL, embora tenha certeza de que às vezes estou tecnicamente incorreto.

Para animações muito simples, não importa muito se você fizer em SMIL ou CSS, fará a mesma coisa com o mesmo nível de dificuldade. Algumas coisas podem até ser mais fáceis em CSS. Mas aqui estão algumas coisas em que SMIL é o caminho a seguir:

• Você precisa animar algo que o CSS não pode tocar. Como a forma de um polígono ou caminho.
• Você deseja usar eventos para afetar a animação, como um clickou mouseoverou algo assim.
• Você deseja fazer animações aditivas, como animar de onde você estiver agora outros x pixels.
• Você deseja ter animações que se relacionem diretamente com outras animações, como, quando esta animação terminar, dê início à próxima animação (sem manipular manualmente as durações).
• Tenho certeza de que há mais.

A sintaxe parece intimidante no início, mas é realmente muito fácil, eu prometo. Aqui está um exemplo básico:

Veja a Pen jAipI de Chris Coyier (@chriscoyier) no CodePen.

A coisa de "transformação de forma" é realmente super única com SMIL, então aqui está um exemplo melhor do que o estranho que fizemos no vídeo:

Veja o botão Pen Shape Morph por Chris Coyier (@chriscoyier) no CodePen.

Nessa demonstração, os eventos são tratados por JavaScript em vez de SMIL. É bom saber que você também pode fazer isso. Os gatilhos de eventos SMIL são legais, mas o que precisa ser clicado precisa estar naquele SVG, e não em qualquer outro lugar do DOM.