8 JavaScript-raamatukogud, et animeerida SVG-d
SVG on eraldusvõimeta graafik. See tähendab seda näeb hea välja mis tahes tüüpi ekraanil, ilma et see peaks kvaliteedi halvenemist kandma. Lisaks sellele saate SVG-d elavdada mõne animatsiooniefektiga.
Ühel varem meie SVG-seeria postitusest oleme näidanud, kuidas SVG animatsioon töötab
Veel Hongkiat.com lehelt:
- Animate.css - CSS3 raamatukogu loob animatsiooni lihtsalt
- Teksti hõlpsalt animeerida Textillate.js-iga
- Kuidas muuta Photoshopi tekst SVG-ks
- Animeerida sisu jQuery'ga peitmiseks ja slaidimiseks
1. Vivus
Vivus on JavaScripti raamatukogu annab teie SVG-le väljanägemise. Vivus töötab kastist välja ilma igasuguste sõltuvusteta (nt jQuery). Lihtsalt lisage see .js HTML-failis ja määrake SVG-element, mida soovite animeerida, ning mõned eelseadistatud valikud, et alustada animatsiooni kohe.
Näiteks:
uus Vivus ('svg-element', tüüp: 'oneByOne', kestus: 200)); Ülaltoodud animeerib minu SVG elementi, millel on svg-element ID 200 millisekundis. Selle SVG iga element koostatakse selle aja jooksul üksteise järel.
2. Bonsai
Bonsai on võimas JavaScript-raamatukogu, mis võimaldab teil joonistada, morphi ja animeerida graafilisi elemente veebilehtedel. See toetab nii HTML5 graafilist tüüpi Canvas kui ka SVG. Bonsai abil saate ehitada lihtsa ristküliku või ringi või kui soovite, a täieõiguslik multiplayer selline animeeritud mäng. Võite kasutada Orbiti, et tunda, kuidas Bonsai toimib otseülekandes või paar neist muljetavaldavatest näidetest, et inspiratsiooni saada.
3. Kiirus
Kiirus on JavaScript-raamatukogu, mis on ehitatud kiireks animatsiooniks. Kiiruse kiirus animatsiooni esitamisel on uskumatult kiire. Võrreldes ületab see jQuery ja isegi CSS. Kiiruse API töötab sarnaselt jQuery animatsiooniga, välja arvatud juhul, kui ta kasutab märksõna alias $ .velocity () selle asemel $ .animate (). See kõrvale jätta saate kasutada täpselt samu animatsiooni märksõnu nagu hajuma ja hääbuma.
4. Raphael
RaphaelJS on raamatukogu, mis võimaldab teil joonistada ja animeerida vektorgraafikat SVG veebilehtedel. See toetab laia valikut brausereid kuni IE6-ni, mis muudab Raphaeli nišis kõige usaldusväärsemaks JavaScript-raamatukoguks. RaphaelJSiga saate luua interaktiivseid analüütilisi diagramme, maailmakaarte ja mängu vastasmõjusid, mis on sarnased Counter Strike omadega.
5. Snap
SnapSVG on teine populaarne JavaScripti raamatukogu SVG animatsioonile, mille on välja töötanud Raphaeli arendaja Dmitri Baranovskiy koos Adobe veebiplatvormi meeskonnaga. Erinevalt Raphaelist on SnapSVG mõeldud ainult uusimatele brauseritele. See võimaldab raamatukogul olla oluliselt väiksem kui Raphael ja toetada SVG funktsioone, nagu lõikamine ja maskeerimine.
6. Lazy Line Painter
Lazy Line Painter on jQuery plugin SVG teede animeerimiseks joonistusjärjestuse animeerimiseks, sarnane Vivusele. Halb uudis on see, et see plugin ainult seda teeb. Seega, kui impordite SVG-sid rakendustest, nagu Illustrator või Inkscape, veenduge, et teie SVG-s ei ole vasakut täitevärvi, vaid teed.
7. SVG.js
SVG.js on kerge raamatukogu SVG manipuleerimiseks ja animeerimiseks. Selle raamatukogu abil saate oma SVG elemendi suuruse, asukoha või värvi animeerida. See mitte ainult ei elavdab; täiendavate funktsioonide lisamiseks saate kasutada ka täiendavaid pluginaid. Selles näites kasutatakse svg.filter.js pluginat filtrite, näiteks gausside hägususe, desaturaadi, kontrastsuse, seepia jne rakendamiseks.
8. Jalutuskäik
Walkway toetab kolme tüüpi elemente, tee, rida, ja polüline SVG joonte joonistamiseks. Siin on näide Polygonist, mis näitab PlayStation 4 konsoolirea animatsiooni.
