O SVG de animação é um pouco único, pois há três maneiras distintas de abordar a animação.
1. Animando com CSS @keyframes
Os elementos SVG podem ser direcionados e estilizados com CSS. Ou seja, você pode aplicar animação por meio de @keyframes. Como isso:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Você pode escolher animar desta forma se ...
- A animação é bastante simples.
- Você só precisa animar as propriedades que o CSS pode animar.
- Você já conhece e está confortável com animações CSS.
2. Animando com SMIL
Existe uma sintaxe para animações incorporadas diretamente no SVG. Aqui está um exemplo muito simples:
Aqui está um grande tutorial sobre tudo o que é SMIL.
Você pode escolher animar desta forma se ...
- Você precisa animar propriedades que o CSS não pode, como a própria forma.
- Você precisa de outros recursos específicos do SMIL, como iniciar uma animação quando outra termina, sem sincronizar manualmente as durações / atrasos. Ou coisas de interação, como começar uma animação com um clique.
3. Animando com JavaScript
Com o JavaScript, você tem acesso a coisas como requestAnimationFrame (ou outros loops), para que você possa animar apenas alterando rapidamente os valores das propriedades. Também existem frameworks para trabalhar com SVG que normalmente possuem material de animação integrado. Ou frameworks de animação que funcionam com SVG. Como SnapSVG, GreenSock, SVG.js ou Velocity.js.
Aqui está um exemplo com SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Você pode escolher animar desta forma se ...
- Você está trabalhando em JavaScript de qualquer maneira, talvez sua animação tenha a ver com dados que você recebe com JSON ou algo semelhante.
- Você precisa do JavaScript de qualquer maneira, porque você precisa da lógica ou matemática ou algo mais realmente possível lá.
- Você está interessado no JavaScript resolvendo alguns bugs para você.
- O escopo de sua animação é bastante grande / complicado e você precisa da abstração e organização que o JavaScript pode fornecer.
Demo
Veja a Caneta Três Maneiras de Animar SVG de Chris Coyier (@chriscoyier) no CodePen.
A forma como você usa o SVG não afeta suas opções?
É verdade. Se estiver usando SVG-as- , você não poderá usar animações CSS de outra folha de estilo. Mas, suas animações SMIL funcionarão, em alguns navegadores (no momento da redação deste artigo, Chrome sim, Firefox não). Eu não ficaria surpreso se CSS embutido em arquivos SVG funcionasse ou funcionará um dia. JavaScript, provavelmente não.
Se você estiver usando SVG em uma imagem de fundo CSS, imagino que seja uma história semelhante à anterior.
Se você usa inline , todas as possibilidades estão abertas para você.
Se você estiver usando SVG por meio de um objectou iframe, precisará incorporar os scripts / estilos diretamente no SVG para que funcione.