8 JavaScript-kirjastot animoimaan SVG tä
SVG on resoluutiosta riippumaton kuva. Se tarkoittaa sitä näyttää hyvältä millä tahansa näytön tyypillä ilman, että laatu heikkenee. Tämän lisäksi voit myös tehdä SVG: stä eläväksi joitakin animaatiovaikutuksia.
Eräässä aiemmin SVG-sarjassa olevasta postista olemme osoittaneet, miten SVG-animaatio toimii
Lisää sivustosta Hongkiat.com:
- Animate.css - CSS3-kirjasto luo animaatiota helposti
- Animoi teksti helposti Textillate.js: n avulla
- Miten muuntaa Photoshop-teksti SVG: ksi
- Animoi piilottaa ja liu'uttaa sisältöä jQueryn avulla
1. Vivus
Vivus on JavaScript-kirjasto antaa SVG: lle ulkonäön. Vivus toimii ulos laatikosta ilman mitään riippuvuuksia (esim. JQuery). Yksinkertaisesti sisältyy .js HTML-tiedostosi ja määritä haluamasi SVG-elementti sekä joitakin esiasetusvaihtoehtoja animaation aloittamiseksi heti.
Esimerkiksi:
uusi Vivus ('svg-element', type: 'oneByOne', kesto: 200)); Edellä mainittu animoi SVG-elementin, jossa on SVG-elementti ID 200 millisekunnissa. Tämän SVG: n jokainen elementti vedetään peräkkäin tämän aikakehyksen aikana.
2. Bonsai
Bonsai on tehokas JavaScript-kirjasto, jonka avulla voit piirtää, elää sekä animoida graafisia elementtejä verkkosivuilla. Se tukee sekä HTML5-grafiikkatyyppiä Canvas että SVG. Bonsain avulla voit rakentaa yksinkertaisen suorakulmion tai ympyrän tai jos haluat, a täysimittainen moninpeli animoitu peli, kuten tämä. Voit käyttää Orbitia tuntemaan, miten Bonsai toimii suorassa toiminnassa tai tutustu pari näistä vaikuttavista esimerkeistä inspiroimaan.
3. Nopeus
Velocity on JavaScript-kirjasto, joka on rakennettu nopeasti animaatioihin. Nopeuden nopeus animaation antaessa on uskomattoman nopea. Se on parempi kuin jQuery ja jopa CSS. Velocityn API toimii samalla tavalla kuin jQueryn animaatio, paitsi että se käyttää avainsanan aliaksia $ .Velocity () sijasta $ .Animate (). Sitä paitsi voit käyttää täsmälleen samoja animaatiokoodeja, kuten FadeIn ja kadota näkyvistä.
4. Raphael
RaphaelJS on kirjasto, jonka avulla voit piirtää sekä animoida vektorigrafiikkaa SVG verkkosivuilla. Se tukee laajaa valikoimaa selaimia aina IE6: een asti, mikä tekee Raphaelista paljon luotettavimman JavaScript-kirjaston kapealla. RaphaelJS: n avulla voit rakentaa vuorovaikutteisia analyyttisiä kaavioita, maailmankarttoja ja pelin vuorovaikutuksia, jotka ovat samanlaisia kuin Counter Strike.
5. Napsauta
SnapSVG on toinen suosittu JavaScript-kirjasto SVG-animaatioon, jonka on kehittänyt Raphaelin kehittäjä, Dmitry Baranovskiy, sekä Adobe Web Platform -ryhmän alusta asti. Toisin kuin Raphael, SnapSVG on tarkoitettu vain uusimmille selaimille. Näin kirjasto voi olla huomattavasti pienempi kuin Raphael ja tukea SVG-ominaisuuksia, kuten leikkaamista ja peittämistä.
6. Lazy Line Painter
Lazy Line Painter on jQuery-plugin SVG-polkujen animoimiseksi animoimalla piirtosekvenssi, samanlainen kuin Vivus. Huono uutinen on, että tämä plugin tekee vain tämän nimenomaisen asian. Näin ollen, kun tuodaan SVG: tä esimerkiksi Illustratorin tai Inkscapen sovelluksista, varmista, että SVG: ssä ei ole täyttöväriä, vain polkuja.
7. SVG.js
SVG.js on kevyt kirjasto SVG: n manipuloimiseksi ja animoimiseksi. Tämän kirjaston avulla voit animoida SVG-elementin koon, sijainnin tai värin. Se ei vain animoi; Voit myös lisätä ylimääräisiä laajennuksia lisätäksesi lisätoimintoja. Tässä esimerkissä käytetään svg.filter.js-pluginia suodattimien, kuten gaussin hämärtymisen, desaturaation, kontrastin, seepian jne..
8. Kävelytie
Kävelytie tukee kolmen tyyppisiä elementtejä, polku, linja, ja polyline käytetään SVG-viivojen piirtämiseen. Tässä on esimerkki Polygonista, joka näyttää PlayStation 4 -konsolilinjan animaation.
