Aj keď môže byť animácia SVG pomocou CSS pre priemerného front-enda pohodlnejšia, SVG má iný spôsob, ako animáciu zabudovať priamo do samotnej syntaxe SVG. To je presne to, čomu sa v krátkosti venujeme v tomto videu, ale ak chcete kompletnú referenčnú príručku, určite si pozrite Sprievodcu animáciami SVG (SMIL) od Sary Soueidanovej priamo na stránkach CSS-Tricks.
SMIL znamená Synchronized Multimedia Integration Language. Pokiaľ tomu dobre rozumiem, je to „vec“ pre seba, ktorá je zabudovaná do SVG. Ale SVG má niektoré svoje vlastné doplnky podobné SMIL. Iba to všetko označím ako SMIL, aj keď som si istý, že som niekedy technicky nesprávny.
Pri veľmi jednoduchých animáciách nezáleží na tom, či to robíte v SMIL alebo CSS, urobí to isté pri približne rovnakej úrovni obtiažnosti. Niektoré veci môžu byť v CSS ešte jednoduchšie. Ale tu je niekoľko vecí, ktoré sú cestou SMIL:
- Musíte animovať niečo, čoho sa CSS nemôže dotknúť. Rovnako ako tvar mnohouholníka alebo cesty.
- Ak chcete použiť udalosti vplyv na animáciu, ako keď
clickalebomouseoveralebo tak niečo. - Chcete robiť doplnkové animácie, napríklad animovať odkiaľkoľvek, kde ste teraz ďalších x pixelov.
- Chcete mať animácie, ktoré sa priamo týkajú iných animácií, napríklad keď táto animácia skončí, odštartuje túto ďalšiu animáciu (bez manuálnej manipulácie s trvaním).
- Som si istý, že ich je viac.
Syntax sa na začiatku zdá byť zastrašujúca, ale sľubujem, že je to naozaj dosť ľahké. Tu je základný príklad:
Prezrite si pero jAipI od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.
„Tvarovanie“ je u SMIL skutočne jedinečné, takže tu je lepší príklad ako ten divný, ktorý sme uviedli vo videu:
Pozrite si Morph Button Pen Shape od Chrisa Coyiera (@chriscoyier) na CodePen.
V tejto ukážke sú udalosti spracovávané pomocou Java Script namiesto SMIL. Je pekné vedieť, že to môžete urobiť aj vy. Spúšťače udalostí SMIL sú v pohode, ale potom musí kliknúť na vec, na ktorú je potrebné kliknúť, skôr v SVG, než kdekoľvek inde v DOM.