Mērogojama vektorgrafika (SVG) ir attēla formāts, kas rakstīts XML formātā. Izmantojot SVG, jūs varat kodēt divdimensiju mērogojamu grafiku. Pēc tam jūs varat tos ieviest un modificēt CSS un JavaScript.
SVG pieļauj trīs grafiku veidus: vektoru formas (taisnas un izliektas līnijas visos virzienos un formās), attēli un teksts. Dažādu iespēju dēļ tīmekļa dizaineri vēršas pie SVG, lai veidotu sarežģītas animācijas. Tos ir viegli uzstādīt, nemainot kvalitāti, mainot izmēru, un tiem nav nepieciešama trešo personu lietotņu darbība.
Tā kā animācijas joprojām palielinās, vairums tās nav pazīstamas. Šajā rakstā tiks izceltas 20 fantastiskas SVG animācijas, kas parāda šī formāta potenciālu.
1. Medicīnas SVG ikonas, ko veido kittoni
Ātrās saites
- 1. Medicīnas SVG ikonas, ko veido kittoni
- 2. Novietojiet kursoru pa SeanMcCaffery
- 3. Velciet uz leju, lai atsvaidzinātu (papīra plakne), izveidoja Nikolajs Talanovs
- 4. Vienkārši turpiniet Diaco M. Lotfollahi
- 5. SVG filtri ir pievienoti HTML5 video
- 6. finierzāģis
- 7. Patrika Younga Liner Gradient
- 8. Ceļosim pa jjperezaguinaga
- 9. Mohamad Mohebifar pulkstenis
- 10. Luigi De Rosa animācijas ikonas
- Chris Gannon visas SVG ierīces
- 12. Krisa Gannona ūdenskritums
- 13. Augu ģenerators Bleiks Bovens
- 14. Hamsija Viljamsa noklikšķināmā ikona
- 15. Marco Barría jaunā kūka
- 16. Krisa Gannona papīra smalcinātājs
- 17. Zems PolyLion ar GRAYGHOST
- 18. Smilšu pulksteņa iekrāvējs Leela
- 19. Sāras Drasneres atsaucīgā govs
- 20. Studente Domanija
- Tava kārta
Šī siltā un vienmērīgā animācija ir lieliski piemērota jebkurai vietnei, kas saistīta ar veselību. Kamēr jūs uzskaitīsit dažādus pavedienus, attēli tiks parādīti smalki. Ātrās palīdzības automašīna vai atoms konstruēs, acs atvērsies, un ārsts izlēks. Šī animācija parāda visu SVG jautrību un dinamiku.
Saite
2. Novietojiet kursoru pa SeanMcCaffery
Universāla animācija, kuru varat ievietot jebkurā interaktīvā vietnē. Smalks robežu izskats, novietojot kursoru, ļauj jums justies apmierinoši un aicina noklikšķināt uz saites.
Saite
3. Velciet uz leju, lai atsvaidzinātu (papīra plakne), izveidoja Nikolajs Talanovs
Parasti lapas tiek atsvaidzinātas, kad tās “nolaižat”. Šī animācija noved to jaunā līmenī. Kad jūs velciet uz leju, lai to atbrīvotu, jūs debesīs palaidīsit papīra plakni. Ja vēlaties, lai apmeklētāji bieži atjaunotu jūsu lietotni, jums vajadzētu apsvērt šādas animācijas pievienošanu.
4. Vienkārši turpiniet Diaco M. Lotfollahi
SVG animācija, kas parāda mērogošanas vektora potenciālu. Cilvēka ķermeņa vienmērīgā un precīzā kustība ir hipnotizējoša.
Saite
5. SVG filtri ir pievienoti HTML5 video
Pols Īrijs no Google Chrome komandas apskatīja, kā SVG var modificēt saturu ārpus vektorgrafikas. Viņš apvienoja CSS un SVG, lai izveidotu pārsteidzošus vizuālos filtrus, lai parādītu, ka SVG animācija var būt lielisks papildinājums gatavam video.
Saite
6. finierzāģis
Jūs varat padarīt pārsteidzošas interaktīvās finierzāģu mīklas ar SVG animāciju. Šajā piemērā mēs varam izvēlēties vienu no daudzajiem attēliem un redzēt, kā tas dekonstruē daudzus mazus mīkla gabaliņus. To var arī rekonstruēt!
Saite
7. Patrika Younga Liner Gradient
Ja jums ir neona apgaismojums un skaisti fonti, jums patiks šī animācija. Šis darbs parāda, kā spožai animācijai nav vajadzīgas nekādas kustīgas līnijas, tikai lielisks fonts un pareizs krāsu kods ar gradienta efektu.
Saite
8. Ceļosim pa jjperezaguinaga
Divas lidmašīnas un karstā gaisa balons griežas ap populārajiem pasaules orientieriem. Šī animācija ir krāsaina, optimistiska un aizraujoša. Tas parāda visu, ko varat darīt, ja esat prasmīgs SVG.
Saite
9. Mohamad Mohebifar pulkstenis
Vienkārša kustīga pulksteņa SVG animācija, kas parāda pašreizējo laiku. Rādītāju nomierinošā kustība un minimālistiskais dizains rada brīnumus šai animācijai.
Saite
10. Luigi De Rosa animācijas ikonas
Virzot peles kursoru virs šīm ikonām, tiks aktivizētas vienkāršas, bet efektīvas animācijas. Var redzēt, ka jums nav jādara brīnumi, lai izveidotu iespaidīgu animētu ikonu.
Chris Gannon visas SVG ierīces
Viena animācija, kas aptver visas viedās ierīces, kuras mēs izmantojam visradošākajā veidā. Darbvirsma pārvērtīsies klēpjdatorā, klēpjdators planšetdatorā un pēc tam viedtālrunī.
Saite
12. Krisa Gannona ūdenskritums
Vēl viens Chris Gannon, tas ir glīts putojoša ūdenskrituma dibena demonstrējums. Ūdens kustība ir glīta, un, lai viss šķistu reālistiskāks, jūs varat redzēt mazus šļakatu ūdens pilienus, atstājot animācijas robežas.
Saite
13. Augu ģenerators Bleiks Bovens
Tagad šis ir kaut kas cits. Noklikšķinot uz pogas Izveidot, jūs redzēsit augus augošus un augošus. Bet katru reizi noklikšķinot, veidosies dažādi paraugi.
Saite
14. Hamsija Viljamsa noklikšķināmā ikona
Vēl viena interaktīva SVG, kas aktivizē animāciju, tiklīdz jūs uz tās noklikšķināt. Tiklīdz jūs to noklikšķināsit, tiks sākta animācija “Sūtīt”.
Saite
15. Marco Barría jaunā kūka
Interesanta animācija, kas parāda kūkas veidošanu pa slāņiem. Tā ir iespaidīga SVG animācija, kas piemērota dzimšanas dienas kartei.
16. Krisa Gannona papīra smalcinātājs
Ja jums patīk skatīties papīra smalcināšanu, jums patiks šī animācija, kas attēlo mašīnu, kas papīra sasmalcināšanu veic uz papīra neierobežotas reizes bezšuvju secībā.
Saite
17. Zems PolyLion ar GRAYGHOST
Šī ir prātā jūtama ilustrācija un animācija, kas attēlo lauvas galvu, kas parādās un pazūd animētu daudzstūru formā.
Saite
18. Smilšu pulksteņa iekrāvējs Leela
Vēl viena efektīva animācija, kurā tiek izmantota tikai SVG. Ik pēc 5 sekundēm smilšu pulkstenis apgriezīsies otrādi un sāks jaunu ciklu.
Saite
19. Sāras Drasneres atsaucīgā govs
Šī ir smieklīgi interaktīva animācija, kas ļauj noklikšķināt uz govs un vilkt to ap Mēnesi, kamēr sašutis astronauts to skatās.
20. Studente Domanija
Aizrautīgs students šķiet gatavs mācīties! Tā ir lieliska animācija, kurā grāmatu lapas glīti griežas. No studenta nemirgo, bet šī joprojām ir lieliski sakārtota animācija, lai noslēgtu šo sarakstu.
Saite
Tava kārta
Kādas ir jūsu iecienītās SVG animācijas, kas nav iekļautas šajā sarakstā? Kopīgojiet savas izvēles zemākajos komentāros!
