SVG animēšana ir mazliet unikāla ar to, ka ir trīs atšķirīgi veidi, kā jūs varat to animēt.
1. Animācija ar CSS @ keyframes
SVG elementus var mērķēt un veidot ar CSS. Tas nozīmē, ka animāciju varat lietot, izmantojot @keyframes. Kā šis:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Jūs varētu izvēlēties animēt šādā veidā, ja…
- Animācija ir diezgan vienkārša.
- Jums jā animē tikai īpašības, kuras CSS var atdzīvināt.
- Jūs jau zināt un esat apmierināts ar CSS animācijām.
2. Animācija ar SMIL
Tieši SVG ir iebūvēta animācijas sintakse. Šeit ir ļoti vienkāršs piemērs:
Šeit ir liela apmācība par visu SMIL.
Jūs varētu izvēlēties animēt šādā veidā, ja…
- Jums jāanimē īpašības, kuras CSS nevar, piemēram, pati forma.
- Jums ir nepieciešamas citas specifiskas SMIL funkcijas, piemēram, animācijas sākšana, kad cita darbība beidzas, manuāli sinhronizējot ilgumus / kavējumus. Vai arī mijiedarbības lietas, piemēram, animācijas sākšana ar klikšķi.
3. Animācija ar JavaScript
Izmantojot JavaScript, jums ir piekļuve tādām lietām kā requestAnimationFrame (vai citām cilpām), lai jūs varētu animēt, vienkārši ātri mainot īpašuma vērtības. Darbam ar SVG ir arī sistēmas, kurās parasti ir iebūvēti animācijas materiāli. Vai arī animācijas ietvari, kas darbojas ar SVG. Tāpat kā SnapSVG, GreenSock, SVG.js vai Velocity.js.
Šeit ir piemērs ar SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Jūs varētu izvēlēties animēt šādā veidā, ja…
- Jūs vienalga strādājat JavaScript, iespējams, jūsu animācija ir saistīta ar datiem, kurus saņemat ar JSON vai tamlīdzīgi.
- Jebkurā gadījumā jums ir nepieciešams JavaScript, jo jums ir nepieciešama loģika vai matemātika vai kaut kas cits, kas patiešām ir iespējams tikai tur.
- Jūs interesē JavaScript, lai jūs varētu atrisināt dažas kļūdas.
- Jūsu animācijas joma ir diezgan liela / sarežģīta, un jums ir nepieciešama abstrakcija un organizācija, ko JavaScript var nodrošināt.
Demonstrācija
Skatiet Kriss Koijers (@chriscoyier) Pen Pen veidus, kā animēt SVG vietnē CodePen.
Vai tas, kā jūs galu galā izmantojat SVG, neietekmē jūsu iespējas?
Tā dara. Ja izmantojat SVG-as- , jūs nevarēsit izmantot CSS animācijas no citas stila lapas. Bet, jūs esat SMIL, animācijas darbosies dažās pārlūkprogrammās (šī rakstīšanas laikā Chrome jā, Firefox nē). Es nebūtu pārsteigts, ja iegultā CSS SVG failos darbosies vai darbosies kādu dienu. JavaScript, iespējams, nē.
Ja CSS fona attēlā izmantojat SVG, es domāju, ka tas ir līdzīgs stāsts kā iepriekš.
Ja izmantojat tekstu tiešsaistē , visas iespējas ir atvērtas jums.
Ja SVG izmantojat caur objectvai iframe, skripti / stili ir jāiegulē tieši SVG, lai tas darbotos.