Ang Scalable Vector Graphics (SVG) ay isang format ng imahe na nakasulat sa XML. Sa SVG, maaari kang mag-code ng isang dalawang dimensional na scalable graphics. Pagkatapos, maaari mong ipatupad at baguhin ang mga ito sa CSS at JavaScript.
Pinapayagan ng SVG ang tatlong uri ng mga graphics: mga hugis ng vector (tuwid at hubog na mga linya sa lahat ng mga direksyon at hugis), mga imahe, at teksto. Dahil sa iba't ibang mga kakayahan nito, lumilikha ang mga taga-disenyo ng web sa SVG upang makagawa ng mga kumplikadong mga animation. Madali silang mai-install, huwag mawalan ng kalidad kapag binago ang laki, at hindi nangangailangan ng anumang mga third-party na app upang gumana.
Dahil ang mga animation ay lumalaki pa rin sa katanyagan, ang karamihan ay hindi pamilyar sa kanila. Ang artikulong ito ay i-highlight ang 20 kamangha-manghang mga animation ng SVG na nagpapakita ng potensyal ng format na ito.
1. Mga Icon ng Medikal na SVG sa pamamagitan ng mga kuting
Mabilis na Mga Link
- 1. Mga Icon ng Medikal na SVG sa pamamagitan ng mga kuting
- 2. Hover ni SeanMcCaffery
- 3. Pull Down to Refresh (Paper Plane) ni Nikolay Talanov
- 4. Patuloy lamang sa Pagpunta ni Diaco M. Lotfollahi
- 5. Mga Filter ng SVG Naidagdag sa Video ng HTML5
- 6. Palaisipan Itinaas ng Jigsaw
- 7. Liner Gradient ni Patrick Young
- 8. Maglakbay Natin sa pamamagitan ng jjperezaguinaga
- 9. Orasan ni Mohamad Mohebifar
- 10. Ang Mga Animated na Icon ni Luigi De Rosa
- 11. Lahat ng Mga aparato sa SVG ni Chris Gannon
- 12. Waterfall ni Chris Gannon
- 13. Plant Generator ni Blake Bowen
- 14. Naka-click na Icon ni Hamish Williams
- 15. Bagong cake ni Marco Barría
- 16. Paper Shredder ni Chris Gannon
- 17. Mababang PolyLion ni GRAYGHOST
- 18. Hourglass Loader ni Leela
- 19. Nakikiramay na Baka ni Sarah Drasner
- 20. Mag-aaral ni Domany
- Ikaw na
Ang mainit at makinis na animation ay mahusay para sa anumang website na may kaugnayan sa kalusugan. Habang naglilista ka sa iba't ibang mga thread, malilitaw ang mga imahe. Ang sasakyan ng ambulansya o ang atom ay magtatayo, ang mata ay magbubukas, at ang doktor ay lalabas. Ang animation na ito ay nagpapakita ng lahat ng kasiyahan at dinamismo ng SVG.
Link
2. Hover ni SeanMcCaffery
Universal animation na maaari mong ilagay sa anumang interactive na website. Ang banayad na hitsura ng mga hangganan kapag nag-iiwan ka sa iyo ng isang kasiya-siyang pakiramdam at inaanyayahan kang mag-click sa link.
Link
3. Pull Down to Refresh (Paper Plane) ni Nikolay Talanov
Karaniwan, mai-refresh ang mga pahina kapag "hilahin mo" ang mga ito. Dinadala ito ng animation sa isang bagong antas. Kapag hinila mo upang ilabas ito, maglulunsad ka ng isang eroplano ng papel sa kalangitan. Kung nais mong i-refresh ng iyong mga bisita ang iyong app nang madalas, dapat mong isaalang-alang ang pagdaragdag ng isang animation tulad nito.
4. Patuloy lamang sa Pagpunta ni Diaco M. Lotfollahi
Isang animation ng SVG na nagpapakita ng potensyal ng Scaling Vector. Ang maayos na tumpak na paggalaw ng katawan ng tao ay hypnotizing.
Link
5. Mga Filter ng SVG Naidagdag sa Video ng HTML5
Si Paul Irish mula sa koponan ng Google Chrome ay tiningnan kung paano maaaring baguhin ng SVG ang nilalaman sa labas ng mga graphic vector. Pinagsama niya ang CSS at SVG upang makagawa ng mga kamangha-manghang visual na filter upang ipakita na ang animation ng SVG ay maaaring maging isang mahusay na karagdagan sa isang yari na video.
Link
6. Palaisipan Itinaas ng Jigsaw
Maaari kang gumawa ng mga kamangha-manghang interactive na mga jigsaw puzzle na may SVG animation. Sa halimbawang ito, maaari tayong pumili ng isa sa maraming mga larawan at makita kung paano ito nabubulok sa maraming maliit na piraso ng puzzle. Maaari mo itong gawing muli!
Link
7. Liner Gradient ni Patrick Young
Kung ikaw ay nasa mga ilaw na neon at magagandang mga font, masisiyahan ka sa animation na ito. Ang gawaing ito ay nagpapakita kung paano hindi mo kailangan ang anumang gumagalaw na linya para sa isang napakatalino na animasyon, isang mahusay na font at tamang kulay code na may magagandang epekto.
Link
8. Maglakbay Natin sa pamamagitan ng jjperezaguinaga
Dalawang eroplano at isang mainit na air balloon na umiikot sa mga tanyag na landmark ng mundo. Ang animation na ito ay makulay, maasahin sa mabuti, at pag-pamumulaklak ng isip. Ipinapakita nito ang lahat ng maaari mong gawin kung ikaw ay bihasa sa SVG.
Link
9. Orasan ni Mohamad Mohebifar
Isang simpleng animation ng SVG ng isang gumagalaw na orasan na nagpapakita ng kasalukuyang oras. Ang nakapapawi ng paggalaw ng mga payo at minimalistic na disenyo ay gumagawa ng mga kababalaghan para sa animation na ito.
Link
10. Ang Mga Animated na Icon ni Luigi De Rosa
Kung mag-hover ka sa mga icon na ito ay mag-trigger ka ng mga animation, na kung saan ay simple ngunit epektibo. Maaari mong makita na hindi mo kailangang gumawa ng mga kababalaghan upang makagawa ng isang kahanga-hangang animated na icon.
11. Lahat ng Mga aparato sa SVG ni Chris Gannon
Isang one-take animation na napupunta sa lahat ng mga matalinong aparato na ginagamit namin sa pinaka malikhaing paraan. Ang desktop ay magiging isang laptop, laptop sa isang tablet, pagkatapos ay sa isang smartphone.
Link
12. Waterfall ni Chris Gannon
Ang isa pa sa pamamagitan ni Chris Gannon, ito ay isang maayos na pagpapakita ng isang nakakainis na ilalim ng talon. Ang paggalaw ng tubig ay malinis, at makikita mo ang mga maliliit na patak ng tubig na naghahatid ng pag-iwan ng mga hangganan ng animation upang gawing mas makatotohanang ang lahat.
Link
13. Plant Generator ni Blake Bowen
Ngayon ang isang ito ay iba pa. Kapag nag-click ka sa pindutan ng 'Lumikha', makikita mo ang mga halaman na tumataas at lumalaki. Ngunit sa tuwing mag-click ka, magkakaroon ng iba't ibang mga pattern.
Link
14. Naka-click na Icon ni Hamish Williams
Ang isa pang interactive na SVG na nag-trigger ng isang animation sa sandaling mag-click ka dito. Ang isang ito ay magsisimula ng "Magpadala" animation sa sandaling ma-click mo ito.
Link
15. Bagong cake ni Marco Barría
Ang kagiliw-giliw na animation na nagpapakita ng paggawa ng isang layer ng cake sa pamamagitan ng layer. Ito ay isang kahanga-hangang SVG animation na angkop para sa isang kaarawan card.
16. Paper Shredder ni Chris Gannon
Kung masiyahan ka sa panonood ng shredding ng papel, masisiyahan ka sa animation na ito na naglalarawan ng isang machine shredding paper sa pamamagitan ng papel na walang limitasyong beses sa isang seamless na pagkakasunud-sunod.
Link
17. Mababang PolyLion ni GRAYGHOST
Ito ay isang paglalarawan at pamumulaklak ng pag-iisip na nagbibigay ng isip na naglalarawan sa ulo ng leon na lumilitaw at nawawala sa anyo ng mga animated na polygons.
Link
18. Hourglass Loader ni Leela
Ang isa pang epektibong animation na gumagamit lamang ng SVG. Tuwing 5 segundo, ang hourglass ay babaliktad at magsisimula ng isang bagong ikot.
Link
19. Nakikiramay na Baka ni Sarah Drasner
Ito ay isang nakakatawang interactive na animation na nagbibigay-daan sa iyo upang mag-click sa isang baka at i-drag ito sa paligid ng buwan habang tinitingnan ito ng isang nakagulo na astronaut.
20. Mag-aaral ni Domany
Ang isang masigasig na mag-aaral ay lilitaw na handa upang matuto! Ito ay isang mahusay na animation kung saan ang mga pahina ng libro ay nakabukas nang maayos. Walang kumikislap mula sa mag-aaral, ngunit ito ay pa rin isang perpektong malinis na animation upang tapusin ang listahang ito.
Link
Ikaw na
Ano ang iyong mga paboritong mga animation ng SVG na hindi kasama sa listahang ito? Ibahagi ang iyong mga pick sa mga komento sa ibaba!
