Animate SVG met JavaScript

Sep 11, 2025

Procedures

Graphic of 4 mountain scenes in circles on a computer screen

Er is zoveel dat in de browser in de browser kan worden bereikt met behulp van CSS3 of de webanimatie-API, in JavaScript. Eenvoudige animaties en overgangen zijn goed geschikt voor CSS3 - terwijl meer complexe animaties moeten worden bereikt met JavaScript. (Als u een site maakt zonder code, hebt u een website bouwer

Het probleem met de webanimatie API is browserondersteuning en de huidige functieset. Als een vrij jonge specificatie, zal dit de komende jaren verbeteren.

De volledige gids voor SVG

Om dit functie en browserondersteuningstekort te bestrijden, kunnen we wenden tot animatiebibliotheken, zoals GreenSock (GSAP). GSAP geeft ons de mogelijkheid om complexe animaties en meerdere tijdlijnen te maken, met de mogelijkheid om bijna elk element of een eigenschap / waardepaar te animeren - allemaal behaald met een eenvoudige en intuïtieve syntaxis.

In deze tutorial gaan we de GSAP-bibliotheek gebruiken om een paar animaties te maken. De belangrijkste en meest complexe animatie die we zullen creëren, zullen van dag tot nacht de scène overgaan en we zullen zien hoe gemakkelijk we meerdere overgangen kunnen keten om gecompliceerde animaties te creëren. We zullen ook een paar eenvoudige animaties creëren die constant zullen worden uitgevoerd.

Als u meer opties voor uw animatieproject wilt, bekijk dan onze compilatie van de Beste gratis grafische ontwerpsoftware Animatie toevoegen aan een complexe website? Je hebt ondersteunend nodig web hosting onderhoud.

Download de bestanden voor deze tutorial.

01. Document Setup

Om te beginnen, moeten we de vork hebben GreenSock-pen Om de premium plug-ins te bespreken. Voor de tutorial gebruiken we een SVG die al is geoptimaliseerd en geplakt in onze HTML-editor. Als u echter uw eigen SVG gebruikt, moet u ervoor zorgen dat alle elementen unieke ID's hebben.

02. Maak de eerste tijdlijn

GSAP biedt twee typesoorten: Timelinelite en Timelinemax. De Timelinemax-versie biedt toegang tot extra functies, zoals het vermogen om animaties te herhalen, en ze onder andere achteruit te spelen. Onze eerste tijdlijn zal het water zijn, dat we oneindig en yoyo heen en weer zullen herhalen.

 Var Animation_Water = New TimeLinemax ({
  Herhaal: -1,
  YOYO: TRUE
});

03. Maak de eerste animatie

Om het water te animeren, hebben we nog een pad in onze SVG, verborgen met een opaciteit van 0 '. We zullen de Morphsvg plug-in om ons oorspronkelijke waterpad in het nieuwe waterpad te transformeren. We verplaatsen het waterelement '12px' naar beneden op de y-as. De twee nummers aan het einde van het pand vertegenwoordigen respectievelijk de vertraging en de starttijden.

 Animation_Water
  .to ("# water", 2, {
  y: 12,
  Morphsvg: "# water-2",
  Gemak: Linear.Eenenone
  }, 0, 0)
;

04. Herbruikbare eigenschappen

Omdat we een aantal eigenschappen en waarden een aantal keren zullen hergebruiken, maken we variabelen voor deze eigenschappen.

 VAC-animatie_ase = lineair. Aaienon;

05. Console-logging

De GSAP-bibliotheek biedt ons de mogelijkheid om een aantal eigenschappen van een bepaalde tijdlijn te krijgen. We kunnen deze in de console registreren om ervoor te zorgen dat alles werkt zoals we verwachten.

 Console.log (
  'Animation_Water Duur:'
  + animatie_water.duration ()
  .tofixed (2)
);

06. Cloud-tijdlijn en console-logboek

Voor elk element wensen we afzonderlijk en constant te animeren, moeten we een nieuwe tijdlijn maken. We willen ook die tijdlijn in de console inloggen als we gaan.

 Var Animation_Cloud = New TimeLinemax ({
  Herhaal: -1,
  YOYO: TRUE

console.log ('\ n' +
  
  animation_cloud.duration (). Tofixed (2) + '\ n'
);

07. Cloud-animatie

Nu we onze tijdlijn klaar hebben, kunnen we onze cloud-animatie maken. Het gedeelte van de animatie dat de nieuwe eigenschappen neemt, kan meerdere eigenschappen / waardeparen gescheiden met behulp van komma's.

Onze cloud-animatie hoeft alleen subtiel te zijn, dus we hoeven alleen de waarden te wijzigen met een kleine hoeveelheid.

 Animation_Cloud
  .to ("# cloud", 3, {x: -2, y: 1, schaal: 0.95, rotatie: 1, gemak: animation_ease}, 0, 0)
;

08. Maak de nachtelijke animatie

Vervolgens zullen we beginnen met het maken van onze dag-tot-nacht-animatie. We creëren een variabele voor de cyclustijd en de dag. De 'YOYO' -instelling in GSAP maakt ons ook in staat om de animatie te vertragen voordat u herhaalt.

 Var Day_night_Cycle_Time = 15;
var animatie_delay = dag_night_cycle_time / 2;
Var Animation_Tonight = New TimeLinemax ({
  Herhaal: -1,
  YOYO: TRUE,
  RepehertDelay: Animation_Delay
});

09. Animeer de overlay-laag

In onze SVG hebben we een overlay-laag gemaakt van een rechthoek die het hele beeld bedekt met dezelfde achtergrondgradiënt als onze nachtelijke achtergrond. De overlay past de mengmodus 'Multiply' vermenigvuldigen om het hele beeld donkerder te maken. Onze animatie overgeeft eenvoudig de opaciteit van dit element.

 Animation_Tonight
  .TO ('# nighttime-overlay',
  dag_night_cycle_time, {
  Dekking: 1,
  Gemak: Animation_ease
  
  , 0, 0)
;

10. Animeer het verloop

GSAP biedt andere tweens op de top van het gemeenschappelijk 'aan' en 'van' typen. Het tween-type dat we nodig hebben om ons verloop te animeren, is de 'Staggerto' tween. We kunnen ook de eigenschap 'Cyclus' gebruiken om het kleurenwiel rond te draaien naar onze nieuwe waarden.

 .Staggerto ('# Daytime-gradiënt stop',
  dag_night_cycle_time, {
  fiets:{
  Stopcolor: ['# 060414', '# 416584']
  
  Gemak: Animation_ase,
}, 0, 0)

11. Animeer de zon

We kunnen doorgaan met het toevoegen van animaties aan onze 'vanavond'-animatie. Deze keer voegen we een nieuwe 'to' tween toe om onze zon in te stellen. We stellen de weergave tijd in om een fractie van de cyclustijd te zijn om de zon voor de maan te animeren. GSAP stelt ons in staat om bijna elk attribuut in te stellen. We zullen dit gebruiken om de 'CX' en 'CY' -eigenschappen te animeren tot onder de heuvel aan de rechterkant.

. To ('# Sun', Day_night_Cycle_Time / 1.25, {
  Schaal: 0.9,
  ATW: {CX: "753", CY: "697"},
  Gemak: Animation_Ease}
, 0, 0)

12. Animeer de maan

We zullen dezelfde techniek gebruiken die we gebruikten om de zon uit het zicht te animeren (zie stap 11 hierboven) om de maan in het zicht te animeren. We kunnen dit bereiken met één tween, natuurlijk, maar om een faux-boog te maken, zullen we dit in twee delen doen. In beide delen gaan we ook een nieuwe waarde toe aan de eigenschap schaal.

. To ('# Moon', Day_night_Cycle_Time / 2, {
  Schaal: 0.9,
  ATW: {CX: "174.5", CY: "202.5"},
  Gemak: Animation_Ease}
, 0, 0)

Het tweede deel van de Moon-animatie wacht op de eerste sectie om te eindigen voordat het begint. Opmerking: deze twee delen van de Moon-animatie zijn samen in de animatiecode geketend, samen met de andere dag-tot-nachtse eigenschappen die we gebruiken.

 Animation_Tonight
  
  .to ('# maan', dag_night_cycle_time / 2, {
  Schaal: 0.9,
   ATW: {CX: "410.5", CY: "114.5"},
  Gemak: Animation_Ease}
  , dag_night_cycle_time / 2, 0)
;

13. Animeer de sterren

Het enige deel van onze dag-tot-night-animatie zijn de sterren. We zullen de sterren in het zicht animeren door een aantal eigenschappen over te maken. De eerste van hen is om ze eenvoudig in beeld te brengen door hun dekking te animeren.

. To ('# sterren', dag_night_cycle_time / 2,
  {Dekking: 1},
  dag_night_cycle_time / 2,
0)

Vervolgens gebruiken we de 'van' Tween om de sterren omhoog te verplaatsen en te draaien vanuit een negatieve hoek terwijl ze in beeld worden geactiveerd. We gebruiken enkele eenvoudige wiskunde om onze animatietijd en vertraging te berekenen, allemaal op basis van onze 'Day_night_cycle_time' variabele.

. Vanaf ("# sterren",
  Day_night_Cycle_Time - (Day_night_Cycle_Time / 4),
  {y: 150, rotatie: -15, gemak: animatie_ase},
  dag_night_cycle_time / 4,
0)

14. Maak de sterren-tijdlijn en het console-logboek

Nu hebben we onze dag-tot-night-animatie gemaakt, we kunnen een andere constante animatie maken om onze sterren te laten knipperen. We maken de nieuwe tijdlijn en registreren vervolgens de tijdlijnduur in de console.

 Var Animation_Stars = New TimeLinemax ({
  Herhaal: -1,
  YOYO: TRUE
});

15. Maak de sterren knipperen

Nu hebben we de tijdlijn gereed voor animatie, we moeten onze knipperende animatie maken. De animatie is echt eenvoudig - alles wat we willen doen, is de dekking van de dekking verminderen. Dankzij de eigenschap 'YOYO', zal de dekking in en uit animeren en laat de sterren eruit zien alsof ze knipperen.

 Animation_Stars
  .to ("# sterren", 0,5,
  {Dekking: 0.5, gemak: animatie_ase}
, 0, 0)
;

16. Vertraging van het knipperen

In de laatste stap zijn we richten op de sterrengroep om onze knipperende animatie toe te passen, maar het zou er veel beter uitzien als de sterren één tegelijk in plaats van samen te knipperen. We bereiken dit door elke ster afzonderlijk te richten en een andere animatie toe te passen.

 Animation_Stars
  
  .to ("# ster-twee", 0,5,
  {Dekking: 0.5, gemak: animatie_ase}
  , 1.25, 0)
  .to ("# ster-drie", 0,5,
  {Dekking: 0.5, gemak: animatie_ase}
  , .75, 0)
  ...;

17. Voeg sneeuw toe

Dat is het! Onze dag-tot-nacht fietsen animatie is afgewerkt en het ziet er geweldig uit, maar we hoeven daar niet te stoppen. Omdat het beeld in SVG is, kunnen we eenvoudig nieuwe elementen toevoegen aan ons landschap. Laten we wat sneeuw toevoegen. We doen dit met twee afzonderlijke lagen. Elke laag heeft een verzameling van ellipsen groot genoeg om het landschap te bedekken en vervolgens dezelfde inzameling hierboven herhaald.

 & LT; G ID = "Snow-Bottom-Layer" ... & GT;
  
  & LT; ellips ... / & GT;
& LT; / G & GT;
& LT; G ID = "Snow-Top-Layer" ... & GT;
  
  & LT; ellips ... / & GT;
& LT; / G & GT;

18. Maak de sneeuwtijdlijnen

We maken twee afzonderlijke tijdlijnen voor onze sneeuw om ze over verschillende duur te kunnen animeren. We zullen ook hun duraties aan de console inloggen.

 Var Animation_Snowtop = New TimeLinemax ({
  Herhaal: -1,
  herheendelay: 0

var animatie_snowbottom = nieuwe timelinemax ({
  Herhaal: -1,
  herheendelay: 0
});

19. Animeer de sneeuw

Om onze sneeuwlagen te animeren willen we de twee lagen langs de verticale as verplaatsen. Door hun tijd te verschillen, krijgen we het uiterlijk van de lagen die op verschillende snelheden bewegen. De animatie werkt door de verzameling van ellipsen langs de verticale as te verplaatsen totdat de tweede collectie in plaats van de eerste is. We herhalen dan de animatie.

 Animation_snow
  .to ("# snow-top-layer", 7,
  {ATRET: {transform: "Vertalen (24 -108)"}
  , gemak: animation_ase}
, 0, 0)
;

Zoek de volledige verzameling tutorialpennen hier Heb je ergens veilig nodig om je bestanden op te slaan? Zie onze gids aan cloud opslag

Dit artikel is oorspronkelijk gepubliceerd in Creative Web Design Magazine Web Designer. Abonneer u hier op Web Designer

Gerelateerde artikelen:

5 Awesome Javascript API's
19 Cool CSS-animatievoorbeelden om te recreëren
De 25 Grootste geanimeerde muziekvideo's

Animate SVG met JavaScript

01. Document Setup

02. Maak de eerste tijdlijn

03. Maak de eerste animatie

04. Herbruikbare eigenschappen

05. Console-logging

06. Cloud-tijdlijn en console-logboek

07. Cloud-animatie

08. Maak de nachtelijke animatie

09. Animeer de overlay-laag

10. Animeer het verloop

11. Animeer de zon

12. Animeer de maan

13. Animeer de sterren

14. Maak de sterren-tijdlijn en het console-logboek

15. Maak de sterren knipperen

16. Vertraging van het knipperen

17. Voeg sneeuw toe

18. Maak de sneeuwtijdlijnen

19. Animeer de sneeuw

Procedures - Meest populaire artikelen

Maak een uitschuifmenu

Exporteren na effect-animaties naar HTML5

Verf rimpeling water in oliën

Aan de slag met het afdrukken van monotype

Hoe isometrische typografie ontwerpen

Voeg een glitch-effect toe aan uw website

Ontwerp een responsieve site met EM-gebaseerde maat

Gegevens toevoegen aan uw schetsontwerpen

Categorieën