SVG animeerimine on natuke ainulaadne selle poolest, et selle animeerimiseks on kolm selgelt erinevat viisi.
1. Animeerimine CSS @ võtmekaadritega
SVG-elemente saab sihtida ja kujundada CSS-iga. See tähendab, et saate animatsiooni rakendada rakenduse @keyframes kaudu. Nagu nii:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Võite valida animeerimise sel viisil, kui…
- Animatsioon on üsna lihtne.
- Animeerige ainult atribuudid, mida CSS saab animeerida.
- Te juba teate ja tunnete CSS-i animatsioonidega mugavust.
2. Animeerimine SMIL-iga
Otse SVG-sse on sisse ehitatud animatsioonide süntaks. Siin on väga lihtne näide:
Siin on suur õpetus kõige selle kohta, mis on SMIL.
Võite valida animeerimise sel viisil, kui…
- Peate animeerima omadused, mida CSS ei saa, nagu kuju ise.
- Teil on vaja muid SMIL-i spetsiifilisi funktsioone, näiteks animatsiooni alustamine, kui teine lõpeb ilma kestuste / viivituste käsitsi sünkroonimata. Või suhtlusvärk, näiteks animatsiooni alustamine klõpsuga.
3. JavaScripti abil animeerimine
JavaScripti abil on teil juurdepääs sellistele asjadele nagu requestAnimationFrame (või muud tsüklid), nii et saate animeerida lihtsalt kiiresti muutuvate atribuutide väärtuste abil. SVG-ga töötamiseks on olemas ka raamistikud, millele on tavaliselt sisse ehitatud animatsioon. Või animatsiooniraamistikud, mis töötavad SVG-ga. Nagu SnapSVG, GreenSock, SVG.js või Velocity.js.
Siin on näide SnapSVG-st:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Võite valida animeerimise sel viisil, kui…
- Te töötate nagunii JavaScripti abil, võib-olla on teie animatsioon seotud andmetega, mille saate JSON-i vms abil.
- JavaScripti vajate niikuinii, sest vajate loogikat või matemaatikat või midagi muud, mis on seal tõesti võimalik.
- Teid huvitab, et JavaScripti lahendaks teie jaoks mõned vead.
- Teie animatsiooni ulatus on üsna suur / keeruline ning vajate JavaScripti pakutavat abstraktsiooni ja korraldust.
Demo
Vaadake Code Cenilt Chris Coyieri (@chriscoyier) pliiatsi SVG animeerimise kolm viisi
Kas see, kuidas te lõpuks SVG-d kasutate, ei mõjuta teie võimalusi?
See teeb. Kui kasutate SVG-as- , ei saa te kasutada CSS-i animatsioone teisest stiililehest. Kuid te olete SMIL-i animatsioonid, mis töötavad mõnes brauseris (selle kirjutamise ajal on Chrome jah, Firefox ei). Ma ei imestaks, kui SVG-failidesse manustatud CSS töötab või töötab ühel päeval. JavaScripti, ilmselt mitte.
Kui kasutate SVG-d CSS-i taustpildil, kujutan ette, et see on sarnane lugu nagu eespool.
Kui kasutate teksti sees , on kõik võimalused teile avatud.
Kui kasutate SVG-d läbi objectvõi iframe, peate selle toimimiseks skriptid / stiilid sisestama otse SVG-sse.