SVG animacijos su CSS vadovas pradedantiesiems

Scalable Vector Graphics (SVG) yra daugiau nei tik vaizdo failai. Kaip XML programa, SVG turi žymėjimą, kuris atrodo ir veikia panašiai kaip HTML. Taip pat galite juos naudoti kartu su CSS ir JavaScript kodu. Tai leidžia animuoti SVG failus, sukurti sudėtingus vaizdus, ​​​​kurie puikiai tinka interneto dizainui ir kitoms dinamiškoms aplinkoms.

Bet kaip sukurti SVG animaciją? Pradėkite nuo SVG formos, animuokite ją naudodami CSS ir vadovaukitės šiais principais, kad galėtumėte naudoti animaciją savo darbe.

SVG animavimas naudojant HTML ir CSS

Nors galite naudoti „JavaScript“ programiškai animuoti SVG, CSS dabar taip pat puikiai palaiko ir animacijas. Visą pavyzdinį kodą galite rasti šio projekto CodePen.

SVG vaizdo kūrimas HTML viduje

Pirmasis šio proceso žingsnis yra sukurti SVG vaizdą, su kuriuo dirbsite. SVG žymėjimą galite rasti „CodePen“ HTML skydelyje.

SVG struktūra

Nors SVG formatas panašus į HTML, žymos, kurias naudojate jas kurdami, skiriasi. SVG turi atidarymo ir uždarymo žymas (), kuriame gali būti įvairių savybių. Mūsų atveju mes naudojame

id ir ViewBox savybių. ID ypatybė veikia kaip bet kuris kitas HTML ID ir suteikia jums unikalų identifikatorių, kurį galite naudoti savo CSS / JS. Savybė viewBox nustato mūsų SVG dydį.

<!-- SVG su reaguojančiu dydžiu -->
<svg id="MUOSVGAnimacija" viewBox="0 0 800 600">
<!-- SVG turinys>
</svg>

Vietoj to galite naudoti pločio ir aukščio ypatybes, kaip parodyta toliau pateiktame pavyzdyje. Tačiau „viewBox“ sukuria reaguojantį SVG, kuris atitiks peržiūros srities dydį, nepažeisdamas jo kraštinių santykio.

 SVG su statiniu dydžiu 
<svg id="MUOSVGAnimacija" plotis ="800" aukštis ="600">
<!-- SVG turinys>
</svg>

SVG formos

Galite kurti išsamius vaizdus naudodami SVG, naudodami daugybę skirtingų formų įrankių. Šiame SVG pavyzdyje naudojamos trys galimos formos, tačiau yra daug kitų. Kiekviena šiame pavyzdyje pateikta figūra turi unikalų ID, kurį vėliau galės naudoti CSS animacijos.

• SVG elipsė: tai apskritimo / ovalo formos įrankis. Jis nurodo y/x ašies spindulio (rx/ry), užpildymo spalvos ir brūkšnio pločio ypatybes. Svarbu atsiminti, kad spindulys, kurį pasirinksite naudodami šį įrankį, bus pusė formos skersmens.

<elipsės ID ="ratas" rx="100" ry="100" užpildyti ="#ffed00" smūgio plotis ="0"/>

• SVG Rect: SVG rect įrankis sukuria kvadratą arba stačiakampį. Tai turi pločio / aukščio, transformacijos, užpildymo spalvos ir brūkšnio pločio savybes.

<teisingas id ="kvadratas" plotis ="200" aukštis ="200" transformuoti ="išversti (300 200)" užpildyti ="#05f"
 smūgio plotis ="0"/>

• SVG daugiakampis: naudokite SVG daugiakampį, kad nustatytumėte tam tikrą taškų skaičių ir sukurtumėte savavališkas skirtingų dydžių formas. Pavyzdyje pateiktas daugiakampis yra trikampis, todėl jis yra trikampis, o kiekvieno taško padėtį galite matyti jo savybėse. Be to, turime trikampio padėties, užpildymo spalvos ir brūkšnio pločio ypatybes.

<daugiakampio id="trikampis" taškai ="15,-97 115,102 -84,102 15,-97"
 transformuoti ="išversti (0,0)" užpildyti ="#f00" smūgio plotis ="0"/>

Kai bus sukurta animacija, figūros išsidės viena šalia kitos.

Šios trys SVG formos yra vienos iš labiausiai paplitusių, tačiau galite rinktis iš daugiau. Galite naudoti šias formas, kai darbas su SVG animacija:

• SVG apskritimas: ši forma yra panaši į elipsę, tačiau ji visada turi vienodus X ir Y spindulius.
• SVG linija: SVG linija yra viena linijos atkarpa su dviem taškais, po vieną kiekviename gale.
• SVG Polyline: Daugelio linijos yra kaip pagrindinės linijos, tik jos gali turėti daugiau nei du taškus.
• SVG daugiakampis: SVG daugiakampiai yra kaip stačiakampiai, tik jie gali turėti daugiau nei keturis taškus, todėl įmanomos sudėtingos formos.
• SVG kelias: SVG keliai veikia panašiai kaip rašiklio įrankis Adobe Photoshop. Linijos gali jungtis kaip polilinija / daugiakampis, tačiau joms taip pat gali būti pritaikytos kreivės.

Kaip animuoti SVG naudojant CSS

Dabar, kai SVG viduje turite tam tikrų formų, laikas pereiti prie CSS animacijos. Kiekviena figūra turi skirtingą animaciją, kad parodytų kai kurias turimas parinktis, tačiau yra daug daugiau, ką galima ištirti naudojant savo dizainą. Apskritimas juda ekrane, kvadrato kampai tampa apvalūs, o trikampis sukasi. Visa tai naudojama CSS pagrindiniai kadrai, skirti sukurti sklandžią animaciją.

Apskritimo perkėlimas naudojant transformaciją ir vertimą

Apskritimas SVG pavyzdyje animacijos ciklo metu juda iš ekrano apačios į viršų. Turite priskirti animaciją ratui, kad jis galėtų judėti, naudodami CSS nuosavybę:

#circle {
 animacija: circle_anim 2000ms tiesinė begalinė normalioji pirmyn
}

Pirmasis vertės žodis, circle_anim, yra animacijos pavadinimas. Jis veikia dvi sekundes (2000 ms). Tai turi linijinis kreivė, kuri išlaiko pastovų greitį ir yra nustatyta važiuoti begalinis kartų skaičius į priekį kryptis. Norėdami apibrėžti atskiras animacijos fazes, galite naudoti pagrindinius kadrus:

@keyframes circle_anim {
 0% { transformuoti: išversti(155 piks, 305 pikseliai) }
 45% { transformuoti: išversti(155 piks, -123 pikseliai) }
 50% { transformuoti: išversti(-123 pikseliai, -123 pikseliai) }
 55% { transformuoti: išversti(-123 pikseliai, 728 pikseliai) }
 60% { transformuoti: išversti(155 piks, 728 pikseliai) }
 100% { transformuoti: išversti(155 piks, 305 pikseliai) }
}

Šioje animacijoje yra šeši pagrindiniai kadrai, todėl kiekvieno ciklo apskritimas pasislinks į šešias skirtingas vietas. The transformuoti: išversti savybė nustato apskritimo padėtį kiekviename etape. Esant 0%, apskritimas yra ekrano viduryje ir pasislenka aukštyn ir išeina 45%. 50 % jis pasislinko į kairę nuo ekrano, o po to pasislinko žemiau peržiūros srities 55 %. Apskritimas grįžta į horizontalią padėtį 60%, o animacija baigta 100%, o apskritimas vėl yra ekrano viduryje.

Animuokite aikštės pasienio spindulio nuosavybę

Pavyzdyje esantis kvadratas yra gera nuoroda į bendrąsias nuosavybės animacijas. Jei žinote tinkamą naudotiną sintaksę, galite animuoti bet kurią CSS ypatybę. Pasienio spindulio savybė yra geras to įrodymas. Kvadratas turi aštrius kampus, kurie virsta užapvalintais kampais, o paskui vėl kvadratiniais kampais.

#kvadratas { animacija: square_anim 2000 ms lengvumas į išorę begalinis normalus pirmyn }

Kvadratinė animacija vadinama square_anim ir jos vykdymo laikas yra dvi sekundės. The lengvumas į išorę kreivė padaro animaciją lėtesnę jos pradžioje ir pabaigoje, sukurdama sklandų efektą.

@keyframes square_anim {
 0% { rx: 0px; ry: 0px }
 45% { rx: 40 piks; ry: 40 piks }
 55% { rx: 40 piks; ry: 40 piks }
 100% { rx: 0px; ry: 0px }
}

Kaip matote, ši animacija turi keturis pagrindinius kadrus. X ir Y kraštinės spindulys keičiasi nuo 0 iki 40 pikselių nuo 0 % iki 45 %, sustabdomas ties 40 piks. iki 55 %. Tada jis grįžta į 0 pikselių kiekvienam spinduliui, kai animacija pasiekia 100%.

Pasukite SVG trikampį naudodami transformaciją

Galutinė SVG animacija pavyzdyje yra pati paprasčiausia, o trikampis sukasi aplink savo centrinį tašką. Forma visiškai apsisuka kas dvi sekundes ir tęsiasi be galo. Jis turi lengvumo kreivę, dėl kurios pabaigoje animacija sulėtėja. Animacija vadinama triangle_anim.

#trikampis { animacija: trikampis_anim 2000 ms palengvinti begalinį normalų judėjimą į priekį }

Šioje animacijoje yra du pagrindiniai kadrai: vienas 0 %, o kitas 100 %. Savybė Transformuoti pasukti paverčia trikampį nuo 0 laipsnių 0 % iki 360 laipsnių kampu 100 %, sukurdamas visą sukimąsi.

@keyframes triangle_anim {
 0% { transformuoti: išversti(644 pikseliai, 297 pikseliai) pasukti(0 laipsnių) }
 100% { transformuoti: išversti(644 pikseliai, 297 pikseliai) pasukti(360 laipsnių) }
}

Kaip animuoti kitas savybes

Trys aukščiau aprašytos animacijos yra geras atspirties taškas dirbant su SVG, bet greičiausiai norėsite tai tęsti. Galite naudoti CSS animavimo taisyklę, norėdami pakoreguoti beveik bet kokią nuosavybės vertę, kurią galite priskirti savo SVG. Tai apima pagrindines vertes, pvz., dydžio ir padėties nustatymą, taip pat sudėtingesnes vertes, pvz., kraštines, šešėlius ir maišymo režimus.

Retais atvejais, kai CSS negali atlikti šio darbo, SVG vaizdams animuoti galite naudoti JavaScript kodą. Galite rasti daugybę vadovų, kurie jums padės tai padaryti, kai jausitės pasiruošę žengti kitą žingsnį su savo SVG.

Kurkite savo SVG animaciją

Nesvarbu, ar esate interneto dizaineris, programinės įrangos kūrėjas ar tiesiog kūrybingas žmogus, kurti SVG animacijas gali būti smagu ir malonu. Žiniatinklyje galite rasti daug išteklių, kurie gali padėti kurti žiniatinklio animaciją, kai jau susitvarkysite su pagrindiniais dalykais.

10 CSS fono šablonų, kuriuos galite naudoti savo svetainėje

Skaitykite toliau