Animovat SVG s JavaScriptem

Feb 8, 2026
jak
Graphic of 4 mountain scenes in circles on a computer screen

Tam je tolik, že lze dosáhnout nativně v prohlížeči pomocí CSS3 nebo webových animací API v JavaScriptu. Jednoduché animace a přechody jsou vhodné pro CSS3 - vzhledem k tomu, že je třeba provést složitější animace pomocí JavaScriptu. (Pokud vytváříte web bez kódu, potřebujete Webové stránky Builder. .)

Problém s rozhraním web animace API je podpora prohlížeče a aktuální sada funkcí. Být poměrně mladou specifikací, to zlepší v následujících letech.

  • Kompletní průvodce SVG

Chcete-li bojovat proti této funkci a deficit podpory prohlížeče, můžeme se obrátit na knihovny animace, například Greensock. (GSAP). GSAP nám dává schopnost vytvářet komplexní animace a více časových lhůt, se schopností oživit téměř jakýkoliv prvek nebo pár nemovitostí / hodnota - vše dosaženo s jednoduchou a intuitivní syntaxí.

V tomto tutoriálu použijeme knihovnu GSAP k vytvoření několika animací. Hlavní a nejsložitější animace, kterou budeme vytvářet, bude přecházet scénu od dne do noci a uvidíme, jak snadno můžeme řetězci dohromady více přechodů vytvořit komplikované animace. Budeme také vytvořit několik jednoduchých animací, které budou fungovat neustále.

Pokud chcete více možností projektu animace, podívejte se na naše kompilace Nejlepší bezplatný grafický design software . Přidání animace na komplexní webové stránky? Budete potřebovat podpůrný web hosting servis.

Stáhněte si soubory pro tento tutoriál.

01. Nastavení dokumentu

Začít, musíme viděl Greensock Pen. Aby bylo možné studovat své prémiové pluginy. Pro tutoriál budeme používat SVG, který již byl optimalizován a vložen do našeho editoru HTML. Pokud však používáte vlastní SVG, budete muset zajistit, aby všechny prvky měly jedinečné ID.

02. Vytvořit první časovou osu

GSAP nabízí dvě typy časové osy: Timelinelite a Timelinemax. Verze Timelinemax nabízí přístup k dodatečným funkcím, například schopnost opakovat animace, stejně jako hru v reverzi mezi ostatními. Naše první časová osa bude voda, kterou budeme opakovat nekonečně a yoyo tam a zpět. 

 var animace_water = nový timelinemax ({
  Opakovat: -1,
  yoyo: true.
});

03. Vytvořit první animaci

Abychom mohli oživit vodu, máme další cestu v našem SVG, skryté s '0' neprůhledností. Využijeme MorphSvg. plugin pro transformaci naší původní dráhy vody do nové vodní cesty. Pohybujeme vodní prvek '12px' dolů na ose y. Dvě čísla na konci nemovitosti představují zpoždění a počáteční časy. 

 animace_water
  .to ("# voda", 2, {
  y: 12,
  MorphSVG: "# Water-2",
  Snadné: Linear.easenone.
  }, 0, 0)
;

04. Opakovaně použitelné vlastnosti

Protože budeme opakovat řadu nemovitostí a hodnoty několikrát, budeme vytvářet proměnné pro tyto vlastnosti. 

 var animace_eame = lineární.EASENONE;

05. Protokolování konzoly

Knihovna GSAP nám nabízí schopnost získat řadu vlastností z jakékoli dané časové osy. Můžeme je přihlásit do konzoly, abychom se ujistili, že všechno funguje, jak očekáváme. 

 konzole.log (
  "Animace_water Trvání:"
  + animace_water.jištění ()
  .tofixed (2) \ t
);

06. Cloud časová osa a protokol konzoly

Pro každý prvek chceme oživit odděleně a neustále, musíme vytvořit novou časovou osu. Chceme také zaznamenat tuto časovou osu v konzole, jak jdeme. 

 var animace_cloud = nový timelinemax ({
  Opakovat: -1,
  yoyo: true.
});
console.log ('n' +
  ...
  Animace_cloud.ducation (). Tofixed (2) + 'n'
);

07. Cloud animace

Teď, když máme naši časovou osu připravena, můžeme vytvořit naši cloud animaci. Sekce animace, která vezme nové vlastnosti, zvládne více párů vlastností / hodnoty oddělené pomocí čárek.

Naše mraková animace musí být jemná, takže musíme jen změnit hodnoty o malém množství. 

 Animace_cloud
  .to ("# cloud", 3, {x: -2, y: 1, měřítko: 0,95, rotace: 1, snadnost: animace_ease}, 0, 0)
;

08. Vytvořit noční čas animace

Dále začneme vytvářet naši každodenní animaci. Vytvoříme proměnnou pro čas cyklu a den. Nastavení "Yoyo" v GSAP nám také umožňuje zpoždění animace před opakováním. 

 var day_night_cycle_time = 15;
var animace_delay = den_night_cycle_time / 2;
var animace_tonight = nový timelinemax ({
  Opakovat: -1,
  yoyo: true,
  opakovatel: animace_delay.
});

09. Animovat vrstvu překrytí

Uvnitř našeho SVG máme překryvnou vrstvu z obdélníku pokrývající celý obraz se stejným gradientem pozadí jako naše noční pozadí. Overlay aplikuje režim "Multiply", aby se celý obraz ztmavil. Naše animace jednoduše přechází neprůhlednost tohoto prvku. 

 Animation_Ortight
  .to ('# noční překrytí',
  den_night_cycle_time, {
  krytí: 1,
  Snadné: Animace_eame.
  }
  , 0, 0)
;

10. Oživit přechod

GSAP nabízí další doplnění na vrcholu společného "na" a "z" typů. Typ Tween, který potřebujeme, abychom animovali náš přechod, je "Staggerto" Tween. Můžeme také použít vlastnost "cyklu" pro otočení barevného kola kolem našich nových hodnot. 

 .staggerto ('# denní přechodová zastávka',
  den_night_cycle_time, {
  cyklus:{
  StopColor: ['# 060414', '# 416584']
  },
  Snadné: Animace_ease,
}, 0, 0)

11. Animovat slunce

Můžeme dodávat animace na naši "dnes večer" animaci. Tentokrát přidáme nový 'do' Tween, abychom mohli nastavit naše slunce. Doba zobrazení nastavíme za zlomek doby cyklu, abychom animovali slunce před měsícem. GSAP nám umožňuje nastavit téměř libovolný atribut. Použijeme to za účelem animovat vlastnosti "cx" a "cy" pod kopcem vpravo. 

 .TO ('# sun', den_night_cycle_time / 1,25, {
  měřítko: 0,9,
  attr: {cx: "753", cy: "697"},
  Snadné: Animace_ease}
, 0, 0)

12. Animovat měsíc

Použijeme stejnou techniku, kterou jsme použili k animaci slunce z pohledu (viz krok 11 výše), abyste mohli animovat Měsíc do pohledu. Samozřejmě bychom mohli dosáhnout jednoho doplnění, ale abychom vytvořili faux oblouk, to je ve dvou částech. V obou částech budeme také aplikovat novou hodnotu do vlastnosti Scale. 

 .to ('# měsíc', den_night_cycle_time / 2, {
  měřítko: 0,9,
  attr: {cx: "174.5", cy: "202.5"},
  Snadné: Animace_ease}
, 0, 0)

Druhá část animace měsíce čeká na první část, než začne. Poznámka: Tyto dvě části animace měsíce jsou připoutány společně uvnitř animačního kódu spolu s dalšími vlastnostmi denní noci, které používáme. 

 Animation_Ortight
  ...
  .to ('# měsíc', den_night_cycle_time / 2, {
  měřítko: 0,9,
   attr: {cx: "410.5", cy: "114.5"},
  Snadné: Animace_ease}
  , Day_NIGHT_CYCLE_TIME / 2, 0)
;

13. Animovat hvězdy

Jediná část vlevo z naší každodenní animace jsou hvězdy. Budeme animovat hvězdy do pohledu tím, že přechodíme řadu vlastností. První z nich je jednoduše přivést do pohledu oživením jejich neprůhlednosti. 

 .to ('# hvězdy', den_night_cycle_time / 2,
  {neprůhlednost: 1},
  den_night_cycle_time / 2,
0)

Dále použijeme 'z' Tween, abychom mohli přesunout hvězdy nahoru a otočit je z negativního úhlu, když animují do pohledu. Používáme nějaké jednoduché matematiky, abychom mohli vypočítat naši animační dobu a zpoždění, vše založené na proměnné "Day_Night_cycle_time". 

. From ("# hvězdy",
  Day_Night_cycle_time - (Day_Night_cycle_time / 4),
  {y: 150, rotace: -15, snadnost: animace_ease},
  den_night_cycle_time / 4,
0)

14. Vytvořte hvězdy časová osa a protokol konzoly

Nyní jsme vytvořili naši denní animaci, můžeme vytvořit další neustálou animaci, aby naše hvězdy mrknou. Vytvoříme novou časovou osu a poté zaznamenáte dobu trvání časové osy v konzole. 

 var animace_stars = nový timelinemax ({
  Opakovat: -1,
  yoyo: true.
});

15. Make hvězdy mrknou

Nyní jsme vytvořili časovou osu připravenou k animaci, musíme vytvořit naši blikající animaci. Animace je opravdu jednoduchá - vše, co chceme udělat, je snížit hodnotu opacity. Díky 'Yoyo' majetku, opacita bude oživit a vypnout a tak učiní hvězdy vypadat, že blikají. 

 Animace_stars
  .to ("# hvězdy", 0.5,
  {Opalování: 0.5, Snadno: Animation_ease}
, 0, 0)
;

16. Zpoždění blikání

V posledním kroku se zaměřujeme na hvězdy skupiny, abyste mohli aplikovat naše blikající animace, ale to by vypadalo mnohem lépe, kdyby hvězdy měly blikat jeden v čase namísto dohromady současně. Dosáhneme toho tohoto zaměřením každou hvězdou odděleně a aplikovat jinou animaci. 

 Animace_stars
  ...
  .to ("# hvězdy-dva", 0,5,
  {Opalování: 0.5, Snadno: Animation_ease}
  , 1,25, 0)
  .to ("# hvězda-tři", 0.5,
  {Opalování: 0.5, Snadno: Animation_ease}
  , .75, 0)
  ...;

17. Přidat sníh.

A je to! Naše každodenní cyklistická animace je dokončena a vypadá to úžasně, ale nemusíme se tam zastavit. Vzhledem k tomu, že obraz je v SVG, můžeme snadno přidat nové prvky do naší krajiny. Přidejme nějaký sníh. Uděláme to pomocí dvou samostatných vrstev. Každá vrstva má sbírku elipsů dost velký, aby zakryla krajinu a pak se stejná kolekce opakuje výše. 

 & lt; g id = "sníh-bottom-vrstva" ... & gt;
  ...
  & lt; elipsa ... / & gt;
& lt; / g & gt;
& lt; g id = "sníh-top-vrstva" ... & gt;
  ...
  & lt; elipsa ... / & gt;
& lt; / g & gt;

18. Vytvořit časové osy

Vytváříme dva samostatné časové lhůty pro náš sníh, abychom je mohli oživit přes různé trvání. Budeme také zaznamenat jejich trvání konzoly. 

 var animace_snowtop = nový timelinemax ({
  Opakovat: -1,
  opakovatel: 0.
});
var animace_snownbottom = New Timelinemax ({
  Opakovat: -1,
  opakovatel: 0.
});

19. Oživit sníh.

Abychom animovali naše sněhové vrstvy, chceme přesunout dvě vrstvy podél svislé osy. Rozdílem jejich trvání dostaneme vzhled vrstev pohybujících se různými rychlostmi. Animace pracuje pohybem sbírky elipsů podél svislé osy, dokud je druhá kolekce na místě první. Pak opakujeme animaci. 

 animace_snow
  .to ("# sníh-top-vrstva", 7,
  {att: {transformace: "Přeložit (24 -108)"}
  , lehkost: animace_ease}
, 0, 0)
;

Najít plnou sbírku tutoriálových per tady . Potřebujete někde zabezpečené pro uložení souborů? Podívejte se na náš průvodce cloudové úložiště .

Tento článek byl původně publikován v Creative Web Design Magazine Web Designer. Přihlásit se zde web designer zde .

Související články:

  • 5 Úžasné JavaScript API
  • 19 Cool CSS Animace Příklady pro obnovení
  • 25 největších animovaných hudebních videí

jak - Nejoblíbenější články

Jak vytvořit 3D skenování s realitou Capture

jak Feb 8, 2026

(Image Credit: Phil Nolan) Zachycení reality je skvělý způsob, jak dělat své vlastní 3D skenování. Vše, co ..

Sestavte klientský portál s WordPress

jak Feb 8, 2026

(Image Credit: Web Designer) Mít oblast, která umožňuje uživatelům přihlášení a stahování nebo zobrazení..

Jak malovat jako mistr 19. století

jak Feb 8, 2026

19. století byl nádherný čas pro umění. Umělci se konali ve vysokém pozornosti a veřejnost byla vzdělávána o umění...

vybudovat komplexní 3D sci-fi scénu v mixéru

jak Feb 8, 2026

Vytvoření apokalyptické scény sci-fi měst 3D umění je něco, co umělci by se mohli pryč od práce kvůli ..

Pěstování rostlin v Houdini

jak Feb 8, 2026

Houdiniho silný bod byl vždy jeho procesní povahy. S několika uzly a malým množstvím výrazů můžete vytvářet složit�..

Jak připravit grafiku Illustrator pro po efektech

jak Feb 8, 2026

Nemůžu vám začít říct, kolik Adobe Illustrator. Soubory mi prošly pro animaci, která nebyla jasně připr..

Jak vytvořit celou stránku webové stránky v úhlovém

jak Feb 8, 2026

Strana 1 z 4: Strana 1 Strana 1 Stránka 2. Strana 3. ..

Vytvoření vylévací vodní účinek v realflow

jak Feb 8, 2026

Tento výukový program vám ukáže, jak simulovat efekt lití kapaliny. Existuje různé software a pluginy, které můžete po..

Kategorie