8 JavaScript knihoven pro animaci SVG
SVG je grafika nezávislá na rozlišení. To znamená, že bude vypadají dobře na jakémkoli typu obrazovky bez ztráty kvality. Kromě toho můžete také SVG ožít s některými efekty animace.
V jednom z postů naší SVG série jsme vám ukázali, jak SVG animace pracuje s
Více na stránkách Hongkiat.com:
- Animate.css - CSS3 knihovna vytvořit animaci snadno
- Snadno animovat text pomocí Textillate.js
- Jak převést Photoshop text do SVG
- Animovat skrýt a snímek obsahu s jQuery
1. Vivus
Vivus je knihovna JavaScriptu dává vašemu SVG vzhled tažení. Vivus pracuje mimo krabici bez nutnosti závislostí (např. JQuery). Jednoduše uveďte .js souboru ve formátu HTML a určete prvek SVG, který chcete animovat, spolu s některými přednastavenými možnostmi, jak začít animaci ihned.
Například:
nový Vivus ('svg-element', typ: 'oneByOne', trvání: 200); Výše uvedené bude animovat můj SVG prvek, který má svg-element ID za 200 milisekund. Každý prvek tohoto SVG bude vykreslen jeden po druhém v tomto časovém rámci.
2. Bonsai
Bonsai je výkonná JavaScript knihovna, která vám umožní kreslit, morph, stejně jako animovat grafické prvky na webových stránkách. Podporuje HTML5 grafický typ Canvas i SVG. S Bonsai si můžete vytvořit jednoduchý obdélník nebo kruh nebo pokud chcete, a plnohodnotný multiplayer animovaná hra jako je tato. Můžete použít Orbit k tomu, abyste cítili, jak Bonsai pracuje v živé akci, nebo se podívejte na pár těchto impozantních příkladů, abyste se mohli inspirovat.
3. Rychlost
Velocity je JavaScript knihovna postavená pro rychlé animace. Rychlost rychlosti při vykreslování animace je neuvěřitelně rychlá. Překonává jQuery a dokonce i CSS. Velocity API pracuje podobně jako animace v jQuery kromě toho, že používá klíčové slovo alias $ .velocity () namísto $ .animate (). Že stranou, můžete použít přesně stejná klíčová slova animace, jako je fadeIn a odeznít.
4. Raphael
RaphaelJS je knihovna, která umožňuje kreslit a animovat vektorovou grafiku SVG na webových stránkách. Podporuje širokou škálu prohlížečů až do IE6, což do značné míry dělá Raphael nejspolehlivější JavaScript knihovnou ve výklenku. S RaphaelJS můžete vytvářet interaktivní analytické grafy, světové mapy a herní interakce, které jsou podobné grafům Counter Strike..
5. Uchopte
SnapSVG je další populární JavaScript knihovna pro animaci SVG vyvinutá firmou Raphael, Dmitry Baranovskiy, spolu s týmem Adobe Web Platform. Na rozdíl od Raphaelu je SnapSVG určen pouze pro nejnovější prohlížeče. To umožňuje, aby knihovna byla výrazně menší než Raphael a aby podporovala SVG funkce, jako je ořezávání a maskování.
6. Lazy Line Painter
Lazy Line Painter je plugin jQuery pro animaci cest SVG pro animaci sekvence kreslení, podobně jako Vivus. Špatnou zprávou je, že tento plugin dělá pouze tuto specifickou věc. Když tedy importujete SVG z aplikací jako Illustrator nebo Inkscape, ujistěte se, že na SVG není zbývá žádná barva výplně, pouze cesty.
7. SVG.js
SVG.js je lehká knihovna pro manipulaci a animaci SVG. S touto knihovnou budete moci animovat velikost, pozici nebo barvu v rámci prvku SVG. Nejenže to oživuje; můžete také použít další pluginy pro přidání dalších funkcí. Tento příklad používá plugin svg.filter.js k použití filtrů, jako je Gaussova rozostření, desaturát, kontrast, sépie atd..
8. Chodník
Walkway podporuje tři typy prvků, cesta, řádek, a křivka používá se pro kreslení čar SVG. Zde je příklad z Polygonu, který zobrazuje animaci řádků konzoly PlayStation 4.
