SVG animate a JavaScript használatával

Sep 17, 2025
kézikönyv
Graphic of 4 mountain scenes in circles on a computer screen

Annyira sok mindent elérhet a böngészőben a CSS3 vagy a Web Animations API használatával, a JavaScriptben. Az egyszerű animációk és az átmenetek jól illeszkednek a CSS3-hez - míg összetettebb animációkat kell elérni a JavaScript segítségével. (Ha kód nélkül létrehoz egy webhelyet, szüksége van egy weboldal építője .)

A webes animációs API problémája a böngésző támogatása és az aktuális szolgáltatáskészlet. Mivel meglehetősen fiatal specifikáció, ez javul az elkövetkező években.

  • Az svg teljes útmutatója

A funkció és a böngésző támogatási hiány elleni küzdelem érdekében az animációs könyvtárakhoz fordulhatunk, mint például Greensock (GSAP). A GSAP lehetővé teszi számukra, hogy komplex animációkat és többszörös idővonalat hozzon létre, azzal a képességgel, hogy szinte bármilyen elemet vagy tulajdonságot / értékpártot animáljunk - mindegyik egyszerű és intuitív szintaxissal érhető el.

Ebben a bemutatóban a GSAP könyvtárat fogjuk használni néhány animáció létrehozásához. A legfontosabb és a legösszetettebb animáció, amelyet megteremtünk, a jelenetet napról éjjel átálljuk, és meglátjuk, hogy milyen könnyen tudunk láncolni többszörös átmenetet a bonyolult animációk létrehozásához. Mi is létrehozunk néhány egyszerű animációt, amelyek folyamatosan futnak.

Ha több lehetőséget szeretne az animációs projekthez, nézze meg a A legjobb ingyenes grafikai tervező szoftver . Animáció hozzáadása egy komplex weboldalhoz? Szüksége lesz egy támogatónak web hosting szolgáltatás.

Töltse le a fájlokat Ehhez a bemutatóra.

01. Dokumentumbeállítás

El kell kezdeni, meg kell villognunk a Greensock toll A prémium bővítmények vizsgálatához. A bemutatóhoz egy SVG-t használunk, amelyet már optimalizáltak és beillesztették a HTML-szerkesztőnkbe. Ha azonban használja a saját SVG-t, akkor meg kell győződnie arról, hogy az összes elemnek egyedi azonosítója van.

02. Hozza létre az első idővonalat

A GSAP két idővonaltípust kínál: Timelinelite és Timelinemax. A Timelinemax verzió további funkciókhoz való hozzáférést biztosít, mint például az animációk ismétlésének képessége, valamint mások között. Első idővonalunk lesz a víz, amelyet végtelenül és yoyo-t fogunk megismételni oda-vissza. 

 var animation_water = új timelinemax ({
  Ismételje meg: -1,
  yoyo: igaz
});

03. Hozzon létre az első animációt

Annak érdekében, hogy a víz animáljunk, van egy másik útunk az SVG-ben, rejtve egy "0" opacitással. Használjuk a morphsvg Plugin az eredeti vízút átalakításához az új vízútra. A "12px" vízelemet az y tengellyel lefelé mozgatjuk. Az ingatlan végén lévő két szám a késleltetést és a kezdési időt jelenti. 

 animáció_víz
  .to ("# víz", 2, {
  Y: 12,
  Morphsvg: "# víz-2",
  Könnyű: lineáris.easenone
  }, 0, 0)

04. Újrafelhasználható tulajdonságok

Mivel számos tulajdonságot és értéket fogunk újra újjáéleszteni, számos alkalommal megváltoztatjuk ezeket a tulajdonságokat. 

 VAR Animation_Ease = lineáris.Esenone;

05. Konzol naplózás

A GSAP könyvtár kínál számunkra, hogy számos tulajdonságot kapjon az adott idővonalról. Ezeket a konzolba tudjuk naplni, hogy megbizonyosodjon arról, hogy minden dolgozik, ahogy azt várjuk. 

 konzol.log (
  "Animation_water Időtartam:"
  + animation_water.duration ()
  .tofixed (2)
);

06. Felhő idővonal és konzol napló

Minden elemre külön és folyamatosan animálni kívánunk, új idővonalat kell létrehoznunk. Azt is szeretnénk naplózni, hogy az idővonal a konzolban megyünk. 

 var animation_cloud = új timelinemax ({
  Ismételje meg: -1,
  yoyo: igaz
});
konzol.log ('\ n' +
  ...
  animation_cloud.duration (). Tofixed (2) + '\ n'
);

07. Felhő animáció

Most, hogy készen állunk az idővonalunkra, létrehozhatjuk a felhő animációt. Az új tulajdonságokhoz tartozó animáció szakasza több tulajdonságot / értékpárt is képes vesszővel elválasztani.

A felhő animációnak csak finomnak kell lennie, ezért csak kis összeggel kell megváltoztatnunk az értékeket. 

 animáció_cloud
  .Az ("# felhő", 3, {x: -2, y: 1, skála: 0.95, forgatás: 1, könnyedén: animáció_ase}, 0, 0)

08. Hozzon létre az éjszakai animációt

Ezután elkezdjük létrehozni a napi éjszakai animációt. A ciklusidőre és a napra változó változót hozunk létre. A GSAP "Yoyo" beállítása lehetővé teszi számunkra, hogy az ismétlődés előtt késleljük az animációt. 

 var day_night_cycle_time = 15;
var animation_delay = day_night_cycle_time / 2;
var animation_tonight = új timelinemax ({
  Ismételje meg: -1,
  yoyo: igaz,
  RepeatEdelay: Animation_Delay
});

09. Animálja az átfedési réteget

Az SVG belsejében van egy átfedő réteg, amely egy téglalapból készült, amely a teljes képet tartalmazza, ugyanazzal a háttérben gradienssel, mint az éjszakai háttérünk. Az overlay alkalmazza a "szaporodott" keverék módot annak érdekében, hogy sötétítse a teljes képet. Animációnk egyszerűen átutalja az elem opacitását. 

 Animation_tonight
  .to ('# Nightsime-Overlay ",
  day_night_cycle_time, {
  Opacity: 1,
  Könnyű: animáció_ase
  }
  , 0, 0)

10. Animálja a gradientált

A GSAP más tweenseket kínál a közös "és" "típusok tetején. A tween típusra van szükségünk, hogy animáljunk a gradiensünk, a "Staggerto" Tween. A "Cycle" tulajdonságot is használhatjuk annak érdekében, hogy az új értékeket forgassanak az új értékekre. 

 .staggerto ('# Daytime-gradiens stop',
  day_night_cycle_time, {
  ciklus:{
  StopColor: ['# 060414', '# 416584']
  },
  Könnyű: Animation_Ease,
}, 0, 0)

11. Animálja a napot

Animációkat tudunk adni a "ma este" animációnkra. Ezúttal hozzáadunk egy új "to" tween-t, hogy beállítsa a napunkat. Beállítjuk a megjelenítési időt, hogy a ciklusidő töredéke legyen annak érdekében, hogy a hold előtt animálja a napot. A GSAP lehetővé teszi számunkra, hogy szinte minden attribútumot állítson be. Ezt a "CX" és a "CY" tulajdonságok animálni fogjuk a jobb oldalon lévő domb alatt. 

 .A (# Sun ', Day_Nygn_cycle_Time / 1.25, {
  skála: 0,9,
  Att: {CX: "753", CY: "697"},
  Könnyű: Animation_Ease}
, 0, 0)

12. Animálja a holdat

Ugyanazt a technikát használjuk, amellyel a napfény animáljuk (lásd a fenti 11. lépést) annak érdekében, hogy a hold animáljunk. Természetesen egy Tween segítségével érhetjük el ezt, de a faux ív létrehozása érdekében ezt két részben végezzük. Mindkét részben új értéket fogunk alkalmazni a skála tulajdonságnak. 

 .to ('# hold ", day_night_cycle_time / 2, {
  skála: 0,9,
  Att: {CX: "174.5", CY: "202.5"},
  Könnyű: Animation_Ease}
, 0, 0)

A hold animáció második része várja az első részt, hogy befejezze, mielőtt elkezdődik. Megjegyzés: A Hold-animáció két részét az animációs kód belsejében kell láncolni, valamint a többi nappali éjszakai tulajdonságokkal együtt. 

 Animation_tonight
  ...
  .To ('# hold ", day_night_cycle_time / 2, {
  skála: 0,9,
   ATT: {CX: "410.5", CY: "114.5"},
  Könnyű: Animation_Ease}
  , Day_night_Cycle_Time / 2, 0)

13. Animálja a csillagokat

A napi éjszakai animációnk egyetlen része a csillagok. Az animáljuk a csillagokat, hogy számos tulajdonságot átállunk. Az elsőnek az, hogy egyszerűen hozza őket az átlátszatlanságukat. 

 .A ('# csillagok ", day_night_cycle_time / 2,
  {Opacity: 1},
  day_night_cycle_time / 2,
0)

Ezután használjuk a "tween" tween-t, hogy mozgassuk a csillagokat, és ne forgassa őket negatív szögből, ahogy animálják a nézeteket. Néhány egyszerű matematikát használunk annak érdekében, hogy kiszámítsuk animációnkat és késleltetést, mindegyik a "Day_night_Cycle_time" változó alapján. 

 .from ("# csillagok",
  Day_night_cycle_time - (Day_Nygn_cycle_Time / 4),
  {Y: 150, Rotáció: -15, Könnyű: Animation_Ease},
  day_night_cycle_time / 4,
0)

14. Hozzon létre a csillagok idővonalát és a konzol naplót

Most létrehoztuk a napi éjszakai animációt, egy másik állandó animációt hozhatunk létre, hogy a csillagok villogjanak. Megteremtjük az új idővonalat, majd naplózunk az idővonal időtartamát a konzolban. 

 VAR Animation_stars = új Timelinemax ({
  Ismételje meg: -1,
  yoyo: igaz
});

15. Hogy a csillagok villognak

Most létrehoztuk az idővonalat az animációra, meg kell teremteni a villogó animációt. Az animáció valóban egyszerű - mindössze annyit akarunk, hogy csökkentsük az opacitás értékét. Hála a „jojó” tulajdon, a fedettség animálni be és ki, és így teszi a csillagok néz ki mint ők villog. 

 Animation_stars
  .to ("# csillagok", 0,5,
  {Opacity: 0.5, Könnyű: Animation_Ease}
, 0, 0)

16. Késlelteti a villogást

Az utolsó lépésben céloz a csillagok csoport annak érdekében, hogy alkalmazza a villogó animáció, azonban úgy nézne sokkal jobb, ha a csillagok villogni egyesével helyett együtt ugyanabban az időben. Ezt úgy érjük el, hogy az egyes csillagokat külön-külön és más animáció alkalmazásával célozzuk. 

 Animation_stars
  ...
  .to ("# csillag-kettő", 0,5,
  {Opacity: 0.5, Könnyű: Animation_Ease}
  , 1.25, 0)
  .to ("# csillag-három", 0,5,
  {Opacity: 0.5, Könnyű: Animation_Ease}
  , .75, 0)
  ...;

17. Hót ad

Ez az! A napi éjszakai kerékpáros animáció befejeződött, és félelmetesnek tűnik, de nem kell megállnunk. Mivel a kép SVG-ben van, könnyedén hozzáadhatunk új elemeket a tájunkhoz. Adjunk hozzá egy kis hót. Ezt két különálló réteg segítségével fogjuk megtenni. Minden rétegnek van egy olyan ellipszis gyűjteménye, amely elég nagy ahhoz, hogy lefedje a tájat, majd ugyanazt a gyűjteményt ismételje meg. 

 & lt; g id = "hó alsó réteg" ... & gt;
  ...
  & lt; ellipszis ... / & gt;
& lt; / g & gt;
& lt; g id = "hó-felső réteg" ... & gt;
  ...
  & lt; ellipszis ... / & gt;
& lt; / g & gt;

18. Hozzon létre a hó idővonalait

Két különálló idővonalat hozunk létre a hó számára annak érdekében, hogy képesek legyenek animálni őket különböző időtartamokra. A tartót is naplózunk a konzolra is. 

 var animation_snowtop = új Timelinemax ({
  Ismételje meg: -1,
  RepeatDelay: 0
});
var animation_snowbottom = új timelinemax ({
  Ismételje meg: -1,
  RepeatDelay: 0
});

19. Animálja a havat

Annak érdekében, hogy animáljuk a hórétegeket, a függőleges tengely mentén szeretnénk mozgatni a két réteget. A különböző időtartamok eltérésével a különböző sebességeken mozgó rétegek megjelenését kapjuk. Az animáció úgy működik, hogy az ellipszisek gyűjteményét a függőleges tengely mentén mozgatja, amíg a második gyűjtemény az első helyen van. Ezután megismételjük az animációt. 

 Animation_snow
  .to ("# hó-felső réteg", 7,
  {attr: {transform: "Fordítás (24 -108)"}
  , Könnyű: Animation_Ease}
, 0, 0)

Keresse meg a tutorial tollak teljes gyűjteményét itt . Szüksége van valahol biztonságos tárolni a fájlokat? Lásd az útmutatót felhő tároló .

Ezt a cikket eredetileg a Creative Web Design Magazine Web Designer-ben tették közzé. Iratkozzon fel itt a webdesignerre .

Kapcsolódó cikkek:

  • 5 félelmetes JavaScript API-k
  • 19 Cool CSS animációs példák a létrehozásra
  • A 25 legnagyobb animációs zenei videó

kézikönyv - Most Popular Articles

Hogyan nyúlhat egy vászonra és az olajfestékekhez

kézikönyv Sep 17, 2025

(Kép hitel: getty képek) Üdvözöljük az útmutatóban, hogy hogyan nyúlhat egy vászonra, és felállítsa az o..

Hogyan rajzoljunk egy lovat

kézikönyv Sep 17, 2025

Page 1 of 2: Hogyan rajzoljon egy lovat: lépésről lépésre Hogyan raj..

A természetes nyelvi feldolgozás megértése

kézikönyv Sep 17, 2025

Weboldalak és alkalmazások lehetnek különböző mozgó alkatrészek, beleértve a front end kreatív, szerver oldali feldolgo..

A GLITCH szöveg és képhatások létrehozása CSS-ben

kézikönyv Sep 17, 2025

Ebben a bemutatóban megmutatjuk, hogyan kell létrehozni a hibás szöveghatást. Különleges hatások és animációk segíthetnek a webhelyek kiemelkedése, ami azonnali hatást gyakorol ..

Hogyan kell festeni a reális hullámokat a Photoshopban

kézikönyv Sep 17, 2025

Az óceán jelenetek festése közben Photoshop CC , Mint mint a legtöbb festményprojektem, elkezdem néhány tengeri fotó referenciát összegyűjteni, hogy biztosítsam, h..

Hogyan lehet elképesztő hatást létrehozni a CSS formákkal

kézikönyv Sep 17, 2025

A Frontend fejlesztők hajlamosak téglalapokon gondolkodni; téglalapok belső téglalapok belül téglalapok belső téglalapok..

Hogyan készítsünk 3d hajat és szőrme

kézikönyv Sep 17, 2025

Könnyedén elfogyaszthatja az első alkalommal, amikor szőrme dolgozik 3D Art szoftver. Ebben a bemutatóban lé..

Az űrhajó modellezése a játékmenet tervezéséhez

kézikönyv Sep 17, 2025

Val vel Törött tér Az, ami ez - egy szabad-play csapat harci játék - a hajók és képességeik a show csilla..

Kategóriák