8 „JavaScript“ bibliotekos „Animate SVG“
SVG yra nepriklausomas grafinis vaizdas. Tai reiškia, kad ji bus atrodo gerai bet kokio tipo ekrane, nepatiriant kokybės praradimo. Be to, SVG taip pat gali tapti gyvybinga su kai kuriais animacijos efektais.
Vienoje iš ankstesnių mūsų SVG serijos pranešimų mes parodėme, kaip veikia SVG animacija
Daugiau apie „Hongkiat.com“:
- Animate.css - CSS3 biblioteka, kad būtų galima lengvai kurti animaciją
- Lengvai animuokite tekstą su „Textillate.js“
- Kaip konvertuoti Photoshop tekstą į SVG
- Animuoti paslėpti ir skaidrių turinį su jQuery
1. Vivus
„Vivus“ yra „JavaScript“ biblioteka suteikia jūsų SVG išvaizdą. „Vivus“ veikia iš dėžutės be jokių priklausomybių (pvz., „JQuery“). Tiesiog įtraukite .js failą HTML ir pažymėkite SVG elementą, kurį norite animuoti, kartu su kai kuriomis iš anksto nustatytomis parinktimis, kad būtų galima pradėti animaciją iš karto.
Pavyzdžiui:
naujas „Vivus“ („svg elementas“, tipas: „oneByOne“, trukmė: 200));
Pirmiau bus animuotas mano SVG elementas, turintis svg-elementas ID 200 milisekundžių. Kiekvienas šio SVG elementas bus sudarytas vienas po kito per tą laiką.
2. Bonsai
„Bonsai“ yra galinga „JavaScript“ biblioteka, leidžianti piešti, morph ir animuoti grafinius elementus tinklalapiuose. Jis palaiko tiek HTML5 grafinio tipo Canvas, tiek SVG. Su „Bonsai“ galite sukurti paprastą stačiakampį ar apskritimą arba, jei norite, a visavertis multiplayer animacinis žaidimas, kaip šis. Jūs galite naudoti „Orbit“, kad pajustumėte, kaip „Bonsai“ veikia gyvai, arba išbandykite keletą šių įspūdingų pavyzdžių, kad galėtumėte įkvėpti.
3. Greitis
„Velocity“ yra „JavaScript“ biblioteka, sukurta greitai animacijoms. Greičio greitis, kai animacija atliekama, yra neįtikėtinai greitas. Palyginti su JQuery, ir net CSS. „Velocity“ API veikia panašiai kaip animacija jQuery, išskyrus tai, kad ji naudoja raktinio žodžio alias $ .velocity () vietoj $ .animate (). Be to, galite naudoti tuos pačius animacinius raktinius žodžius, kaip fadeIn ir Išnykti.
4. Raphael
RaphaelJS - tai biblioteka, leidžianti piešti ir animuoti vektorinį grafinį SVG tinklalapiuose. Jis palaiko platų naršyklių asortimentą iki IE6, o „Raphael“ yra labai patikima „JavaScript“ biblioteka nišoje. Su „RaphaelJS“ galite sukurti interaktyvias analitines diagramas, pasaulio žemėlapius ir žaidimų sąveikas, panašias į „Counter Strike“.
5. Snap
„SnapSVG“ yra dar viena populiari „JavaScript“ biblioteka SVG animacijai, kurią sukūrė „Raphael“ kūrėjas Dmitrijus Baranovskis, kartu su „Adobe“ interneto platformos komanda nuo pat pradžių. Skirtingai nei Raphael, „SnapSVG“ skirta tik naujausioms naršyklėms. Tai leidžia bibliotekai būti žymiai mažesnei nei Raphael ir palaikyti SVG funkcijas, pvz., Iškirpimą ir maskavimą.
6. Lazy Line Painter
„Lazy Line Painter“ - tai jQuery įskiepis, skirtas animuoti SVG kelius, kad animuoti piešimo seką, panašią į „Vivus“. Blogos naujienos yra tai, kad šis įskiepis daro tik tai labai specifinį dalyką. Taigi, kai importuojate SVG iš programų, pvz., „Illustrator“ ar „Inkscape“, įsitikinkite, kad jūsų SVG nėra kairiosios spalvos, tik keliai.
7. SVG.js
SVG.js yra lengva biblioteka, skirta manipuliuoti ir animuoti SVG. Naudodami šią biblioteką galėsite suaktyvinti SVG elemento dydį, padėtį arba spalvą. Jis ne tik animuoja; taip pat galite taikyti papildomus priedus, kad pridėtumėte papildomų funkcijų. Šiame pavyzdyje naudojamas svg.filter.js įskiepis, kad filtrui, pvz., „Gaussian“ neryškumui, desaturavimui, kontrastui, sepijai ir pan..
8. Pėsčiųjų takas
„Walkway“ palaiko trijų tipų elementus, kelias, linija, ir linija naudojamas SVG linijoms piešti. Čia yra pavyzdys iš Polygono, kuriame rodoma „PlayStation 4“ konsolės linijos animacija.
