8 knižníc jazyka JavaScript na animáciu SVG
SVG je grafika nezávislá od rozlíšenia. To znamená, že to bude vyzerajte dobre na akomkoľvek type obrazovky bez straty kvality. Okrem toho môžete SVG oživiť aj s niektorými animačnými efektmi.
V jednom z príspevkov našej série SVG sme vám ukázali, ako animácia SVG funguje s
Viac informácií o Hongkiat.com:
- Animate.css - Knižnica CSS3 pre jednoduchú tvorbu animácie
- Jednoducho animujte text pomocou programu Textillate.js
- Ako previesť text programu Photoshop do SVG
- Animovať skryť a posunúť obsah pomocou jQuery
1. Vivus
Vivus je knižnica JavaScript dáva vášmu SVG vzhľad vykreslených. Vivus pracuje mimo krabice bez potreby závislostí (napr. JQuery). Stačí zahrnúť .js súbor vo vašom jazyku HTML a označte prvok SVG, ktorý chcete animovať, spolu s niektorými prednastavenými možnosťami, aby sa okamžite spustila animácia.
Napríklad:
nový Vivus ('svg-element', typ: 'oneByOne', trvanie: 200); Vyššie uvedené bude animovať môj prvok SVG, ktorý má SVG-element ID za 200 milisekúnd. Každý prvok tohto SVG bude nakreslený za sebou v rámci tohto časového rámca.
2. Bonsai
Bonsai je výkonná JavaScriptová knižnica, ktorá umožňuje kresliť, morfovať a animovať grafické prvky na webových stránkach. Podporuje aj grafický typ HTML5 Canvas a SVG. S Bonsai môžete vytvoriť jednoduchý obdĺžnik alebo kruh, alebo ak chcete, a plnohodnotný multiplayer animovaná hra, ako je táto. Môžete použiť Orbit, aby ste cítili, ako Bonsai pracuje v živých akciách, alebo si pozrite pár týchto pôsobivých príkladov, aby ste inšpirovali.
3. Rýchlosť
Velocity je JavaScriptová knižnica postavená pre rýchle animácie. Rýchlosť rýchlosti pri rendrovaní animácie je neuveriteľne rýchla. Prekonáva jQuery a dokonca aj CSS. Rozhranie API služby Velocity pracuje podobne ako animácia v jQuery okrem toho, že používa alias kľúčového slova $ .Velocity () namiesto $ .Animate (). Okrem toho môžete použiť presne tie isté animačné kľúčové slová ako napr fadeIn a vyblednúť.
4. Raphael
RaphaelJS je knižnica, ktorá vám umožňuje kresliť aj animovať vektorovú grafiku SVG na webových stránkach. Podporuje širokú škálu prehliadačov celú cestu až do IE6, čo skoro robí Raphaela najspoľahlivejšou knižnicou JavaScript vo výklenku. S programom RaphaelJS môžete vytvárať interaktívne analytické grafy, svetové mapy a interaktívne hry podobné tomu v Counter Strike.
5. Zacvaknite
SnapSVG je ďalšou populárnou knižnicou JavaScript pre animáciu SVG, ktorú vyvinul vývojár Raphael Dmitry Baranovskiy spolu s tímom Adobe Web Platform od začiatku. Na rozdiel od Raphaela je však SnapSVG určený len pre najnovšie prehliadače. To umožňuje, že knižnica bude výrazne menšia ako Raphael a že bude podporovať funkcie SVG, ako je orezávanie a maskovanie.
6. Lazy Line Painter
Lazy Line Painter je jQuery plugin pre animáciu SVG ciest animovať sekvenciu kresieb, podobne ako Vivus. Zlou správou je, že tento doplnok robí len túto veľmi špecifickú vec. Preto keď importujete SVG z aplikácií, ako je Illustrator alebo Inkscape, uistite sa, že vo SVG nie je vľavo farebná výplň, len cesty.
7. SVG.js
SVG.js je ľahká knižnica na manipuláciu a animáciu SVG. Pomocou tejto knižnice budete môcť animovať veľkosť, pozíciu alebo farbu vo vašom prvku SVG. Nielenže oživuje; môžete tiež použiť ďalšie doplnky na pridanie ďalších funkcií. Tento príklad používa plugin svg.filter.js na použitie filtrov, ako je gaussian blur, desaturate, kontrast, sépia atď..
8. Walkway
Walkway podporuje tri typy prvkov, cesta, riadok, a krivka slúži na kreslenie SVG riadkov. Tu je príklad z mnohouholníka, ktorý zobrazuje animáciu riadku konzoly PlayStation 4.
