JavaScript on viimane viis, kuidas SVG-d animeerime. Vaatasime CSS-i, mis on suurepärane ja üsna mugav, kuid see ei saa teha mitmeid SVG-omadusi, mida võiksite animeerida. Seejärel vaatasime SMIL-i, mis on deklaratiivne süntaks otse SVG-koodis endas, mis on võimsam selle poolest, et saab animeerida rohkem asju, sealhulgas elemendi enda kuju.
JavaScripti abil saab teha kõike, mida kumbki neist saab, ja teha seda hästi. Selle hind on lihtsalt see, kas kirjutate ise tõeliselt keerulise koodi või teid abistavad raamatukogu üldkulud. Kuid kui olete valmis ja töötab, võib süntaks olla animatsioonide jaoks tõesti suurepärane ja sõbralik ning jõudlus võib olla tipptasemel.
Teine eelis JavaScripti kasutamisel SVG-animatsioonide jaoks on tugi. SVG-d animeerides on vaja muretseda palju. Mõni brauser ei toeta elementide teisendamist. Mõni brauser teeb lehe suumimisega imelikke asju. Mõned on vastuolus teisendus-päritoluga. Nende probleemide korral aitavad sageli JavaScripti teegid.
Kuigi me räägime spetsiaalselt animatsioonist, on paljud JavaScripti SVG-teegid SVG-ga üldiselt töötamise kohta. Nad saavad seda luua ja sellega manipuleerida, pääseda juurde elemendi omadustele, neid muuta jne. Kinda moodi meeldib lisada tugevam API SVG-le.
Snag.svg - „jQuery for SVG“
Põhinäide Snap.svg kasutamisest:
Vaadake Code Cenilt Chris Coyieri (@chriscoyier) Pen BhHixi.
Teine asi, mida me selles videos Snap.svg-ga tegime, on selle CSS-i animatsioonpliiatsi teisendamine Snap.svg-ks, õpetades meile, et saame kasutada Snap.svg-d juba lehel oleva SVG-ga töötamiseks. Adobe on ise kogunud mitmeid näiteid.
Raphael - vanem raamatukogu samalt loojalt nagu Snap.svg
SVG.js - „Kerge teek SVG-ga manipuleerimiseks ja animeerimiseks.” Siin on kellademo, mida me vaatasime, näidates, kuidas need animatsioonid DOM-iga kiiresti manipuleerides töötavad.
D3.js - „D3.js on JavaScripti teek andmete põhjal dokumentidega manipuleerimiseks. D3 aitab teil HTML-i, SVG-i ja CSS-i abil andmeid ellu äratada. " Siin on õpetus SVG loomise alustamiseks sellega ja veel üks sissejuhatus sellega animeerimiseks.
GreenSock - „Eriti suure jõudlusega ja professionaalse kvaliteediga animatsioon tänapäevase veebi jaoks.“ GreenSock räägib animatsioonidest veebis üldiselt, kuid toetab SVG-d. Siin on pliiats, kus saate näha, kuidas see töötab.
Velocity.js - „Kiirendatud JavaScripti animatsioon”. Samuti kogu veebis animatsiooni käsitlev teek, mis juhtumisi toetab SVG-d. Julian Shapiro lõi selle ja on kirjutanud sellest, miks JavaScripti animatsioon võib tegelikult olla kõige toimivam animatsioonistiil, samuti sellest, kuidas töötab Velocity.js. Siin on väga lihtne demo, mis animeerib mõned SVG-spetsiifilised omadused.
Võite vabalt ka JavaScripti animatsioonidega seda ise teha, ilma raamistiku abita. Pidage meeles, et SVG on DOMis, nii et kõik tavalised DOM API asjad on teile saadaval. Sarnane nagu sina, kuidas sa tegelikult ei vaja jQueryd DOM-iga töötamiseks, see lihtsalt muudab selle lihtsamaks. Siin on näide, mis teeb asju omamoodi ja on päris huvitav.