Animace SVG je trochu jedinečná v tom, že existují tři výrazně odlišné způsoby, jak k animaci přistupovat.
1. Animace pomocí CSS @keyframes
Prvky SVG lze cílit a stylizovat pomocí CSS. To znamená, že můžete použít animaci prostřednictvím @keyframes. Takhle:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Tímto způsobem můžete zvolit animaci, pokud ...
- Animace je poměrně jednoduchá.
- Musíte pouze animovat vlastnosti, které může CSS animovat.
- S animacemi CSS už víte a jsou vám pohodlné.
2. Animace pomocí SMIL
Syntaxe animací je zabudována přímo do SVG. Zde je velmi jednoduchý příklad:
Zde je velký návod ke všemu, co je SMIL.
Tímto způsobem můžete zvolit animaci, pokud ...
- Musíte animovat vlastnosti, které CSS neumí, jako samotný tvar.
- Potřebujete další funkce specifické pro SMIL, jako je zahájení animace, když jiná končí bez ruční synchronizace trvání / zpoždění. Nebo věci související s interakcí, jako je zahájení animace na kliknutí.
3. Animace pomocí JavaScriptu
Díky JavaScriptu máte přístup k věcem, jako je requestAnimationFrame (nebo k jiným smyčkám), takže můžete animovat pouze pomocí rychle se měnících hodnot vlastností. Existují také rámce pro práci s SVG, které mají obvykle zabudované animační prvky. Nebo animační rámce, které fungují s SVG. Jako SnapSVG, GreenSock, SVG.js nebo Velocity.js.
Zde je příklad s SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Tímto způsobem můžete zvolit animaci, pokud ...
- Přesto pracujete v JavaScriptu, možná má vaše animace co do činění s daty, která obdržíte pomocí JSON nebo podobně.
- Potřebujete JavaScript, protože potřebujete logiku nebo matematiku nebo něco jiného, co je opravdu možné jen tam.
- Zajímá vás, jak za vás JavaScript řeší nějaké chyby.
- Rozsah vaší animace je poměrně velký / komplikovaný a potřebujete abstrakci a organizaci, kterou vám JavaScript může poskytnout.
Ukázka
Podívejte se na Pen Three Ways to Animate SVG od Chrisa Coyiera (@chriscoyier) na CodePen.
Nemá to, jak nakonec použijete SVG, vliv na vaše možnosti?
Ano. Pokud používáte SVG-as- , nebudete moci používat použití CSS animací z jiné šablony stylů. Ale jste animace SMIL, v některých prohlížečích budou fungovat (v době psaní tohoto článku Chrome ano, Firefox ne). Nebyl bych překvapen, kdyby vložené CSS do souborů SVG fungovaly nebo budou fungovat jeden den. JavaScript, pravděpodobně ne.
Pokud používáte SVG v CSS obrázku na pozadí, představuji si, že je to podobný příběh jako výše.
Pokud používáte inline , máte všechny možnosti otevřené.
Pokud používáte SVG přes objectnebo iframe, budete muset vložit skripty / styly přímo do SVG, aby to fungovalo.