Prilagodljiva vektorska grafika (SVG) je oblika slike, zapisana v XML. S SVG lahko kodirate dvodimenzionalno grafiko, ki se lahko poveča. Nato jih lahko implementirate in spremenite v CSS in JavaScript.
SVG omogoča tri vrste grafike: vektorske oblike (ravne in ukrivljene črte v vseh smereh in oblikah), slike in besedilo. Zaradi različnih zmogljivosti se spletni oblikovalci obrnejo na SVG, da bi naredili zapletene animacije. Enostavne so za namestitev, ne izgubijo kakovosti, če ne spremenite velikosti, in ne potrebujejo drugih programov, da delujejo.
Ker animacije še vedno rastejo, jih večina ne pozna. Ta članek bo osvetlil 20 fantastičnih SVG animacij, ki prikazujejo potencial te oblike.
1. Medicinske SVG ikone s kittoni
hitre povezave
- 1. Medicinske SVG ikone s kittoni
- 2. Premaknite kazalec miške pri SeanMcCaffery
- 3. Povlecite navzdol, da osvežite (papirnato letalo) avtorja Nikolaja Talanova
- 4. Samo nadaljujte Diaco M. Lotfollahi
- 5. SVG filtri so dodani v video zapis HTML5
- 6. sestavljanka
- 7. Liner Gradient Patrick Young
- 8. Potujmo po jjperezaguinaga
- 9. Ura Mohamada Mohebifarja
- 10. Animirane ikone Luigi De Rosa
- 11. Vse naprave v SVG avtorja Chrisa Gannona
- 12. Slap Chrisa Gannona
- 13. Generator rastlin Blake Bowen
- 14. Ikona, ki jo je mogoče klikniti Hamish Williams
- 15. Nova torta Marca Barria
- 16. Shredder papirja Chrisa Gannona
- 17. Nizki poliLion podjetja GRAYGHOST
- 18. Nakladalnik urnega stekla podjetja Leela
- 19. Odzivna krava Sarah Drasner
- 20. Študent Domany
- Ti si na vrsti
Ta topla in gladka animacija je odlična za katero koli spletno stran, povezano z zdravjem. Medtem ko listate po različnih nitih, se bodo slike subtilno prikazale. Zgrajen bo rešilni avtomobil ali atom, odprlo se bo oko in zdravnik bo skočil ven. Ta animacija prikazuje vso zabavo in dinamičnost SVG.
Povezava
2. Premaknite kazalec miške pri SeanMcCaffery
Univerzalna animacija, ki jo lahko postavite na katero koli interaktivno spletno mesto. Suptilni videz meja, ko lebdite, pušča zadovoljen občutek in vas vabi, da kliknete povezavo.
Povezava
3. Povlecite navzdol, da osvežite (papirnato letalo) avtorja Nikolaja Talanova
Običajno se strani osvežijo, ko nanje »pritisnete«. Ta animacija to spravi na novo raven. Ko se spustite, da ga sprostite, boste v nebo izstrelili papirnato letalo. Če želite, da obiskovalci pogosto osvežujejo vašo aplikacijo, razmislite o dodajanju takšne animacije.
4. Samo nadaljujte Diaco M. Lotfollahi
SVG animacija, ki prikazuje potencial Scaling Vector. Nemoteno natančno gibanje človeškega telesa hipnotizira.
Povezava
5. SVG filtri so dodani v video zapis HTML5
Paul Irish iz ekipe Google Chrome je pogledal, kako lahko SVG spreminja vsebino zunaj vektorske grafike. Združil je CSS in SVG, da bi naredil neverjetne vizualne filtre, ki bi pokazali, da je SVG animacija lahko odličen dodatek k že pripravljenemu videu.
Povezava
6. sestavljanka
S SVG animacijo lahko naredite neverjetne interaktivne sestavljanke. V tem primeru lahko izberemo eno od številnih slik in si ogledamo, kako razgrajuje številne majhne koščke sestavljanke. Lahko ga tudi rekonstruirate!
Povezava
7. Liner Gradient Patrick Young
Če ste vključeni v neonske luči in čudovite pisave, boste uživali v tej animaciji. To delo prikazuje, kako ne potrebujete premikajočih se linij za sijajno animacijo, le veliko pisavo in pravilno barvno kodo z gradientnim učinkom.
Povezava
8. Potujmo po jjperezaguinaga
Dve letali in balon z vročim zrakom, ki se vrtita okoli priljubljenih svetovnih znamenitosti. Ta animacija je barvita, optimistična in vznemirljiva. Pokaže vse, kar lahko narediš, če si spreten v SVG.
Povezava
9. Ura Mohamada Mohebifarja
Preprosta SVG animacija premikajoče se ure, ki prikazuje trenutni čas. Pomirjujoče gibanje kazalcev in minimalistično oblikovanje se čudita tej animaciji.
Povezava
10. Animirane ikone Luigi De Rosa
Če premaknete miško nad te ikone, sprožite animacije, ki so preproste, a učinkovite. Vidite, da vam ni treba delati čudežev, če želite narediti impresivno animirano ikono.
11. Vse naprave v SVG avtorja Chrisa Gannona
Animacija z enim posnetkom, ki presega vse pametne naprave, ki jih uporabljamo na najbolj kreativen način. Namizje se bo spremenilo v prenosnik, prenosnik v tablični računalnik in nato v pametni telefon.
Povezava
12. Slap Chrisa Gannona
Chris Gannon, to je lepo predstavitev penastega dna slapa. Gibanje vode je lepo in lahko vidite majhne kapljice brizgajoče se vode, ki puščajo meje animacije, da bi bilo vse videti bolj realistično.
Povezava
13. Generator rastlin Blake Bowen
Zdaj je ta nekaj drugega. Ko kliknete gumb 'Ustvari', boste videli rastline, ki rastejo in rastejo. Toda vsakič, ko kliknete, se bodo oblikovali različni vzorci.
Povezava
14. Ikona, ki jo je mogoče klikniti Hamish Williams
Še en interaktivni SVG, ki sproži animacijo, ko kliknete nanjo. Ko kliknete, bo sprožil animacijo »Pošlji«.
Povezava
15. Nova torta Marca Barria
Zanimiva animacija, ki prikazuje izdelavo torte po plasteh. To je impresivna SVG animacija, primerna za rojstnodnevno voščilnico.
16. Shredder papirja Chrisa Gannona
Če uživate v gledanju drobljenja papirja, boste uživali v tej animaciji, ki prikazuje neomejeno kratno papirno rezanje papirja v brezhibnem zaporedju.
Povezava
17. Nizki poliLion podjetja GRAYGHOST
To je osupljiva ilustracija in animacija, ki prikazuje levjo glavo, ki se pojavlja in izginja v obliki animiranih poligonov.
Povezava
18. Nakladalnik urnega stekla Leela
Še ena učinkovita animacija, ki uporablja samo SVG. Vsakih 5 sekund se peščenica obrne na glavo in začne nov cikel.
Povezava
19. Odzivna krava Sarah Drasner
To je zabavna interaktivna animacija, ki omogoča, da kliknete kravo in jo povlečete okrog lune, medtem ko jo osupli astronavt gleda.
20. Študent Domany
Navdušen študent se zdi pripravljen na učenje! Odlična animacija, kjer se strani knjig lepo vrtijo. Nič utripa od študenta, vendar je to še vedno popolnoma urejena animacija za zaključek tega seznama.
Povezava
Ti si na vrsti
Katere so vaše najljubše SVG animacije, ki niso vključene na ta seznam? Delite svoje krame v spodnjih komentarjih!
