Ehkki SVG animeerimine CSS-iga võib olla keskmise kasutajaliidese jaoks mugavam, on SVG-l animatsiooni sisseehitamine otse SVG-i süntaksisse. See on see, mida me selles videos lühidalt käsitleme, kuid kui soovite täielikku juhendit, vaadake kindlasti Sara Soueidani juhendit SVG Animations (SMIL) siin CSS-Tricks'is.
SMIL tähistab sünkroniseeritud multimeediaintegratsiooni keelt. Nagu ma aru saan, on see kõik asi, mis juhtub olema SVG sisse ehitatud. Kuid SVG-l on mõned oma SMIL-laadsed täiendused. Ma nimetan seda kõike lihtsalt SMIL-iks, kuigi olen kindel, et olen mõnikord tehniliselt vale.
Väga lihtsate animatsioonide puhul pole vahet, kas teete seda SMIL-is või CSS-is, see teeb sama asja umbes samal raskusastmel. Mõni asi võib CSS-is isegi lihtsam olla. Kuid siin on mõned asjad, kus SMIL on õige tee:
- Peate animeerima midagi, mida CSS ei saa puudutada. Nagu hulknurga või tee kuju.
- Soovite kasutada sündmusi mõjutada animatsioon, nagu
clickvõimouseovervõi midagi. - Soovite teha näiteks animatiivseid animatsioone, kus iganes te praegu veel x pikslit olete.
- Soovite, et animatsioonid oleksid otseselt seotud teiste animatsioonidega, näiteks kui animatsioon on lõppenud, käivitage see järgmine animatsioon (ilma kestusega käsitsi manipuleerimata).
- Olen kindel, et neid on veel.
Süntaks tundub alguses hirmutav, kuid luban, et see on tõesti üsna lihtne. Siin on põhinäide:
Vaadake Code Cenilt Chris Coyieri (@chriscoyier) pliiatsi Pen jAipI.
"Kujundusmoment" on SMIL-i puhul väga ainulaadne, nii et siin on parem näide kui imelik, mida me videos tegime:
Vaadake Chris Coyieri (@chriscoyier) pliiatsi kuju Morph nuppu CodePenis.
Selles demos haldab sündmusi SMIL-i asemel JavaScripti. Lihtsalt tore teada, et saate ka seda teha. SMIL-i sündmuste käivitajad on lahedad, kuid siis peab klõpsamist vajav asi asuma selles SVG-s, mitte kusagil mujal DOM-is.