Animovat SVG s JavaScriptem

Sep 13, 2025
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

Řešení portrétní lakování olejem

jak Sep 13, 2025

Tento workshop je o vytvoření výšku olejomalba s významem. Je také o mé myšlence pro sérii, která se zabývala poklesem..

17 způsobů, jak kreslit lepší tvorová

jak Sep 13, 2025

Když kreslíte stvoření, je to důležité, že jsou uvěřitelní. Bez ohledu na to, jak se šílené návrhy stanou, jen nez..

Model Alien pirát stvoření v Zbrushu

jak Sep 13, 2025

Abychom vám pomohli naučit se, jak vytvořit 3D mimozemskou pirátskou postavu, ukážu vám, jak jsem vyřezával tvář mého..

Pěstování rostlin v Houdini

jak Sep 13, 2025

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�..

Sestavte si vlastní rozhraní Maya

jak Sep 13, 2025

Moderní software může být nesmírně silný a všestranný. Maya se neliší, nabízí pole ohromujícího pole nástrojů, příkazů a možností, které vám pomohou dosáhnout požado..

Dokumentujte své konstrukční systémy s fraktálním

jak Sep 13, 2025

Máte rádi učení více o designových systémech? Pak nenechte ujít senior ui inženýr Mina Markham. ..

Modelování kosmické lodi pro herní přehrávač

jak Sep 13, 2025

S Zlomený prostor Být tím, co je - free-to-play týmu bojové hry - lodě a jejich schopnosti jsou hvězdy show..

Jak zachytit pohyb ve vašich 3D činích

jak Sep 13, 2025

Být umělcem na volné noze pracuji na různých malých projektech, z nichž většina zahrnuje vytváření a texturování ..

Kategorie