JavaScript ir pēdējais no veidiem, kā mēs apskatīsim SVG animēšanu. Mēs skatījāmies uz CSS, kas ir lielisks un diezgan ērts, taču tas nevar veikt virkni SVG īpašību, kuras jūs varētu vēlēties animēt. Tad mēs apskatījām SMIL, kas ir deklaratīva sintakse tieši pašā SVG kodā, kas ir spēcīgāks ar to, ka var animēt vairāk lietu, ieskaitot paša elementa formu.
JavaScript var darīt visu, ko var darīt tas pats, un darīt to labi. Tas vienkārši maksā vai nu pats, rakstot patiešām sarežģītu kodu, vai bibliotēkas pieskaitāmās izmaksas, kas jums palīdzēs. Bet, kad esat izveidojis un darbojas, sintakse var būt patiešām brīnišķīga un draudzīga animācijām, un sniegums faktiski var būt izcils.
Vēl viena priekšrocība, izmantojot JavaScript SVG animācijām, ir atbalsts. Animējot SVG, ir daudz savādību. Dažas pārlūkprogrammas neatbalsta elementu pārveidošanu. Dažas pārlūkprogrammas, izmantojot lapu tālummaiņu, dara dīvainas lietas. Daži ir pretrunā ar transformācijas izcelsmi. JavaScript problēmas bieži palīdz novērst šīs problēmas.
Lai gan mēs runājam tieši par animāciju, daudzas JavaScript SVG bibliotēkas ir par darbu ar SVG kopumā. Viņi var to izveidot un manipulēt, piekļūt elementa īpašībām, mainīt tos utt. Kinda piemēram, pievienojot SVG spēcīgāku API.
Snag.svg - “jQuery for SVG”
Snap.svg izmantošanas pamatpiemērs:
Skatiet Kriss Koijers (@chriscoyier) Pen BhHix vietnē CodePen.
Vēl viena lieta, ko mēs izdarījām šajā videoklipā ar Snap.svg, ir konvertēt šo CSS animācijas pildspalvu uz Snap.svg, mācot mums, ka mēs varam izmantot Snap.svg, lai strādātu ar jau ievietotajiem SVG. Adobe paši ir apkopojuši vairākus piemērus.
Raphael - vecāka bibliotēka no tā paša radītāja kā Snap.svg
SVG.js - “Viegla bibliotēka SVG manipulēšanai un animēšanai.” Lūk, pulksteņa demonstrācija, kuru mēs apskatījām, parādot, kā darbojas šīs animācijas, ātri manipulējot ar DOM.
D3.js - “D3.js ir JavaScript bibliotēka, lai manipulētu ar dokumentiem, pamatojoties uz datiem. D3 palīdz jums atdzīvināt datus, izmantojot HTML, SVG un CSS. ” Šeit ir apmācība par SVG veidošanas sākšanu ar to un vēl viena animācijas ieviešana ar to.
GreenSock - “Īpaši augstas veiktspējas profesionālas klases animācija mūsdienu tīmeklim”. GreenSock kopumā ir par animācijām tīmeklī, taču atbalsta SVG. Šeit ir pildspalva, kurā varat redzēt, kā tā darbojas.
Velocity.js - “Paātrināta JavaScript animācija.” Arī bibliotēka par animāciju tīmeklī kopumā, kas notiek, lai atbalstītu SVG. Džulians Šapiro to izveidoja un ir rakstījis par to, kāpēc JavaScript animācija faktiski var būt visizcilākais animācijas stils, kā arī par to, kā darbojas Velocity.js. Šeit ir ļoti vienkārša demonstrācija, kas animē dažas SVG raksturīgas īpašības.
Jūs varat arī brīvi izvēlēties to pats, izmantojot JavaScript animācijas bez ietvara palīdzības. Atcerieties, ka SVG ir iekļauts DOM, tāpēc jums ir pieejama visa parastā DOM API lieta. Kaut kā jums, kā jums nav nepieciešams jQuery, lai strādātu ar DOM, tas bieži vien to atvieglo. Lūk, piemērs, kas lietas dara savā veidā, kas ir diezgan interesants.