Kaip sukurti SVG animaciją naudojant CSS

SVG animacija gali būti atliekama naudojant vietinius elementus, pvz., ir . Tačiau tiems, kurie yra labiau susipažinę su CSS animacija, o ne nerimauti, taip pat galime naudoti CSS animacijos savybes taip pat ir animuotiems SVG.

CSS animacija taip pat gali būti alternatyvus būdas naudoti „JavaScript“ biblioteką, kaip „SnapSVG“. Šiame pranešime pamatysime, ką galime pateikti su CSS animacija SVG.

1. Formų kūrimas

Visų pirma mums reikės piešti formas ir objektus, kuriuos norime animuoti. Galite naudoti tokias programas Eskizas, „Adobe Illustrator“, arba „Inkscape“ sukurti.

Šiuo pavyzdžiu aš padėjau debesuotą dangų, o raketinis laivas, kuris šaudė į viršų, įeina:

Atlikę piešinį, turime eksportuoti kiekvieną SVG sukurtą objektą.

Šį žingsnį aš naudosiu kaip pavyzdį. Pasirinkite objektą, kurį norite pakeisti į SVG formatą. Apatiniame dešiniajame lango kampe spustelėkite Padarykite eksportą. Pasirinkite SVG formatą, tada spustelėkite Eksportuoti objekto pavadinimas. Jūs turite tai padaryti vienu objektu vienu metu.

2. Įdėkite SVG į HTML

Atidarę SVG failą kodų redaktoriuje, pastebėsite, kad SVG kodai yra gana nepatogūs. Taigi, prieš diegdami SVG failą, tvarkykime kodą ir jį optimizuosime naudodami šią komandų eilutės įrankį SVGO.

Pradėti Terminalas arba Komandinė eilutė, ir įdiegti SVGO su šia komandine eilute:

 [sudo] npm įdiegti -g svgo 

Tun komandą, svgo, naudojant SVG failą --graži gaminti skaitomą SVG kodą:

 svgo rocket.svg --pretty 

Jei kataloge yra keli SVG, juos visus kartu galite optimizuoti. Darant prielaidą, kad katalogas yra pavadintas /vaizdai, tada iš tėvų katalogo naudokite šią komandą:

 svgo -f vaizdai --pretty 

Pažiūrėkime skirtumą prieš ir po SVGO naudojimo.

Nukopijuokite kodą SVG faile ir įklijuokite į HTML failą. Mes dirbame 800px darbinėje erdvėje, 600xx pločio, todėl nepamirškime apibrėžti plotis SVG elemente.

SVG yra nustatytas HTML faile. Mums reikės apibrėžti kiekvieno objekto ID, kad vėliau galėtume juos pasirinkti CSS.

Šiai pamokai reikia apibrėžti raketos ir liepsnos bei kai kurių debesų ID. Norint, kad objektai vėliau apdorotų animacijos etapą, turime pridėti ID - taip pat galite naudoti klasė - kiekvienam objektui. Šiuo metu šis kodas atrodys taip:

3. Animuoti CSS naudojimą

Dabar leiskite pasilinksminti. Planas yra padidinti raketą į kosmosą. Raketa padalinta į dvi grupes; pati raketa ir liepsna.

Visų pirma, raketą pastatome į darbo vietos vidurį:

 #rocket transformuoti: versti (260px, 200px); 

Tai, ką matote, yra:

Dabar norėdami, kad raketas atrodytų kaip jis eina aukštyn, turime sukurti debesų, kurios krenta, iliuziją. CSS, kurią naudojame šiuo atveju, yra:

 # cloud1 animacija: kritimas 1s linijinis begalinis;  @keyframes fall from transform: translateY (-100px);  į transform: translateY (1000px) 

Kad jis atrodytų dar realistiškesnis, leiskite animuoti keturis debesis ir juos padaryti “rudenį” skirtingu greičiu. Mes taip pat juos skirstysime nuo X ašies.

Antrasis debesis turės tokį kodą:

 # cloud2 animacija: kritimas-2 2s linijinis begalinis;  @keyframes fall-2 from transform: translate (200px, -100px);  į transform: translate (200px, 1000px) 

Atkreipkite dėmesį, kad debesį # 2 perkėlėme šiek tiek į dešinę 200px su versti. Šiame etape rezultatas turėtų atrodyti taip.

Be to, leiskite raketai išgyventi. Priskirsime animacijos raktų rėmelį:

 #rocket animacija: iššokantys langai palengvina begalinį;  @keyframes iššokantis 0% transformuoti: išversti (260px, 200px);  50% transformuoti: versti (260px, 240px);  100% transformuoti: versti (260px, 200px);  

Taip pat pridėkite animaciją prie raketinės liepsnos:

 #flame animacija: kratoma .2s linijinė begalinė;  @keyframes shake 0% transformuoti: versti (55px, 135px) pasukti (7deg);  20% transformuoti: versti (55px, 135px) pasukti (0deg);  40% transformuoti: versti (55px, 135px) pasukti (-7deg);  60% transformuoti: versti (55px, 135px) pasukti (0deg);  100% transformuoti: versti (55px, 135px) pasukti (0deg);  

Teisė! Dabar, kai visi mūsų kodai yra nustatyti, animacija turėtų veikti mūsų SVG.

Pažvelkite į mūsų raketų sprogdinimą į kosmosą.

Galutinė mintis

Animacija nėra paprasčiausia CSS funkcija. Tačiau tikiuosi, kad ši pamoka bus geras atspirties taškas CSS animacijos tyrimui SVG; jūs būsite nustebinti, žinodami, ką galima pasiekti su CSS animacija.

Jei norite pradėti nuo pačių pagrindinių dalykų, čia galite pradėti šį įrašą: „Into: Scalable Vector Graphics (SVG) animacija“ arba sekti likusias SVG serijas.

• Peržiūrėti demonstraciją
• Atsisiųsti šaltinį