Vaikka SVG: n animointi CSS: llä saattaa olla mukavampaa keskimääräiselle käyttöliittymälle, SVG: llä on toinen tapa tehdä animaatio suoraan SVG-syntaksiin. Juuri tämän käsittelemme lyhyesti tässä videossa, mutta jos haluat täydellisen viiteoppaan, tutustu ehdottomasti Sara Soueidanin opas SVG-animaatioihin (SMIL) täällä CSS-temppuilla.
SMIL on lyhenne sanoista Synchronized Multimedia Integration Language. Ymmärrän sen, se on itselleni "asia", joka sattuu olemaan sisäänrakennettu SVG: hen. Mutta SVG: llä on joitain omia SMIL-tyyppisiä lisäyksiä. Sanon vain kaiken SMILiksi, vaikka olen varma, että olen joskus teknisesti väärä.
Hyvin yksinkertaisissa animaatioissa ei ole väliä, jos teet sen SMIL: ssä tai CSS: ssä, se tekee saman asian suunnilleen samalla vaikeustasolla. Jotkut asiat voivat olla jopa helpompia CSS: ssä. Mutta tässä on joitain asioita, joihin SMIL on oikea tapa edetä:
- Sinun on animoitava jotain, johon CSS ei voi koskettaa. Kuten monikulmion tai polun muoto.
- Haluat käyttää tapahtumia vaikuttaa animaation, kuten
clicktaimouseovertai jotain. - Haluat tehdä lisäaineanimaatioita, kuten animoida missä tahansa nyt x pikseliä.
- Haluat saada animaatioita, jotka liittyvät suoraan muihin animaatioihin, kuten kun tämä animaatio on valmis, aloita seuraava animaatio (käsittelemättä kestoja manuaalisesti).
- Olen varma, että on enemmän.
Syntaksi tuntuu aluksi pelottavalta, mutta lupaan todella helppoa. Tässä on perusesimerkki:
Katso Chris Coyierin (@chriscoyier) kynä jAipI CodePenistä.
"Form morphing" -asia on todella ainutlaatuinen SMIL: n kanssa, joten tässä on parempi esimerkki kuin outo, jonka teimme videossa:
Katso Chris Coyierin (@chriscoyier) kynän muotoinen morfipainike CodePenissä.
Kyseisessä esittelyssä tapahtumia käsittelee JavaScripti SMIL: n sijaan. Mukava tietää, että voit tehdä sen myös. SMIL-tapahtumakäynnistimet ovat hienoja, mutta sitten napsautettavan asian on oltava kyseisessä SVG: ssä eikä missään muualla DOM: ssa.