JavaScript on viimeinen tapa käsitellä SVG: n animointia. Tarkastelimme CSS: ää, joka on hieno ja melko mukava, mutta se ei voi tehdä useita SVG-ominaisuuksia, jotka haluat ehkä animoida. Sitten tarkastelimme SMIL: ää, joka on deklaratiivinen syntaksin itse SVG-koodissa, joka on tehokkaampi, koska se voi animoida enemmän asioita, mukaan lukien elementin muoto.
JavaScript voi tehdä kaiken, mitä kumpikin näistä voi tehdä, ja tehdä sen hyvin. Se maksaa vain joko itse kirjoittamalla todella monimutkaisen koodin tai kirjaston yleiskustannukset auttamaan sinua. Mutta kun olet käynnissä, syntaksi voi olla todella upea ja ystävällinen animaatioille, ja suorituskyky voi olla huippuluokkaa.
Toinen etu JavaScriptiä SVG-animaatioille käyttämisessä on tuki. SVG: n animoinnissa on paljon huolenaiheita. Jotkin selaimet eivät tue elementtien muunnoksia. Jotkut selaimet tekevät outoja asioita sivun zoomauksella. Jotkut ovat ristiriidassa muuntajan alkuperän kanssa. JavaScript-kirjastot auttavat usein näissä ongelmissa.
Vaikka puhumme nimenomaan animaatiosta, monet JavaScript SVG -kirjastot käsittelevät yleensä SVG: tä. He voivat luoda ja manipuloida sitä, käyttää ominaisuuksia elementistä, muuttaa niitä jne. Kinda kuin lisäämällä vankemman API: n SVG: hen.
Snag.svg - “jQuery SVG: lle”
Perustapa Snap.svg: n käytöstä:
Katso Chris Coyierin (@chriscoyier) Pen BhHix -koodia CodePenistä.
Toinen asia, jonka teimme tässä videossa Snap.svg: n kanssa, on muuntaa tämä CSS-animaatiokynä Snap.svg-tiedostoksi ja opettaa meille, että voimme käyttää Snap.svg-tiedostoa työskennelläksesi jo sivulla olevan SVG: n kanssa. Adobe on itse kerännyt useita esimerkkejä.
Raphael - vanhempi kirjasto samalta luojalta kuin Snap.svg
SVG.js - "Kevyt kirjasto SVG: n manipuloimiseksi ja animoimiseksi." Tässä on kellodemo, jota tarkastelimme, ja näyttää kuinka nämä animaatiot toimivat manipuloimalla nopeasti DOM: ää.
D3.js - “D3.js on JavaScripti-kirjasto tietojen manipulointiin. D3 auttaa sinua herättämään tietoja eloon HTML: n, SVG: n ja CSS: n avulla. " Tässä on opetusohjelma SVG: n luomisen aloittamiseen sen kanssa ja toinen animointi sen kanssa.
GreenSock - "Erittäin korkean suorituskyvyn ammattilaistasoinen animaatio modernille verkolle." GreenSock koskee animaatioita verkossa yleensä, mutta tukee SVG: tä. Tässä on kynä, josta näet miten se toimii.
Velocity.js - "Nopeutettu JavaScript-animaatio." Myös kirjasto, joka kertoo animaatiosta verkossa, joka tukee SVG: tä. Julian Shapiro loi sen ja on kirjoittanut, miksi JavaScript-animaatio voi todella olla kaikkein suorituskykyisin animaatiotyyli sekä kuinka Velocity.js toimii. Tässä on hyvin yksinkertainen demo, joka animoi joitain SVG-spesifisiä ominaisuuksia.
Voit myös vapaasti mennä siihen itse JavaScript-animaatioilla ilman kehyksen apua. Muista, että SVG on in DOM, joten kaikki tavalliset DOM API -asiat ovat käytettävissäsi. Sellainen kuin sinä, kuinka todella et tarvitse jQueryä työskennellessäsi DOM: n kanssa, se vain usein helpottaa sitä. Tässä on esimerkki, joka tekee asiat omalla tavallaan, joka on melko mielenkiintoinen.