Net jei SVG animavimas naudojant CSS gali būti patogesnis vidutiniam vartotojo vadovui, SVG turi dar vieną būdą, kaip animaciją įmontuoti tiesiai į pačią SVG sintaksę. Tai yra tai, ką mes trumpai aprašome šiame vaizdo įraše, bet jei norite išsamaus vadovo, būtinai perskaitykite Sara Soueidan „SVG animacijos (SMIL) vadovą“ čia, CSS-Tricks.
SMIL reiškia sinchronizuotą daugialypės terpės integravimo kalbą. Kaip suprantu, tai yra „viskas“ sau, kuris būna įmontuotas į SVG. Bet SVG turi keletą savo SMIL panašių priedų. Aš visa tai vadinsiu SMIL, nors esu įsitikinęs, kad kartais esu techniškai neteisingas.
Labai paprastoms animacijoms nesvarbu, ar tai darote SMIL, ar CSS, tai atliksite tą patį dalyką maždaug tuo pačiu sunkumo lygiu. Kai kurie dalykai gali būti net lengviau naudojant CSS. Tačiau čia yra keletas dalykų, kuriuos reikia atlikti SMIL:
- Turite animuoti tai, ko CSS negali paliesti. Kaip daugiakampio ar kelio forma.
- Norint paveikti animaciją, pvz., „
clickAr“mouseoverar pan., Norite naudoti įvykius . - Norite daryti papildomas animacijas, pvz., Animuoti iš bet kurios vietos, kur dabar esate, dar x pikselių.
- Norite turėti animacijas, tiesiogiai susijusias su kitomis animacijomis, pvz., Kai ši animacija bus baigta, paleiskite šią kitą animaciją (rankiniu būdu netvarkant trukmės).
- Aš tikiu, kad jų yra ir daugiau.
Iš pradžių sintaksė jaučiasi bauginanti, tačiau pažadu, kad tai tikrai gana lengva. Štai pagrindinis pavyzdys:
Peržiūrėkite Chriso Coyier'io (@chriscoyier) „Pen jAipI“ „CodePen“.
„Formos morfuojantis“ dalykas yra labai unikalus SMIL, todėl pateikiame geresnį pavyzdį nei keistas, kurį padarėme vaizdo įraše:
Žiūrėkite Chriso Coyierio (@chriscoyier) „Pen Shape Morph“ mygtuką „CodePen“.
Šioje demonstracijoje įvykius valdo „JavaScript“, o ne „SMIL“. Tiesiog malonu žinoti, kad ir tu gali tai padaryti. „SMIL“ įvykių paleidikliai yra šaunūs, bet tada dalykas, kurį reikia spustelėti, turi būti tame SVG, o ne bet kur kitur DOM.
