Scalable Vector Graphics (SVG) yra vaizdo formatas, parašytas XML formatu. Naudodami SVG galite užkoduoti dvimatę keičiamą grafiką. Tada galėsite juos įdiegti ir modifikuoti CSS ir „JavaScript“.
SVG leidžia naudoti trijų tipų grafiką: vektorines figūras (tiesias ir lenktas linijas visomis kryptimis ir formomis), vaizdus ir tekstą. Dėl įvairių galimybių web dizaineriai kreipiasi į SVG, norėdami sukurti sudėtingas animacijas. Juos lengva įdiegti, neprarandate kokybės keičiant jų dydį ir nereikalaujama, kad veiktų trečiųjų šalių programos.
Kadangi animacija vis dar populiarėja, dauguma jų nėra susipažinę. Šis straipsnis išryškins 20 fantastiškų SVG animacijų, parodančių šio formato galimybes.
1. Medicininės SVG piktogramos, pagamintos iš kittonų
Greitos nuorodos
- 1. Medicininės SVG piktogramos, pagamintos iš kittonų
- 2. Užveskite pelės žymeklį „SeanMcCaffery“
- 3. Nuspauskite, kad atnaujintumėte (popierinė plokštuma), pateikė Nikolajus Talanovas
- 4. Tiesiog tęsk Diaco M. Lotfollahi
- 5. SVG filtrai pridedami prie HTML5 vaizdo įrašo
- 6. Dėlionė
- 7. Patriko Youngo linijinis gradientas
- 8. Keliaukime jjperezaguinaga
- 9. Laikrodis pagal Mohamadą Mohebifarą
- 10. Animacinės piktogramos, kurias sukūrė Luigi De Rosa
- 11. Visi SVG įrenginiai - Chrisas Gannonas
- 12. Chriso Gannon krioklys
- 13. Augalų generatorius Blake'as Bowenas
- 14. Paspaudžiama piktograma, kurią pateikė Hamishas Williamsas
- 15. Naujas pyragas - Marco Barría
- 16. Chriso Gannono popieriaus smulkintuvas
- 17. Žemas „PolyLion“, sukurtas GRAYGHOST
- 18. „Hellaglass“ krautuvas „Leela“
- 19. Sarah Drasner atsakinga karvė
- 20. Studentas pagal Domaniją
- Tavo eilė
Ši šilta ir sklandi animacija puikiai tinka bet kuriai su sveikata susijusiai svetainei. Kol sudarysite sąrašą per įvairias gijas, vaizdai pasirodys subtiliai. Greitosios pagalbos automobilis ar atomas konstruos, akis atsidarys, o gydytojas iššoks. Ši animacija parodo visas SVG linksmybes ir dinamiškumą.
Nuoroda
2. Užveskite pelės žymeklį „SeanMcCaffery“
Universali animacija, kurią galite įdėti į bet kurią interaktyvią svetainę. Subtilus sienų apipavidalinimas palieka malonų pojūtį ir kviečia spustelėti nuorodą.
Nuoroda
3. Nuspauskite, kad atnaujintumėte (popierinė plokštuma), pateikė Nikolajus Talanovas
Paprastai puslapiai atnaujinami, kai „nustumiate“ juos. Ši animacija pakelia tai į naują lygį. Nuleisdami žemyn, paleisite į dangų popierinę plokštumą. Jei norite, kad lankytojai dažnai atnaujintų jūsų programą, turėtumėte įtraukti tokią animaciją.
4. Tiesiog tęsk Diaco M. Lotfollahi
SVG animacija, parodanti mastelio keitimo vektoriaus galimybes. Sklandus tikslus žmogaus kūno judesys hipnotizuoja.
Nuoroda
5. SVG filtrai pridedami prie HTML5 vaizdo įrašo
Paulius Irishas iš „Google Chrome“ komandos nagrinėjo, kaip SVG gali modifikuoti turinį ne tik už vektorinės grafikos. Jis sujungė CSS ir SVG, kad padarytų nuostabius vaizdinius filtrus, kurie parodytų, kad SVG animacija gali būti puikus priedas prie paruošto vaizdo įrašo.
Nuoroda
6. Dėlionė
Naudodamiesi SVG animacija, galite padaryti nuostabių interaktyvių dėlionių. Šiame pavyzdyje galime pasirinkti vieną iš daugelio paveikslėlių ir pamatyti, kaip jis dekonstruoja daugelį mažų dėlionės dalių. Jį taip pat galite rekonstruoti!
Nuoroda
7. Patriko Youngo linijinis gradientas
Jei mėgstate neonines lemputes ir gražius šriftus, jums patiks ši animacija. Šis darbas parodo, kaip genialiai animacijai nereikia jokių judančių linijų, o tik puikų šriftą ir tinkamą spalvų kodą su gradiento efektu.
Nuoroda
8. Keliaukime jjperezaguinaga
Du lėktuvai ir karšto oro balionas sukasi aplink populiarius pasaulio orientyrus. Ši animacija yra spalvinga, optimistiška ir pribloškianti. Tai rodo viską, ką galite padaryti, jei išmanote SVG.
Nuoroda
9. Laikrodis pagal Mohamadą Mohebifarą
Paprasta judančio laikrodžio SVG animacija, rodanti esamą laiką. Raminantis rodyklių judėjimas ir minimalistinis dizainas daro stebuklus šiai animacijai.
Nuoroda
10. Animacinės piktogramos, kurias sukūrė Luigi De Rosa
Jei užveskite pelės žymeklį virš šių piktogramų, suaktyvinsite paprastas, bet veiksmingas animacijas. Galite pastebėti, kad jums nereikia daryti stebuklų, kad padarytumėte įspūdingą animacinę piktogramą.
11. Visi SVG įrenginiai - Chrisas Gannonas
Viena animacija, apimanti visus išmaniuosius įrenginius, kuriuos naudojame kūrybiškiausiai. Stalinis kompiuteris pavirs į nešiojamąjį kompiuterį, nešiojamasis kompiuteris - į planšetinį kompiuterį, o tada į išmanųjį telefoną.
Nuoroda
12. Chriso Gannon krioklys
Dar vienas Chriso Gannono filmas - tai tvarkingas putojančio krioklio dugno demonstravimas. Vanduo juda tvarkingai, ir jūs galite pamatyti mažus purslų vandens lašus, išeinančius iš animacijos sienų, kad viskas atrodytų tikroviškiau.
Nuoroda
13. Augalų generatorius Blake'as Bowenas
Dabar tai yra kažkas kita. Spustelėję mygtuką „Sukurti“ pamatysite augalus kylančius ir augančius. Bet kiekvieną kartą spustelėjus, susidarys skirtingi modeliai.
Nuoroda
14. Paspaudžiama piktograma, kurią pateikė Hamishas Williamsas
Kitas interaktyvus SVG, kuris suaktyvina animaciją, kai tik ją spustelite. Kai tik ją spustelėsite, ji inicijuos „Siųsti“ animaciją.
Nuoroda
15. Naujas pyragas - Marco Barría
Įdomi animacija, parodanti torto darymą sluoksniais po sluoksnius. Tai įspūdinga SVG animacija, tinkanti gimtadienio kortai.
16. Chriso Gannono popieriaus smulkintuvas
Jei jums patinka žiūrėti popieriaus smulkinimą, jums patiks ši animacija, vaizduojanti mašiną, neribotą laiką susmulkinant popierių, besiūlius veiksmus.
Nuoroda
17. Žemas „PolyLion“, sukurtas GRAYGHOST
Tai mintis atspindinti iliustracija ir animacija, vaizduojanti liūto galvą, rodomą ir dingusią animacinių daugiakampių pavidalu.
Nuoroda
18. „Hellaglass“ krautuvas „Leela“
Dar viena veiksminga animacija, kurioje naudojama tik SVG. Kas 5 sekundes smėlio laikrodis apsivers aukštyn kojomis ir pradės naują ciklą.
Nuoroda
19. Sarah Drasner atsakinga karvė
Tai juokinga interaktyvi animacija, leidžianti spustelėti karvę ir tempti ją aplink Mėnulį, kol į ją žiūrės nesuprastas astronautas.
20. Studentas pagal Domaniją
Entuziastingas studentas pasirodo pasirengęs mokytis! Tai puiki animacija, kai knygų puslapiai tvarkingai sukasi. Jokio mirksėjimo nuo studento pusės, bet tai vis tiek yra visiškai tvarkinga animacija, kad būtų sudarytas šis sąrašas.
Nuoroda
Tavo eilė
Kokios yra jūsų mėgstamiausios SVG animacijos, neįtrauktos į šį sąrašą? Pasidalykite savo pasirinkimais komentaruose žemiau!
