Chiar dacă animarea SVG cu CSS ar putea fi mai confortabilă pentru o persoană front-end medie, SVG are un alt mod în care animația este încorporată chiar în sintaxa SVG. Este exact ceea ce acoperim pe scurt în acest videoclip, dar dacă doriți un ghid de referință complet, consultați cu siguranță Un ghid pentru animații SVG (SMIL) de Sara Soueidan chiar aici pe CSS-Tricks.
SMIL înseamnă Synchronized Multimedia Integration Language. După cum o înțeleg, acesta este un „lucru” în sine, care se întâmplă să fie încorporat în SVG. Dar SVG are unele dintre propriile sale adăugări SMIL. Mă voi referi la toate ca SMIL, deși sunt sigur că uneori sunt incorect din punct de vedere tehnic.
Pentru animații foarte simple, nu contează prea mult dacă o faceți în SMIL sau CSS, va face același lucru la aproximativ același nivel de dificultate. Unele lucruri ar putea fi chiar mai ușoare în CSS. Iată însă câteva lucruri în care SMIL este calea de urmat:
- Trebuie să animați ceva ce CSS nu poate atinge. Ca forma unui poligon sau a unei căi.
- Doriți să utilizați evenimente pentru a afecta animație, cum ar fi o
clicksaumouseoversau ceva. - Doriți să faceți animații aditive, cum ar fi, să animați de oriunde v-ați afla acum cu încă x pixeli.
- Doriți să aveți animații care se referă direct la alte animații, cum ar fi, atunci când această animație se termină, începe următoarea animație (fără a manipula manual duratele).
- Sunt sigur că sunt mai multe.
Sintaxa se simte intimidantă la început, dar promit că este destul de ușor. Iată un exemplu de bază:
Vedeți Pen jAipI de Chris Coyier (@chriscoyier) pe CodePen.
Lucrul cu „forma morfării” este cu adevărat foarte unic cu SMIL, așa că iată un exemplu mai bun decât cel ciudat pe care l-am făcut în videoclip:
Vedeți Butonul Morph Shape Pen de Chris Coyier (@chriscoyier) pe CodePen.
În această demonstrație, evenimentele sunt gestionate de JavaScript în loc de SMIL. Îmi pare bine să știi că poți face și asta. Declanșatoarele de evenimente SMIL sunt grozave, dar lucrul care trebuie făcut clic trebuie să fie în acel SVG, mai degrabă decât în orice alt loc din DOM.