Animate SVG com JavaScript

Sep 14, 2025
Como
Graphic of 4 mountain scenes in circles on a computer screen

Há tanta coisa que pode ser alcançada nativamente no navegador usando CSS3 ou a API de Animações da Web, em JavaScript. Animações e transições simples são adequadas para CSS3 - enquanto animações mais complexas precisam ser realizadas usando JavaScript. (Se você estiver criando um site sem código, você precisa de um Construtor de sites .)

O problema com a API de animação da Web é suporte ao navegador e o conjunto de recursos atual. Sendo uma especificação bastante jovem, isso melhorará nos próximos anos.

  • O guia completo para o SVG

Para combater esse recurso e o déficit de suporte do navegador, podemos nos virar para bibliotecas de animação, como Greensock. (Gsap). O GSap nos dá a capacidade de criar animações complexas e vários prazos, com a capacidade de animar quase qualquer elemento ou par de propriedades / valor - todos alcançados com uma sintaxe simples e intuitiva.

Neste tutorial, vamos usar a biblioteca GSAP para criar algumas animações. A animação principal e mais complexa que criaremos será a transição da cena do dia para a noite e veremos como facilmente podemos encadear várias transições para criar animações complicadas. Também estaremos criando algumas animações simples que estarão correndo constantemente.

Se você quiser mais opções para o seu projeto de animação, confira nossa compilação do Melhor software grátis de design gráfico . Adicionando animação a um site complexo? Você precisará de um suporte hospedagem na web. serviço.

Baixe os arquivos para este tutorial.

01. Configuração do documento

Para começar, precisamos agarrar o Greensock Pen. a fim de julgamento seus plugins premium. Para o tutorial, estaremos usando um SVG que já foi otimizado e colado em nosso editor HTML. No entanto, se você estiver usando seu próprio SVG, precisará ter certeza de que todos os elementos têm IDs exclusivos.

02. Crie a primeira linha do tempo

O GSAP oferece dois tipos de linha do tempo: Timelinelite e Timelinemax. A versão do Timelinemax oferece acesso a recursos adicionais, como a capacidade de repetir animações, além de jogá-las ao contrário, entre outras. Nossa primeira linha do tempo será a água, que vamos repetir infinitamente e yoyo para frente e para trás. 

 var animation_water = novo timelinemax ({
  Repita: -1,
  YOYO: TRUE.
});

03. Crie a primeira animação

A fim de animar a água, temos outro caminho em nosso SVG, escondido com uma opacidade '0'. Nós vamos utilizar o morfsvg. Plugin para transformar nosso caminho original para o novo caminho da água. Vamos mover o elemento de água '12px' para baixo no eixo y. Os dois números no final da propriedade representa o atraso e os tempos de início, respectivamente. 

 animation_water
  . para ("# água", 2, {
  y: 12,
  morfsvg: "# água-2",
  Facilidade: linear.asenone.
  }, 0, 0)
;

04. Propriedades reutilizáveis.

Como seremos reutilizando várias propriedades e valores, uma série de vezes vamos criar variáveis ​​para essas propriedades. 

 var animation_ease = linear.asenone;

05. Registro de console

A Biblioteca GSAP nos oferece a capacidade de obter várias propriedades de qualquer linha do tempo. Podemos registrar estes no console para garantir que tudo esteja funcionando como esperamos. 

 console.log (
  'Animation_water duração:'
  + animation_water.duration ()
  .TOFixed (2)
);

06. Linha do tempo de nuvem e log do console

Para cada elemento que desejamos animar separadamente e constantemente, precisamos criar uma nova linha do tempo. Também queremos registrar essa linha do tempo no console como vamos. 

 var animation_cloud = novo timelinemax ({
  Repita: -1,
  YOYO: TRUE.
});
console.log ('\ n' +
  ...
  animation_cloud.duration (). Tofixed (2) + '\ n'
);

07. Animação em nuvem

Agora que temos a nossa linha do tempo pronta, podemos criar nossa animação de nuvem. A seção de animação que leva as novas propriedades pode lidar com vários pares de propriedade / valor separados usando vírgulas.

Nossa animação de nuvem só precisa ser sutil, então precisamos apenas alterar os valores por uma pequena quantidade. 

 animation_cloud
  .to ("# nuvem", 3, {x: -2, y: 1, escala: 0,95, rotação: 1, facilidade: animation_ease}, 0, 0)
;

08. Crie a animação noturna

Em seguida, começaremos a criar nossa animação dia a noite. Nós vamos criar uma variável para o tempo de ciclo e o dia. A configuração 'YoYo' no GSAP também nos permite atrasar a animação antes de repetir. 

 var daynight_cycle_time = 15;
var animation_delay = day_night_cycle_time / 2;
var animation_tonight = novo timelinemax ({
  Repita: -1,
  yoyo: verdadeiro,
  RepingDelay: Animation_Delay.
});

09. Animar a camada de sobreposição

Dentro do nosso SVG, temos uma camada de sobreposição feita de um retângulo cobrindo toda a imagem com o mesmo gradiente de fundo como nosso fundo noturno. A sobreposição aplica o modo 'Multiply' Blend para escurecer a imagem inteira. Nossa animação simplesmente transita a opacidade desse elemento. 

 Animation_tonight
  . para ('# sobreposição noturna',
  day_night_cycle_time, {
  Opacidade: 1,
  Facilidade: animation_ease.
  }
  0, 0)
;

10. Animar o gradiente

O GSAP oferece outros tweens no topo do comum 'a' e 'de' tipos. O tipo Tween que precisamos para animar nosso gradiente é o "Stagerto" entre. Também podemos usar a propriedade 'ciclo', a fim de girar a roda de cor para nossos novos valores. 

 .stagerto ('# Daytime-Gradient Stop',
  day_night_cycle_time, {
  ciclo:{
  escorcola: ['# 060414', '# 416584']
  },
  Facilidade: Animation_Ease,
}, 0, 0)

11. Animar o sol

Podemos continuar adicionando animações à nossa animação "esta noite". Desta vez, vamos adicionar um novo 'a' tween para definir nosso sol. Vamos definir o tempo de exibição para ser uma fração do tempo de ciclo, a fim de animar o sol antes da lua. O GSAP nos permite definir quase qualquer atributo. Nós vamos usar isso para animar as propriedades 'cx' e 'cy' para abaixo da colina à direita. 

. Para ('# sol', day_night_cycle_time / 1,25, {
  Escala: 0,9,
  Attr: {CX: "753", CY: "697"},
  Facilidade: Animation_Ease}
0, 0)

12. Animar a lua

Nós usaremos a mesma técnica que usamos para animar o sol fora de vista (ver passo 11 acima), a fim de animar a lua em vista. Poderíamos conseguir isso usando um Tween, é claro, mas para criar um arco falso, faremos isso em duas partes. Em ambas as partes, também vamos aplicar um novo valor para a propriedade de escala. 

. Para ('# lua', day_night_cycle_time / 2, {
  Escala: 0,9,
  Attr: {CX: "174.5", CY: "202.5"},
  Facilidade: Animation_Ease}
0, 0)

A segunda parte da animação da lua aguarda a primeira seção terminar antes de começar. Nota: Estas duas partes da animação da lua são acorrentadas dentro do código de animação junto com as outras propriedades do dia-a-noite que estamos usando. 

 Animation_tonight
  ...
  . para ('# lua', day_night_cycle_time / 2, {
  Escala: 0,9,
   Attr: {CX: "410.5", CY: "114.5"},
  Facilidade: Animation_Ease}
  , day_night_cycle_time / 2, 0)
;

13. Animar as estrelas

A única parte esquerda da nossa animação dia a noite são as estrelas. Animaremos as estrelas em vista, transitando uma série de propriedades. O primeiro deles é simplesmente trazê-los à vista animando sua opacidade. 

. Para ('# estrelas', day_night_cycle_time / 2,
  {opacidade: 1},
  day_night_cycle_time / 2,
0)

Em seguida, vamos usar o 'de' tween para mover as estrelas para cima e girá-los de um ângulo negativo enquanto eles animam em vista. Estamos usando algumas matemáticas simples para calcular nosso tempo de animação e atraso, todos com base na nossa variável 'Day_Night_Cycle_time'. 

. De ("# estrelas",
  Day_night_cycle_time - (Day_night_Cycle_time / 4),
  {y: 150, rotação: -15, facilidade: animation_ease},
  Day_night_cycle_time / 4,
0)

14. Crie o cronograma das estrelas e o log do console

Agora criamos nossa animação dia a noite, podemos criar outra animação constante para fazer nossas estrelas piscaram. Criaremos a nova linha do tempo e registraremos a duração da linha do tempo no console. 

 var animation_stars = new timelinemax ({
  Repita: -1,
  YOYO: TRUE.
});

15. Faça as estrelas piscar

Agora criamos a linha do tempo pronta para animação, precisamos criar nossa animação piscando. A animação é realmente simples - tudo o que queremos fazer é reduzir o valor da opacidade. Graças à propriedade 'YoYo', a opacidade vai animar e desligar e assim fará as estrelas parecerem piscando. 

 Animation_Stars
  . para ("# estrelas", 0,5,
  {opacidade: 0.5, facilidade: animation_ease}
0, 0)
;

16. Atrasar o piscar

No último passo, estamos segmentando o grupo de estrelas para aplicar nossa animação piscando, no entanto, seria muito melhor se as estrelas fossem piscar uma de cada vez em vez de juntas ao mesmo tempo. Nós conseguimos isso segmentando cada estrela separadamente e aplicando uma animação diferente. 

 Animation_Stars
  ...
  . para ("# estrela-dois", 0,5,
  {opacidade: 0.5, facilidade: animation_ease}
  , 1,25, 0)
  .to ("# estrela-três", 0,5,
  {opacidade: 0.5, facilidade: animation_ease}
  , 0,75, 0)
  ...;

17. Adicione neve

É isso! Nosso dia-a-noite animação de ciclismo está terminado e parece incrível, mas não temos que parar por aí. Como a imagem está no SVG, podemos facilmente adicionar novos elementos à nossa paisagem. Vamos adicionar uma neve. Nós vamos fazer isso usando duas camadas separadas. Cada camada tem uma coleção de elipses grandes o suficiente para cobrir a paisagem e, em seguida, a mesma coleção repetida acima. 

 & lt; g id = "camada de fundo de neve" ... & gt;
  ...
  & lt; elipse ... / gt;
& lt; / g e gt;
& lt; g id = "camada de neve de neve" ... & gt;
  ...
  & lt; elipse ... / gt;
& lt; / g & gt;

18. Crie os cronogramas de neve

Criamos dois cronogramas separados para a nossa neve, a fim de poder animá-los em diferentes durações. Nós também vamos registrar suas durações para o console. 

 var animation_snowtop = novo timelinemax ({
  Repita: -1,
  RepescenteDelay: 0.
});
var animation_snowbottom = novo timelinemax ({
  Repita: -1,
  RepescenteDelay: 0.
});

19. Animar a neve

A fim de animar nossas camadas de neve, queremos mover as duas camadas ao longo do eixo vertical. Diferindo suas durações, obteremos a aparência das camadas se movendo em velocidades diferentes. A animação funciona movendo a coleta de elipses ao longo do eixo vertical até que a segunda coleção esteja no lugar do primeiro. Em seguida, repetimos a animação. 

 animation_snow
  .to ("# camada de neve de neve", 7,
  {attr: {transform: "Traduzir (24 -108)"}
  , facilidade: animation_ease}
0, 0)
;

Encontre a coleção completa de canetas tutoriais aqui . Precisa de algum lugar seguro para armazenar seus arquivos? Veja nosso guia para armazenamento na núvem .

Este artigo foi originalmente publicado na revista Creative Web Design Web Designer. Inscreva-se no web designer aqui .

Artigos relacionados:

  • 5 APIs Javascript incríveis
  • 19 Cool CSS animação exemplos para recriar
  • Os 25 melhores vídeos de música animados

Como - Artigos mais populares

Como refinar seu portfólio de design

Como Sep 14, 2025

Seu portfólio mantém a chave para obter o próximo projeto na bolsa, por isso merece muita atenção. Também é importante lembrar que nunca é um produto acabado. Como um profissional cri..

Como desenhar um braço

Como Sep 14, 2025

(Crédito da imagem: Patrick J Jones) Aprender a desenhar um braço que parece realista é uma parte vital de um dese..

21 maneiras de melhorar a produtividade com NPM

Como Sep 14, 2025

Gerenciador de pacotes do Nó, ou NPM para curtos, vê USO em todo o mundo JavaScript. Como geralmente faz o seu trabalho com que..

Criar efeitos de colagem no navegador com CSS

Como Sep 14, 2025

Se você já desejou que pudesse replicar os efeitos de um tradicional máquina de colagem na tua layouts ..

5 dicas para o Super-Fast CSS

Como Sep 14, 2025

Você já pensou no tamanho do CSS do seu site? Se a sua folha de estilo estiver balançando, pode adiar a renderização de pág..

Como começar com o tipografia

Como Sep 14, 2025

Excelente é um de um grupo de idiomas que usam o Javascript. Tempo de execução Como ambiente de execução: Os ..

Paint Wet-on-Wet em óleos

Como Sep 14, 2025

Pintura 'Alla Prima' (isto é, pintando wet-on-wet, em uma sessão) é a técnica ideal para abraçar a natureza das tintas a ól..

Os segredos de cumprir um design criativo

Como Sep 14, 2025

Um dos meus tutores uma vez me disse que se ele estivesse trancado na prisão pelo resto de sua vida, com nada além de uma caneta e papel, ele não escreveria uma coisa, além de talvez 'ade..

Categorias