Rokasgrāmata iesācējiem SVG animācijā ar CSS

Mērogojama vektorgrafika (SVG) ir vairāk nekā tikai attēlu faili. Kā XML lietojumprogramma SVG satur marķējumu, kas izskatās un darbojas līdzīgi HTML. Varat arī tos izmantot kopā ar CSS un JavaScript kodu. Tas ļauj animēt SVG failus, radot sarežģītus attēlus, kas labi darbojas tīmekļa dizainā un citās dinamiskās vidēs.

Bet kā izveidot SVG animāciju? Sāciet ar SVG formu, animējiet to, izmantojot CSS, un izmantojiet šos principus, lai savā darbā izmantotu animāciju.

SVG animēšana ar HTML un CSS

Lai gan varat izmantot JavaScript, lai programmatiski animētu SVG, CSS tagad nodrošina arī labu animāciju atbalstu. Visu koda paraugu varat atrast vietnē CodePen šim projektam.

SVG attēla izveide HTML iekšpusē

Pirmais solis šajā procesā ir izveidot SVG attēlu, ar kuru strādāsit. SVG marķējumu varat atrast CodePen HTML panelī.

SVG struktūra

Lai gan SVG formātam ir līdzīgs HTML formāts, tagi, ko izmantojat to izveidei, atšķiras. SVG failam ir sākuma un aizvēršanas tagi (), kas var saturēt dažādas īpašības. Mūsu gadījumā mēs izmantojam

id un ViewBox īpašības. ID rekvizīts darbojas tāpat kā jebkurš cits HTML ID, nodrošinot unikālu identifikatoru, ko izmantot savā CSS/JS. ViewBox rekvizīts nosaka mūsu SVG lielumu.

<!-- SVG ar adaptīvu izmēru -->
<svg id="MUOSVGAanimācija" viewBox="0 0 800 600">
<!-- SVG saturs -->
</svg>

Tā vietā varat izmantot platuma un augstuma rekvizītus, kā parādīts nākamajā piemērā. Tomēr viewBox izveido atsaucīgu SVG, kas atbilst skata loga izmēram, nepārkāpjot tā malu attiecību.

 SVG ar statisku izmēru 
<svg id="MUOSVGAanimācija" platums="800" augstums ="600">
<!-- SVG saturs -->
</svg>

SVG formas

Varat izveidot detalizētus attēlus, izmantojot SVG, un jūsu rīcībā ir dažādi formas rīki. Šajā SVG piemērā tiek izmantotas trīs no pieejamajām formām, taču ir arī daudzas citas formas. Katrai no šī piemēra formām ir unikāls ID, ko CSS animācijas var izmantot vēlāk.

• SVG elipse: šis ir apļa/ovālas formas rīks. Tas norāda rekvizītus y/x ass rādiusam (rx/ry), aizpildījuma krāsai un gājiena platumam. Ir svarīgi atcerēties, ka ar šo rīku izvēlētais rādiuss būs puse no formas diametra.

<elipses id="aplis" rx="100" ry="100" aizpildīt="#ffed00" gājiena platums="0"/>

• SVG Rect: SVG taisnstūra rīks izveido kvadrātu vai taisnstūri. Tam ir rekvizīti platumam/augstumam, transformācijai, aizpildījuma krāsai un gājiena platumam.

<taisnais id="kvadrāts" platums="200" augstums ="200" pārveidot ="tulkot (300 200)" aizpildīt="#05f"
 gājiena platums="0"/>

• SVG daudzstūris: izmantojiet SVG daudzstūri, lai iestatītu noteiktu punktu skaitu un izveidotu patvaļīgas dažāda izmēra formas. Piemērā redzamais daudzstūris ir trīspusējs, padarot to par trīsstūri, un katra punkta atrašanās vietu var redzēt tā īpašībās. Papildus tam mums ir rekvizīti trijstūra pozīcijai, aizpildījuma krāsai un gājiena platumam.

<daudzstūra id="trīsstūris" punkti ="15,-97 115,102 -84,102 15,-97"
 pārveidot ="tulkot (0,0)" aizpildīt="#f00" gājiena platums="0"/>

Kad animācija ir izveidota, formas tiks novietotas blakus viena otrai.

Šīs trīs SVG formas ir dažas no visizplatītākajām, taču varat izvēlēties no citām. Varat izmantot tālāk norādītās formas, kad darbs ar SVG animāciju:

• SVG aplis: šī forma ir līdzīga elipsei, taču tai vienmēr ir vienādi X un Y rādiusi.
• SVG līnija: SVG līnija ir viens līnijas segments ar diviem punktiem, pa vienam katrā galā.
• SVG Polyline: Polylines ir kā pamata līnijas, tikai tām var būt vairāk nekā divi punkti.
• SVG daudzstūris: SVG daudzstūri ir kā taisnstūri, tikai tiem var būt vairāk nekā četri punkti, kas padara iespējamas sarežģītas formas.
• SVG ceļš: SVG ceļi darbojas līdzīgi kā pildspalvas rīks programmā Adobe Photoshop. Līnijas var savienoties kā polilīnija/daudzstūris, taču tām var būt arī uzliktas līknes.

Kā animēt SVG, izmantojot CSS

Tagad, kad jūsu SVG ir dažas formas, ir pienācis laiks pāriet uz CSS animāciju. Katrai formai ir atšķirīga animācija, lai parādītu dažas jūsu piedāvātās iespējas, taču ir daudz vairāk, ko izpētīt ar saviem dizainiem. Aplis pārvietojas pa ekrānu, kvadrāta stūri kļūst apaļi, un trīsstūris griežas. Visi šie lieto CSS atslēgkadri, lai izveidotu vienmērīgas animācijas.

Apļa pārvietošana, izmantojot pārveidošanu un tulkošanu

Aplis SVG piemērā animācijas cikla laikā pārvietojas no ekrāna apakšas uz augšdaļu. Lai lokam varētu pārvietoties, jums ir jāpiešķir animācija, izmantojot CSS īpašumu:

#circle {
 animācija: circle_anim 2000ms lineāra bezgalīga normāla uz priekšu
}

Pirmais vārds vērtībā, circle_anim, ir animācijas nosaukums. Tas darbojas divas sekundes (2000 ms). Tam ir a lineārs līkne, kas nodrošina nemainīgu ātrumu un ir iestatīta tā, lai tā darbotos bezgalīgs reižu skaits uz priekšu virzienā. Varat izmantot atslēgkadrus, lai definētu atsevišķas animācijas fāzes:

@keyframes circle_anim {
 0% { pārveidot: tulkot(155 pikseļi, 305 pikseļi) }
 45% { pārveidot: tulkot(155 pikseļi, -123 pikseļi) }
 50% { pārveidot: tulkot(-123 pikseļi, -123 pikseļi) }
 55% { pārveidot: tulkot(-123 pikseļi, 728 pikseļi) }
 60% { pārveidot: tulkot(155 pikseļi, 728 pikseļi) }
 100% { pārveidot: tulkot(155 pikseļi, 305 pikseļi) }
}

Šajā animācijā ir seši atslēgas kadri, tāpēc aplis katrā ciklā pārvietosies uz sešām dažādām vietām. The pārveidot: tulkot īpašība nosaka apļa pozīciju katrā posmā. Pie 0% aplis atrodas ekrāna vidū un pārvietojas uz augšu un no redzesloka par 45%. Par 50% tas ir pārvietots pa kreisi no ekrāna, pirms tas ir pārvietots uz leju zem skata loga par 55%. Aplis atgriežas horizontālā stāvoklī par 60%, un animācija ir pabeigta 100% apmērā, aplis atkal atrodas ekrāna vidū.

Animējiet laukuma robežas rādiusa īpašumu

Piemērā redzamais kvadrāts piedāvā labu atsauci vispārīgām īpašuma animācijām. Ja vien zināt pareizo lietojamo sintaksi, varat animēt jebkuru CSS rekvizītu. Robežas rādiusa īpašums ir labs pierādījums tam. Kvadrātam ir asi stūri, kas pārvēršas noapaļotos stūros un pēc tam atkal kvadrātveida stūros.

#kvadrāts { animācija: square_anim 2000 ms vieglums iekšā-out bezgalīgs parastais uz priekšu }

Kvadrātveida animāciju sauc par square_anim, un tās izpildes laiks ir divas sekundes. The vieglums iekšā-out līkne padara animāciju lēnāku tās sākumā un beigās, radot vienmērīgu efektu.

@keyframes square_anim {
 0% { rx: 0 pikseļi; ry: 0 pikseļi }
 45% { rx: 40 pikseļi; ry: 40 pikseļi }
 55% { rx: 40 pikseļi; ry: 40 pikseļi }
 100% { rx: 0 pikseļi; ry: 0 pikseļi }
}

Kā redzat, šai animācijai ir četri atslēgas kadri. X un Y apmales rādiuss mainās no 0 pikseļiem uz 40 pikseļiem no 0% līdz 45%, apturot 40 pikseļus līdz 55%. Pēc tam tas atgriežas līdz 0 pikseļiem katram rādiusam, kad animācija sasniedz 100%.

Pagrieziet SVG trīsstūri ar transformāciju

Pēdējā SVG animācija piemērā ir visvienkāršākā, un trīsstūris griežas ap savu centru. Forma veic pilnu apgriezienu ik pēc divām sekundēm un turpina darboties bezgalīgi. Tam ir atvieglošanas līkne, kā rezultātā animācija beigās palēninās. Animāciju sauc par triangle_anim.

#trijstūris { animācija: trīsstūris_anim 2000 ms atvieglot bezgalīgu parasto uz priekšu }

Šai animācijai ir divi atslēgas kadri, viens ar 0%, bet otrs ar 100%. Rekvizīts Transform rotate pagriež trīsstūri no 0° pie 0% līdz 360° pie 100%, radot pilnu griešanos.

@keyframes triangle_anim {
 0% { pārveidot: tulkot(644 pikseļi, 297 pikseļi) pagriezt(0 gr) }
 100% { pārveidot: tulkot(644 pikseļi, 297 pikseļi) pagriezt(360 grādi) }
}

Kā animēt citus rekvizītus

Trīs iepriekš aprakstītās animācijas ir labs sākumpunkts, strādājot ar SVG, taču jūs, iespējams, vēlēsities to turpināt. Varat izmantot CSS animācijas kārtulu, lai pielāgotu gandrīz jebkuru īpašuma vērtību, ko varat piešķirt savam SVG. Tas ietver pamatvērtības, piemēram, izmēru un pozicionēšanu, kā arī papildu vērtības, piemēram, apmales, ēnas un saplūšanas režīmus.

Retos gadījumos, kad CSS nevar paveikt darbu, varat izmantot JavaScript kodu, lai animētu SVG attēlus. Ja jūtaties gatavs spert nākamo soli ar saviem SVG, varat atrast daudz ceļvežu, kas jums palīdzēs.

Izveidojiet savas SVG animācijas

Neatkarīgi no tā, vai esat tīmekļa dizainers, programmatūras izstrādātājs vai vienkārši radošs cilvēks, SVG animāciju veidošana var būt jautra un apmierinoša. Tīmeklī varat atrast daudz resursu, kas var jums palīdzēt ar tīmekļa animāciju, kad esat apmierināts ar pamatiem.

10 CSS fona modeļi, kurus varat izmantot savā vietnē

Lasiet Tālāk