Animarea SVG este un pic unică prin faptul că există trei moduri diferite de abordare a animării.
1. Animare cu CSS @keyframes
Elementele SVG pot fi vizate și stilate cu CSS. Adică, puteți aplica animație prin @keyframes. Ca aceasta:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Puteți alege să animați în acest fel dacă ...
- Animația este destul de simplă.
- Trebuie doar să animați proprietăți pe care CSS le poate anima.
- Știți deja și vă simțiți confortabil cu animațiile CSS.
2. Animarea cu SMIL
Există o sintaxă pentru animații încorporate chiar în SVG. Iată un exemplu foarte simplu:
Iată un mare tutorial despre tot ceea ce este SMIL.
Puteți alege să animați în acest fel dacă ...
- Trebuie să animați proprietăți pe care CSS nu le poate, cum ar fi forma în sine.
- Aveți nevoie de alte caracteristici specifice SMIL, cum ar fi începerea unei animații atunci când alta se termină fără a sincroniza manual duratele / întârzierile. Sau lucruri de interacțiune, cum ar fi începerea unei animații cu un clic.
3. Animarea cu JavaScript
Cu JavaScript, aveți acces la lucruri precum requestAnimationFrame (sau alte bucle), astfel încât să puteți anima doar prin schimbarea rapidă a valorilor proprietății. Există, de asemenea, cadre pentru lucrul cu SVG care au de obicei materiale de animație încorporate. Sau cadre de animație care funcționează cu SVG. La fel ca SnapSVG, GreenSock, SVG.js sau Velocity.js.
Iată un exemplu cu SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Puteți alege să animați în acest fel dacă ...
- Lucrați în JavaScript oricum, poate că animația dvs. are legătură cu datele pe care le primiți cu JSON sau altele asemenea.
- Aveți nevoie de JavaScript oricum, deoarece aveți nevoie de logică sau matematică sau altceva este posibil doar acolo.
- Ești interesat de JavaScript pentru rezolvarea unor erori pentru tine.
- Scopul animației dvs. este destul de mare / complicat și aveți nevoie de abstractizare și organizare pe care JavaScript le poate oferi.
Demo
Vezi Penul Trei moduri de a anima SVG de Chris Coyier (@chriscoyier) pe CodePen.
Modul în care utilizați în cele din urmă SVG nu vă afectează opțiunile?
Da. Dacă utilizați SVG-as- , nu veți putea utiliza animații CSS dintr-o altă foaie de stil. Dar, sunteți animațiile SMIL vor funcționa, în unele browsere (în momentul scrierii acestui articol, Chrome da, Firefox nu). Nu m-aș mira dacă CSS încorporat în fișiere SVG funcționează sau va funcționa într-o zi. JavaScript, probabil nu.
Dacă utilizați SVG într-o imagine de fundal CSS, îmi imaginez că este o poveste similară cu cea de mai sus.
Dacă utilizați inline , toate posibilitățile vă sunt deschise.
Dacă utilizați SVG printr-un objectsau iframe, ar trebui să încorporați scripturile / stilurile chiar în SVG pentru ca acesta să funcționeze.