8 JavaScript-könyvtárak az SVG-hez
Az SVG egy felbontás-független grafika. Ez azt jelenti, hogy lesz jól nézzen ki bármilyen típusú képernyőn, anélkül, hogy minőségi veszteséget szenvedne. Ezen túlmenően az SVG-t életre keltheti néhány animációs hatással.
SVG sorozatunk egyik posztján korábban megmutattuk, hogyan működik az SVG animáció az
További információ a Hongkiat.com oldalon:
- Animate.css - CSS3 Könyvtár az animáció egyszerű létrehozásához
- Könnyen animálhatja a szöveget a Textillate.js használatával
- Hogyan lehet átalakítani a Photoshop szöveget SVG-re
- Annak érdekében, hogy elrejtse és csúsztassa a tartalmat a jQuery-vel
1. Vivus
A Vivus egy JavaScript könyvtár megadja az SVG-nek a megjelenés megjelenését. A Vivus a dobozból anélkül működik, hogy szükség lenne bármilyen függőségre (pl. JQuery). Csak a .js fájlja a HTML-ben, és jelölje ki az animálni kívánt SVG-elemet, valamint néhány előre beállított lehetőséget az animáció azonnal elindításához.
Például:
új Vivus ('svg-element', type: 'oneByOne', időtartam: 200); A fentiekben az SVG elemem animálása lesz svg elem ID 200 milliszekundumban. Ennek az SVG-nek minden elemét egymás után fogják rajzolni az adott időkereten belül.
2. Bonsai
A Bonsai egy hatékony JavaScript könyvtár, amely lehetővé teszi, hogy rajzoljon, morph és animációs grafikus elemeket is a weboldalakon. Támogatja mind a HTML5 grafikai típust, mind az SVG-t. A Bonsai-val egy egyszerű téglalapot vagy egy kört hozhat létre, vagy ha tetszik, a teljes értékű multiplayer animált játék, mint ez. Az Orbit használatával érezheti, hogyan működik a Bonsai élő akcióban, vagy megnézheti néhány ilyen lenyűgöző példát arra, hogy inspirációt készítsen.
3. Sebesség
A sebesség a gyors animációkhoz készült JavaScript könyvtár. A sebesség sebessége az animáció megjelenítésekor hihetetlenül gyors. Összehasonlítva a JQuery-t, sőt a CSS-t. A Velocity API hasonló a jQuery animációjához, kivéve, ha a kulcsszó álnevet használja $ .Velocity () ahelyett $ .Animate (). Ezzel szemben ugyanazokat az animációs kulcsszavakat használhatja, mint például fadeIn és elájulni.
4. Raphael
A RaphaelJS egy olyan könyvtár, amely lehetővé teszi, hogy rajzoljon, valamint animált vektorgrafikus SVG-t a weboldalakon. Támogatja a böngészők széles skáláját egészen az IE6-ig, ami nagyjából teszi a Raphaelt a legmegbízhatóbb JavaScript könyvtárnak a résszel. A RaphaelJS segítségével a Counter Strike-hoz hasonló interaktív analitikai térképeket, világtérképeket és játék interakciókat készíthet.
5. Snap
A SnapSVG egy másik népszerű JavaScript-könyvtár az SVG animációhoz, amelyet a Raphael fejlesztő, Dmitry Baranovskiy fejlesztett ki, valamint az Adobe Web Platform Team-t a helyszínről. Raphael-szel ellentétben a SnapSVG csak a legújabb böngészők számára készült. Ez lehetővé teszi, hogy a könyvtár jelentősen kisebb legyen, mint a Raphael, és támogassa az SVG funkciókat, mint például a vágás és a maszkolás.
6. Lazy Line festő
A Lazy Line Painter egy jQuery plugin az SVG útvonalak animálásához a Vivushoz hasonlóan, a rajzszekvencia animálásához. A rossz hír az, hogy ez a bővítmény csak ezt a különleges dolgot teszi. Ezért, ha SVG-t importál az olyan alkalmazásokból, mint az Illustrator vagy az Inkscape, győződjön meg róla, hogy az SVG-n nincsen kitöltött szín, csak az útvonalak.
7. SVG.js
Az SVG.js egy könnyű könyvtár az SVG manipulálására és animálására. Ezzel a könyvtárral az SVG elem méretét, pozícióját vagy színét animálhatja. Nemcsak animál; további bővítményeket is használhat további funkciók hozzáadásához. Ez a példa az svg.filter.js bővítményt használja a szűrők, mint a Gauss-elmosódás, a deszaturálás, a kontraszt, a szépia stb..
8. Sétány
A sétány három típusú elemet támogat, pálya, vonal, és vonallánc SVG vonalak rajzolására használatos. Itt van egy példa a Polygon-ról, amely a PlayStation 4 konzolvonal animációját mutatja.
