„JavaScript“ yra paskutinis būdas aptarti SVG animavimą. Mes pažvelgėme į CSS, kuris yra puikus ir gana patogus, tačiau jis negali atlikti daugybės SVG savybių, kurias galbūt norėsite animuoti. Tada mes pažvelgėme į SMIL, kuris yra deklaratyvi sintaksė pačiame SVG kode, kuris yra galingesnis tuo, kad jis gali animuoti daugiau dalykų, įskaitant paties elemento formą.
„JavaScript“ gali padaryti viską, ką gali padaryti ir tas, ir tas. Tai tiesiog kainuoja arba pats parašydamas labai sudėtingą kodą, arba bibliotekos pridėtines išlaidas, kurios jums padės. Bet kai tik jūs būsite pasirengę, sintaksė gali būti tikrai nuostabi ir draugiška animacijoms, o našumas iš tikrųjų gali būti aukščiausio lygio.
Kitas „JavaScript“, skirtos SVG animacijoms, privalumas yra palaikymas. Animuojant SVG yra daugybė keistenybių. Kai kurios naršyklės nepalaiko elementų transformacijų. Kai kurios naršyklės keisdami daro puslapių mastelį. Kai kurie yra nesuderinami su transformacijos kilme. „JavaScript“ bibliotekos dažnai padeda išspręsti šias problemas.
Nors kalbame būtent apie animaciją, daugelis „JavaScript“ SVG bibliotekų yra apie darbą su SVG apskritai. Jie gali tai kurti ir manipuliuoti, prieiti prie elemento ypatybių, jas pakeisti ir pan. Tikrai kaip pridėti tvirtesnę API prie SVG.
„Snag.svg“ - „jQuery for SVG“
Pagrindinis „Snap.svg“ naudojimo pavyzdys:
Žiūrėkite Chriso Coyier (@chriscoyier) „Pen BhHix“ svetainėje „CodePen“.
Kitas dalykas, kurį padarėme šiame vaizdo įraše su „Snap.svg“, yra konvertuoti šią CSS animacijos rašiklį į „Snap.svg“, mokydamas mus naudoti „Snap.svg“, kad galėtume dirbti su jau esančiu tiesioginiu SVG. „Adobe“ patys surinko daugybę pavyzdžių.
Raphaelis - senesnė biblioteka iš to paties kūrėjo, kaip ir „Snap.svg“
SVG.js - „Lengva biblioteka, skirta manipuliuoti ir animuoti SVG.“ Štai laikrodžio demonstracija, į kurią žiūrėjome, rodo, kaip šios animacijos veikia greitai manipuliuodamos DOM.
D3.js - „D3.js yra„ JavaScript “biblioteka, skirta manipuliuoti dokumentais, pagrįstais duomenimis. D3 padeda atgaivinti duomenis naudojant HTML, SVG ir CSS. “ Čia yra pamoka apie tai, kaip pradėti kurti SVG, ir dar vienas pristatymas animuoti su juo.
„GreenSock“ - „Itin aukštos kokybės, profesionalaus lygio animacija šiuolaikiniam internetui“. „GreenSock“ yra apie animacijas internete, tačiau palaiko SVG. Čia yra rašiklis, kuriame galite pamatyti, kaip jis veikia.
Velocity.js - „Pagreitinta„ JavaScript “animacija“. Taip pat biblioteka apie animaciją internete, kuri palaiko SVG. Julianas Shapiro jį sukūrė ir parašė apie tai, kodėl „JavaScript“ animacija iš tikrųjų gali būti efektyviausias animacijos stilius, taip pat apie tai, kaip veikia „Velocity.js“. Čia pateikiama labai paprasta demonstracinė versija, animuojanti kai kurias specifines SVG savybes.
Jūs taip pat galite laisvai pasirinkti patys naudodami „JavaScript“ animacijas be sistemos pagalbos. Atminkite, kad tiesioginis SVG yra DOM, todėl jums prieinami visi įprasti DOM API dalykai. Tokie kaip jūs, kaip jums tikrai nereikia „jQuery“, kad dirbtumėte su DOM, tai tiesiog palengvina. Štai pavyzdys, kuris viską daro savaip, gana įdomu.