SVG: n animointi on vähän ainutlaatuinen siinä mielessä, että sen animointiin on kolme selvästi erilaista tapaa.
1. Animointi CSS @ avainkehyksillä
SVG-elementit voidaan kohdistaa ja muotoilla CSS: llä. Tämä tarkoittaa, että voit käyttää animaatiota @keyframes-sovelluksen kautta. Kuten tämä:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Voit valita animoinnin tällä tavalla, jos…
- Animaatio on melko yksinkertainen.
- Sinun tarvitsee vain animoida ominaisuuksia, joita CSS voi animoida.
- Tiedät jo ja olet tyytyväinen CSS-animaatioihin.
2. Animaatio SMIL: llä
Aivan SVG: hen on rakennettu syntaksia animaatioille. Tässä on hyvin yksinkertainen esimerkki:
Tässä on iso opetusohjelma kaikesta, mikä on SMIL.
Voit valita animoinnin tällä tavalla, jos…
- Sinun on animoitava ominaisuuksia, joita CSS ei voi, kuten itse muoto.
- Tarvitset muita SMIL-erityisominaisuuksia, kuten animaation aloittamisen, kun toinen päättyy ilman synkronoimalla kestoja / viiveitä manuaalisesti. Tai vuorovaikutustavaraa, kuten animaation aloittaminen napsautuksella.
3. Animointi JavaScriptillä
JavaScriptillä sinulla on pääsy esimerkiksi requestAnimationFrame-kehykseen (tai muihin silmukoihin), joten voit animoida vain muuttamalla nopeasti ominaisuusarvoja. Siellä on myös kehyksiä SVG: n kanssa työskentelyyn, joihin on tyypillisesti rakennettu animaatiota. Tai animaatiokehyksiä, jotka toimivat SVG: n kanssa. Kuten SnapSVG, GreenSock, SVG.js tai Velocity.js.
Tässä on esimerkki SnapSVG: n kanssa:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Voit valita animoinnin tällä tavalla, jos…
- Teet joka tapauksessa JavaScriptiä, ehkä animaatiosi liittyy JSON: lla tai vastaavalla saamiesi tietojen kanssa.
- Tarvitset JavaScriptiä joka tapauksessa, koska tarvitset logiikkaa tai matematiikkaa tai jotain muuta, joka on todella mahdollista vain siellä.
- Olet kiinnostunut siitä, että JavaScript ratkaisee joitain virheitä puolestasi.
- Animaation laajuus on melko suuri / monimutkainen, ja tarvitset JavaScriptin tarjoaman abstraktion ja organisaation.
Demo
Katso Chris Coyierin (@chriscoyier) kynä Kolme tapaa animoida SVG CodePenissä.
Eikö se, miten käytät lopulta SVG: tä, ei vaikuta vaihtoehtoihisi?
Se tekee. Jos käytät SVG-as- , et voi käyttää toisen tyylitaulukon CSS-animaatioita. Mutta olet SMIL-animaatiot toimivat joissakin selaimissa (tämän kirjoituksen aikana Chrome kyllä, Firefox ei). En olisi yllättynyt, jos upotettu CSS SVG-tiedostoihin toimii tai toimii jonain päivänä. JavaScript, luultavasti ei.
Jos käytät SVG: tä CSS-taustakuvassa, luulen, että se on samanlainen tarina kuin yllä.
Jos käytät linjassa , kaikki mahdollisuudet ovat sinulle avoimet.
Jos käytät SVG: tä kautta objecttai iframe, sinun on upotettava skriptit / tyylit suoraan SVG: hen, jotta se toimisi.