CSS-iga SVG-animatsiooni juhend algajatele

Scalable Vector Graphics (SVG-d) on midagi enamat kui lihtsalt pildifailid. XML-rakendusena sisaldavad SVG-d märgistust, mis näeb välja ja töötab sarnaselt HTML-iga. Saate neid kasutada ka koos CSS-i ja JavaScripti koodiga. See võimaldab animeerida SVG-faile, luues keerukaid pilte, mis sobivad hästi veebidisaini ja muude dünaamiliste keskkondade jaoks.

Aga kuidas teha SVG-animatsiooni? Alustage SVG-kujuga, animeerige see CSS-i abil ja tuginege nendele põhimõtetele, et kasutada animatsiooni oma töös.

SVG-de animeerimine HTML-i ja CSS-iga

Kuigi saate SVG-de programmiliseks animeerimiseks kasutada JavaScripti, on CSS-il nüüd hea tugi ka animatsioonidele. Kogu näidiskoodi leiate aadressilt CodePen selle projekti jaoks.

SVG-pildi loomine HTML-i sees

Selle protsessi esimene samm on SVG-pildi loomine, millega töötate. SVG-märgistuse leiate CodePeni HTML-paneelilt.

SVG struktuur

Kuigi SVG-d jagavad HTML-iga sarnast vormingut, on nende loomiseks kasutatavad sildid erinevad. SVG-l on avamis- ja sulgemärgendid (), mis võivad sisaldada erinevaid omadusi. Meie puhul kasutame

id ja vaatekast omadused. Atribuut ID töötab nagu iga teine ​​HTML-ID, pakkudes teile kordumatut identifikaatorit, mida oma CSS-is/JS-is kasutada. Atribuut viewBox määrab meie SVG suuruse.

<!-- SVG tundliku suurusega -->
<svg id="MUOSVGAanimatsioon" viewBox="0 0 800 600">
<!-- SVG sisu -->
</svg>

Selle asemel saate kasutada laiuse ja kõrguse atribuute, nagu näitab järgmine näide. ViewBox loob aga tundliku SVG, mis ühtib vaateava suurusega ilma selle kuvasuhet rikkumata.

 SVG staatilise suurusega 
<svg id="MUOSVGAanimatsioon" laius="800" kõrgus ="600">
<!-- SVG sisu -->
</svg>

SVG kujundid

Saate luua üksikasjalikke pilte SVG-de abil, mille käsutuses on palju erinevaid kujundeid. See SVG näide kasutab kolme saadaolevatest kujunditest, kuid on ka palju teisi. Igal selle näite kujundil on kordumatu ID, mida CSS-animatsioonid saavad hiljem kasutada.

• SVG ellips: see on ringi/ovaalne tööriist. See määrab y/x-telje raadiuse (rx/ry), täitevärvi ja joone laiuse omadused. Oluline on meeles pidada, et selle tööriistaga valitud raadius on pool kuju läbimõõdust.

<ellipsi id="ring" rx="100" ry="100" täitke="#ffed00" käigu laius="0"/>

• SVG Rect: SVG rect tööriist loob ruudu või ristküliku. Sellel on laiuse/kõrguse, teisenduse, täitevärvi ja joone laiuse omadused.

<õige id="ruut" laius="200" kõrgus ="200" teisendus="tõlkida (300 200)" täitke="#05f"
 käigu laius="0"/>

• SVG hulknurk: kasutage SVG hulknurka kindla arvu punktide määramiseks ja suvaliste erineva suurusega kujundite loomiseks. Näites olev hulknurk on kolmetahuline, muutes selle kolmnurgaks ja iga punkti asukohta näete selle omadustes. Lisaks on meil atribuudid kolmnurga asukoha, täitevärvi ja joone laiuse jaoks.

<hulknurga id="kolmnurk" punktid="15,-97 115,102 -84,102 15,-97"
 teisendus="tõlkida (0,0)" täitke="#f00" käigu laius="0"/>

Kui animatsioon on paigas, reastuvad kujundid üksteise kõrvale.

Need kolm SVG-vormingut on ühed levinumad, kuid saate valida ka rohkemate hulgast. Kui saate kasutada järgmisi kujundeid SVG-animatsiooniga töötamine:

• SVG ring: see kujund sarnaneb ellipsiga, kuid sellel on alati võrdsed X- ja Y-raadiused.
• SVG joon: SVG joon on üks joonelõik, millel on kaks punkti, üks mõlemas otsas.
• SVG Polyline: Polüliinid on nagu põhijooned, ainult neil võib olla rohkem kui kaks punkti.
• SVG hulknurk: SVG hulknurgad on nagu ristkülikud, ainult et neil võib olla rohkem kui neli punkti, mis teeb keerulised kujundid võimalikuks.
• SVG tee: SVG teed töötavad sarnaselt Adobe Photoshopi pliiatsi tööriistaga. Jooned võivad ühenduda nagu polüjoon/hulknurk, kuid neile võib olla rakendatud ka kõveraid.

Kuidas animeerida SVG-sid CSS-iga

Nüüd, kui teie SVG-s on mõned kujundid, on aeg liikuda edasi CSS-i animatsiooni juurde. Igal kujundil on erinev animatsioon, mis demonstreerib mõnda teie pakutavat valikut, kuid oma kujundusega saab veel palju uurida. Ring liigub üle ekraani, ruudu nurgad muutuvad ümaraks ja kolmnurk pöörleb. Kõik need kasutavad CSS-võtmekaadrid sujuvate animatsioonide loomiseks.

Ringi teisaldamine teisenduse ja tõlke abil

SVG näites olev ring liigub animatsioonitsükli ajal ekraani alt üles. Peate määrama ringile animatsiooni, enne kui see saab liikuda, CSS-i atribuudi kaudu:

#ring {
 animatsioon: circle_anim 2000ms lineaarne lõpmatu normaalne edasi
}

Väärtuse esimene sõna, ring_anim, on animatsiooni nimi. See töötab kaks sekundit (2000 ms). Sellel on lineaarne kõver, mis hoiab oma kiirust ühtlasena ja on seatud jooksma lõpmatu kordade arv edasi suunas. Animatsiooni üksikute etappide määratlemiseks saate kasutada võtmekaadreid.

@keyframes circle_anim {
 0% { teisendada: tõlkida(155 pikslit, 305 pikslit) }
 45% { teisendada: tõlkida(155 pikslit, -123 pikslit) }
 50% { teisendada: tõlkida(-123 pikslit, -123 pikslit) }
 55% { teisendada: tõlkida(-123 pikslit, 728 pikslit) }
 60% { teisendada: tõlkida(155 pikslit, 728 pikslit) }
 100% { teisendada: tõlkida(155 pikslit, 305 pikslit) }
}

Animatsioonis on kuus võtmekaadrit, seega liigub ring igas tsüklis kuue erinevasse kohta. The teisendada: tõlkida omadus määrab ringi asukoha igal etapil. 0% juures on ring ekraani keskel ja liigub 45% üles ja vaateväljast välja. 50% võrra on see nihkunud ekraanist vasakule, enne kui nihkub 55% vaateava alla. Ring liigub 60% võrra tagasi oma horisontaalsesse asendisse ja animatsioon on 100% valmis, ring on tagasi ekraani keskel.

Animeerige väljaku piiriraadiuse kinnistut

Näites olev ruut on hea viide üldiste omaduste animatsioonide jaoks. Niikaua kui teate kasutatavat õiget süntaksit, saate animeerida mis tahes CSS-i atribuuti. Piiriraadiuse omadus on selle hea näide. Ruudul on teravad nurgad, mis muutuvad ümarateks nurkadeks ja seejärel uuesti ruudukujulisteks nurkadeks.

#ruut { animatsioon: square_anim 2000 ms lihtsus sisse-välja lõpmatu tavaline edasiliikumine }

Ruudukujulist animatsiooni nimetatakse square_anim ja selle tööaeg on kaks sekundit. The kergus sisse-välja kõver muudab animatsiooni alguses ja lõpus aeglasemaks, luues sujuva efekti.

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

Nagu näete, on sellel animatsioonil neli võtmekaadrit. X- ja Y-äärise raadius muutub 0-40-lt 40-le 0% ja 45% vahel, peatudes 40 piksli juures kuni 55%. Seejärel läheb see iga raadiuse jaoks tagasi väärtusele 0px, kui animatsioon jõuab 100% -ni.

Pöörake teisendusega SVG kolmnurka

Näite viimane SVG-animatsioon on kõige lihtsam, kolmnurk pöörleb ümber oma keskpunkti. Kuju teeb täispöörde iga kahe sekundi järel ja jätkab jooksmist lõputult. Sellel on kergenduskõver, mille tulemusel animatsioon aeglustub. Animatsiooni nimetatakse triangle_anim.

#kolmnurk { animatsioon: kolmnurk_anim 2000 ms lõpmatu tavalise edasiliikumise leevendamine }

Sellel animatsioonil on kaks võtmekaadrit, millest üks on 0% ja teine ​​100%. Teisenda pööramise omadus pöörab kolmnurga 0° juurest 0% juures 360 kraadini 100% juures, luues täispöörlemise.

@keyframes triangle_anim {
 0% { teisendada: tõlkida(644 pikslit, 297 pikslit) pöörata(0 kraadi) }
 100% { teisendada: tõlkida(644 pikslit, 297 pikslit) pöörata(360 kraadi) }
}

Kuidas animeerida muid omadusi

Ülaltoodud kolm animatsiooni on hea lähtepunkt SVG-dega töötamisel, kuid tõenäoliselt soovite seda veelgi edasi lükata. Saate kasutada CSS-i animeerimisreeglit, et kohandada peaaegu kõiki atribuutide väärtusi, mille saate oma SVG-le määrata. See hõlmab põhiväärtusi, nagu suurus ja positsioneerimine, aga ka täpsemaid väärtusi, nagu äärised, varjud ja segamisrežiimid.

Harvadel juhtudel, kui CSS ei saa seda tööd teha, saate SVG-piltide animeerimiseks kasutada JavaScripti koodi. Kui tunnete, et olete valmis oma SVG-dega järgmise sammu astuma, leiate palju juhendeid, mis teid selles aitavad.

Looge oma SVG-animatsioonid

Olenemata sellest, kas olete veebidisainer, tarkvaraarendaja või lihtsalt loominguline inimene, võib SVG-animatsioonide tegemine olla lõbus ja rahuldust pakkuv. Kui olete põhitõdedega rahul, leiate veebist palju ressursse, mis aitavad teil veebipõhist animatsiooni luua.

10 CSS-i taustamustrit, mida saate oma veebisaidil kasutada

Loe edasi