I když animace SVG pomocí CSS může být pro průměrného front-enda pohodlnější, SVG má jiný způsob, jak animaci zabudovat přímo do samotné syntaxe SVG. Přesně tomu se stručně věnujeme v tomto videu, ale pokud chcete kompletní referenční příručku, určitě si přečtěte Průvodce SVG animacemi (SMIL) od Sary Soueidan přímo zde na CSS-Tricks.
SMIL znamená Synchronized Multimedia Integration Language. Pokud tomu rozumím, je to „věc“ sama o sobě, která se stane součástí SVG. Ale SVG má některé své vlastní doplňky podobné SMIL. Prostě to celé označím jako SMIL, i když jsem si jistý, že jsem někdy technicky nesprávný.
U velmi jednoduchých animací nezáleží na tom, jestli to děláte v SMIL nebo CSS, udělá to samé na stejné úrovni obtížnosti. Některé věci mohou být v CSS ještě jednodušší. Ale tady je několik věcí, kde je SMIL cestou:
- Musíte animovat něco, čeho se CSS nemůže dotknout. Jako tvar mnohoúhelníku nebo cesty.
- Chcete použít události k ovlivnění animace, jako
clicknebomouseovernebo něco. - Chcete dělat aditivní animace, jako je animace odkudkoli, kde jste nyní dalších x pixelů.
- Chcete mít animace, které se přímo vztahují k jiným animacím, například když tato animace skončí, odstartuje tuto další animaci (bez ruční manipulace s dobami).
- Jsem si jistý, že jich je více.
Syntaxe se zpočátku cítí zastrašující, ale slibuji, že je to docela snadné. Zde je základní příklad:
Podívejte se na Pen jAipI od Chris Coyier (@chriscoyier) na CodePen.
Věc „tvar morphing“ je u SMIL opravdu super jedinečná, takže tady je lepší příklad než ten divný, který jsme udělali ve videu:
Podívejte se na tlačítko Pen Shape Morph od Chrisa Coyiera (@chriscoyier) na CodePen.
V této ukázce jsou události zpracovávány JavaScriptem místo SMIL. Je hezké vědět, že to dokážete také. Spouštěče událostí SMIL jsou skvělé, ale pak ta věc, na kterou je třeba kliknout, musí být spíše v tom SVG, než kdekoli jinde v DOM.