Čeprav je animiranje SVG s CSS morda za povprečnega uporabnika bolj udobno, ima SVG še en način animacije, ki je vgrajen v samo sintakso SVG. Prav to na kratko pokrivamo v tem videoposnetku, če pa želite popoln referenčni vodnik, si zagotovo oglejte Vodnik po SVG animacijah (SMIL) Sara Soueidan tukaj na CSS-triki.
SMIL je kratica za Synchronized Multimedia Integration Language. Kolikor razumem, je to nekaj "samega sebe", ki se vgradi v SVG. Toda SVG ima nekaj svojih SMIL-podobnih dodatkov. Vse bom omenil kot SMIL, čeprav sem prepričan, da sem včasih tehnično napačen.
Za zelo preproste animacije ni pomembno, če to počnete v SMIL ali CSS, naredili boste isto na približno isti stopnji težavnosti. Nekatere stvari so v CSS morda celo enostavnejše. Tu pa je nekaj stvari, pri katerih je pot SMIL:
- Morate animirati nekaj, česar se CSS ne more dotakniti. Tako kot oblika mnogokotnika ali poti.
- Želite uporabiti dogodki lahko vplivali na animacijo, se kot
clickalimouseoverali kaj podobnega. - Želite narediti aditivne animacije, na primer animirati, kjer koli že ste, še x slikovnih pik.
- Želite imeti animacije, ki se nanašajo neposredno na druge animacije, na primer, ko se ta animacija konča, začne naslednja animacija (brez ročnega spreminjanja trajanja).
- Prepričan sem, da jih je še več.
Sintaksa se sprva zdi zastrašujoča, vendar obljubljam, da je zelo enostavno. Tu je osnovni primer:
Oglejte si Pen jAipI Chrisa Coyierja (@chriscoyier) na CodePen.
Stvar "preoblikovanja oblike" je pri SMIL-u resnično izjemna, zato je tukaj boljši primer od tistega čudnega, ki smo ga naredili v videu:
Oglejte si gumb Pen Shape Morph Chris Coyier (@chriscoyier) na CodePen.
V tej predstavitvi dogodke obravnava JavaScript namesto SMIL. Lepo je vedeti, da lahko to storite tudi vi. Sprožilci dogodkov SMIL so kul, potem pa mora biti stvar, ki jo je treba klikniti, biti v tem SVG in ne kjer koli drugje v DOM-u.