SMIL animace v SVG: Vybrané příklady

Tato „prezentace“ demonstruje pokročilé vlastnosti SMIL animací v SVG. SMIL umožňuje animovat atributy přímo v kódu SVG (např. r, fill, transform, atd.). Dnešní příklady ukazují calcMode, autoReverse (podobné animation-direction), keySplines (podobné animation-timing-function) a fill (podobné animation-fill-mode).

1. calcMode (způsob výpočtu mezihodnot)

Atribut calcMode určuje, jak se počítají mezihodnoty mezi definovanými klíčovými body. Běžné hodnoty:

Ukázka: Měnění barvy s různým calcMode

discrete linear paced spline

Pozn: keyTimes a keySplines se používají u calcMode="spline", aby definovaly, jak přesně probíhá interpolace v jednotlivých intervalech.

2. autoReverse (ekvivalent animation-direction: alternate)

V SMIL neexistuje přímo atribut animation-direction, ale podobného efektu „tam a zpět“ dosáhnete u <animateMotion> pomocí autoReverse="true". Zde ukázka pohybu po cestě, který se po dokončení otočí a jede zpět.

Ukázka: Kolečko jezdí tam a zpět po eliptické dráze

Zde autoReverse="true" funguje jako „animation-direction: alternate“ v CSS. Kolečko dojede na konec cesty a poté se vrací stejnou cestou zpět.

3. keySplines (ekvivalent animation-timing-function)

Pokud calcMode="spline", lze pomocí atributu keySplines definovat Bézierovy křivky, podobně jako v CSS cubic-bezier(). To ovlivňuje „zrychlení/zpomalení“ mezi jednotlivými klíčovými snímky.

Ukázka: Pulzující kruh se zrychlením/zmírněním

Definujeme 3 klíčové body (0, 0.5, 1) a pro každý z nich keySplines, což je křivka (x1 y1 x2 y2), známá i z cubic-bezier() v CSS. Hodnoty 0.42 0 0.58 1 reprezentují ease-in-out.

4. fill (ekvivalent animation-fill-mode)

V SMIL se používá atribut fill (hodnoty freeze nebo remove) k určení, co se stane po skončení animace. - freeze: objekt zůstane v koncové hodnotě. - remove: vrátí se do původního stavu před animací.

Ukázka: Rozdíl mezi freeze a remove

fill="freeze" fill="remove"

První kruh (freeze) si po dvou sekundách uchová poloměr 40, zatímco druhý (remove) se vrátí na původních 20.

Závěr

SMIL animace poskytují silné možnosti přímo v SVG, včetně calcMode, autoReverse, keySplines či fill (analogických ke klíčovým možnostem z CSS).

Přestože je budoucnost SMIL diskutovaná (část vývojářů přechází k Web Animations API nebo CSS animacím), zůstává SMIL nadále praktickou volbou pro animaci čistě uvnitř SVG, zejména pokud potřebujete animovat atributy jako d (morfování cest) či přesně definovat křivky pohybu a další parametry.