8 JavaScript bibliotēkas, lai animētu SVG
SVG ir neatkarīgs grafiskais grafiks. Tas nozīmē, ka tā būs izskatās labi uz jebkura veida ekrāna, nezaudējot kvalitāti. Bez tam jūs varat arī padarīt SVG dzīvus ar dažiem animācijas efektiem.
Vienā no iepriekšējām SVG sērijas vietām mēs esam parādījuši, kā SVG animācija darbojas ar
Vairāk par Hongkiat.com:
- Animate.css - CSS3 bibliotēka, lai viegli izveidotu animāciju
- Viegli animēt tekstu ar Textillate.js
- Kā pārvērst Photoshop tekstu SVG
- Animēt, lai paslēptu un slīdētu saturu ar jQuery
1. Vivus
Vivus ir JavaScript bibliotēka dod jūsu SVG izskatu, kas tiek izvilkts. Vivus darbojas ārpus kastes bez jebkādām atkarībām (piemēram, jQuery). Vienkārši iekļaujiet .js HTML failu, un norādiet SVG elementu, kuru vēlaties animēt, kā arī dažas iepriekš iestatītas iespējas, lai sāktu animāciju uzreiz.
Piemēram:
jauns Vivus ('svg-elements', tips: 'oneByOne', ilgums: 200)); Iepriekšminētais aktivizēs manu SVG elementu, kam ir svg-elements ID 200 milisekundē. Katrs šī SVG elements tiks sastādīts viens pēc otra šajā laika posmā.
2. Bonsai
Bonsai ir jaudīga JavaScript bibliotēka, kas ļauj zīmēt, morfēt un animēt grafiskos elementus tīmekļa lapās. Tā atbalsta gan HTML5 grafisko tipu Canvas, gan SVG. Ar Bonsai jūs varat izveidot vienkāršu taisnstūri vai apli vai, ja vēlaties, a pilntiesīgs multiplayer animēta spēle, kā šī. Jūs varat izmantot Orbit, lai sajustu, kā Bonsai darbojas tiešraides darbībā, vai pārbaudiet pāris šos iespaidīgos piemērus, lai iegūtu iedvesmu no.
3. Ātrums
Ātrums ir JavaScript bibliotēka, kas veidota ātrai animācijai. Ātruma ātrums, padarot animāciju, ir neticami ātrs. Salīdzinot, tas pārspēj jQuery un pat CSS. Velocity API darbojas līdzīgi animācijai jQuery, izņemot to, ka tā izmanto atslēgvārdu alias $ .velocity () tā vietā $ .animate (). Turklāt, jūs varat izmantot tādus pašus animācijas atslēgvārdus kā fadeIn un izgaist.
4. Raphael
RaphaelJS ir bibliotēka, kas ļauj zīmēt un animēt vektora grafiku SVG tīmekļa lapās. Tā atbalsta plašu pārlūkprogrammu klāstu līdz pat IE6, kas diezgan daudz padara Raphael par drošāko JavaScript bibliotēku nišā. Izmantojot RaphaelJS, varat veidot interaktīvas analītiskās diagrammas, pasaules kartes un spēļu mijiedarbības, kas ir līdzīgas Counter Strike.
5. Snap
SnapSVG ir vēl viena populāra JavaScript bibliotēka SVG animācijai, ko izstrādājusi Raphael izstrādātājs Dmitrijs Baranovskis kopā ar Adobe Web platformas komandu no sākuma. Atšķirībā no Raphael, SnapSVG ir domāts tikai jaunākajām pārlūkprogrammām. Tas ļauj bibliotēkai būt ievērojami mazākam par Raphael un atbalstīt SVG funkcijas, piemēram, izgriešanu un maskēšanu.
6. Lazy Line Painter
Lazy Line Painter ir jQuery spraudnis, lai animētu SVG ceļus, lai animētu zīmēšanas secību, līdzīgi kā Vivus. Sliktās ziņas ir tas, ka šis spraudnis dara tikai šo ļoti specifisko lietu. Tādējādi, importējot SVG no lietotnēm, piemēram, Illustrator vai Inkscape, pārliecinieties, ka jūsu SVG nav kreisās krāsas aizpildīšanas, tikai ceļi.
7. SVG.js
SVG.js ir viegla bibliotēka SVG manipulēšanai un animēšanai. Izmantojot šo bibliotēku, varēsiet animēt SVG elementa lielumu, atrašanās vietu vai krāsu. Tas ne tikai animē; varat pievienot arī papildu spraudņus, lai pievienotu papildu funkcijas. Šis piemērs izmanto svg.filter.js spraudni, lai attēlam piemērotu filtrus, piemēram, gaussu izplūšanu, desaturāciju, kontrastu, sēpiju utt..
8. Pastaigas
Walkway atbalsta trīs veidu elementus, ceļš, līnija, un līnija izmanto SVG līniju zīmēšanai. Šeit ir piemērs no Polygon, kas parāda PlayStation 4 konsoles līnijas animāciju.
