Lai gan SVG animēšana ar CSS varētu būt ērtāka vidusmēra priekšgala personai, SVG ir vēl viens veids, kā animēt, kas iebūvēts tieši pašā SVG sintaksē. Tas ir tieši tas, ko mēs īsi aplūkojam šajā videoklipā, bet, ja vēlaties pilnīgu uzziņu rokasgrāmatu, noteikti iepazīstieties ar Sara Soueidan vadlīniju SVG animācijām (SMIL) šeit, CSS-Tricks.
SMIL nozīmē sinhronizētu multivides integrācijas valodu. Kā es saprotu, tā ir “lieta” sev, kas gadās būt iebūvēts SVG. Bet SVG ir daži no saviem SMIL līdzīgajiem papildinājumiem. Es vienkārši atsaukšos uz to visu kā SMIL, kaut arī esmu pārliecināts, ka reizēm esmu tehniski nepareizs.
Ļoti vienkāršām animācijām nav lielas nozīmes, ja jūs to darāt SMIL vai CSS, tas darīs to pašu apmēram tādā pašā grūtības pakāpē. Dažas lietas CSS var būt pat vieglāk. Bet šeit ir dažas lietas, kurās SMIL ir veids, kā iet:
- Jums jā animē kaut kas tāds, kam CSS nevar pieskarties. Tāpat kā daudzstūra vai ceļa forma.
- Jūs vēlaties izmantot pasākumus, lai ietekmētu animāciju, piemēram,
clickvaimouseover, vai kaut ko. - Jūs vēlaties veikt papildinošas animācijas, piemēram, animēt no jebkuras vietas, kur tagad esat, un vēl x pikseļus.
- Jūs vēlaties, lai animācijas būtu tieši saistītas ar citām animācijām, piemēram, kad šī animācija būs pabeigta, sāciet šo nākamo animāciju (bez manuālas manipulācijas ar ilgumu).
- Es esmu pārliecināts, ka to ir vairāk.
Sākumā sintakse jūtas biedējoša, taču es apsolu, ka tas ir diezgan viegli. Šeit ir pamatpiemērs:
Skatiet Krāsa Koijera (@chriscoyier) Pen jAipI vietnē CodePen.
Lieta “formas morfēšana” ir ļoti unikāla ar SMIL, tāpēc šeit ir labāks piemērs nekā dīvainais, ko mēs izdarījām videoklipā:
Skatiet Krāsa Koijera (@chriscoyier) pildspalvas formas Morfas pogu vietnē CodePen.
Šajā demonstrācijā notikumus apstrādā JavaScript, nevis SMIL. Vienkārši patīkami zināt, ka arī tu to vari. SMIL notikumu izraisītāji ir forši, bet tad lieta, kurai jānoklikšķina, ir jāatrodas tajā SVG, nevis tikai jebkur citur DOM.