30 Awesome SVG Animācija Jūsu iedvesmai

Dizaineri izmantoja, lai izveidotu animācijas HTML elementos, izmantojot CSS. Tomēr, ņemot vērā HTML elementu ierobežojumus modeļu, formu un citu veidošanā, tie, protams, vēršas pie SVG, kas piedāvā vairāk interesantu iespēju.

Strādājot ar SVG, mēs baudām labu pārlūkprogrammu SVG animācijai, un mums ir vairāk veidu, kā izveidot jaunu animāciju. Jūs varat izmantot gan iebūvēto SVG animācijas funkcionalitāti, gan CSS3 animāciju (ņemiet vērā, ka CSS nevar darīt visu, lai vēl būtu nepieciešams JavaScript). Vēl viens veids ir, izmantojot JavaScript dzinējus, piemēram, GSAP vai Snap. JS ir laba prakse animācijas veidošanai.

Šeit esmu apkopojis kādu apbrīnojamu animētu SVG. Daži izmanto SVG animāciju, citi izmanto CSS transformāciju pamata animācijai, un pārējie izmanto JavaScript palīdzību.

Sean McCaffery veiktais robežu animācija

Izgatavots tikai ar CSS, robeža veidojas vienmērīgi ap tekstu, kad jūs virzāmies virs “HOVER” instrukcija.

Elastīgs SVG sānjoslas Nikolajs Talanovs

Sānjosla kļūst elastīga, mēģinot to noņemt no sāniem. Jauka koncepcija, kas piemērota materiāla dizaina iedvesmotajā lietojumprogrammas sānjoslā.

Pavelciet uz leju, lai atsvaidzinātu Nikolajs Talanovs

Lielākā daļa lapu ļauj jums “vilkt lejā” lapā, lai atsvaidzinātu. Ar šo animāciju, kad jūs “atbrīvot” lapā, Sūtīt ikona mainās uz plaknes ikonas un tiek izlaista gaisā.

Animācijas gradients uz tekstu Patrick Young

Šeit ir smalks, bet ne viegli garām kustīgs teksta gradients, ko mīl mīlestība tipogrāfijā.

Nikolaja Talanova sirds animācija

Šī animācija parāda, kā sirds ikona ir izgatavota no diviem apļiem un kvadrāta. Pārveidošana notiek ar CSS animāciju.

Let's Travel ar jjperezaguinaga

Animācija, kas ilustrē pilsētas un populāros tūrisma galamērķus pasaulē. Kustības un transformācijas tiek izveidotas, izmantojot CSS animāciju.

Tamino Martinius izvēlnes aktivizēšana

Hamburgeru ikonas morpinga animācija, kas pārvēršas par krusta ikonu. Redzēt, cik vienmērīga ir pāreja starp diviem objektiem.

Sdras animētie Infographic

Šausmīgs animācijas autors ir Sarah Drasner, kas darbojas ar GSAP laika skalu. Tā ir infogrāfija, kas atdzīvojas ar animāciju. Izmantojiet slīdni, lai piekļūtu rāmjiem no jebkura punkta.

Rain-Bros nepatīk JS ar cihadturhan

Unikāla un smieklīga cilpas animācija, kas attēlo rakstzīmju staigāšanu. Objektu kustība šajā demonstrācijā ir SVG un CSS3 animācijas kombinācija. Kājas izmanto SVG animāciju, bet citas - CSS3 animāciju.

Mohamad Mohebifar pulkstenis

Skatieties, kā šajā pulkstenī tiek izmantota otrās puses vienmērīgā kustība, norādot pašreizējo laiku. Animācija ir pilnībā izgatavota, izmantojot SVG animācijas funkcionalitāti.

Varavīksnes raķešu cilvēks no Chris Gannon

Astronauts fotografē kosmosā ar tā varavīksnes dzinēju (?). Jauka animācija, izmantojot GSAP Tweenmax spraudni.

Luigi De Rosa animācijas ikona

Tomēr pār šīm animētajām SVG ikonām, lai pārbaudītu, ko viņi var darīt. Radītājs to izdarīja, izmantojot GSAP.

Plakanā darba telpa ar Hoàng Nhật

Animācija ilustrē darbvietu plakanā stilā. Radītājs izmantoja GSAP, lai padarītu šo awesome animāciju darbstaciju veidošanā.

Klikšķināmā animētā ikona Hamish Williams

Šī ir atdzist animācija, kurā tiek izmantota snap.svg bibliotēka. Noklikšķiniet, lai redzētu pasta sūtījumu “nosūtīts”.

Chris Gannon niršana

Vai jūs kādreiz esat izlaidis akmeņus uz ezera virsmas? Šeit ir vienkārša SVG ceļa animācija, kas ilustrē to, bet bez akmeņiem un bez ezera.

LegoMushroom kustība tīmeklī

Tam ir animācija, jauka melodija, super vēsa ieeja tekstam, kas nepatīk? Tas ir veidots ar mo.js, kustības grafikas JavaScript bibliotēku.

Animēts rakstīšanas fonts Lee Porter

Turklāt, izmantojot SVG, lai izveidotu ceļa animāciju, ieskicējot formu, varat to izmantot tipogrāfijā, piemēram, to, ko šis autors ir izveidojis. Blur efekts padara to par lielisku.

Lucka Bebbera izvēlne

Izbaudiet šo dizainu, izmantojot SVG filtru un pievienojot CSS animāciju. Rezultāts ir reāls un patiešām foršs, un jūs varat spēlēt ar četrām dažādām versijām.

Marco Barría jaunā kūka

Kā izveidot slāņainu dzimšanas dienas kūka, kas veidota ar SVG un CSS animāciju.

Paldies Rachel Smith

Vienkārši skatiet šo awesome animācijas vienkāršu paldies piezīmi. Tas ir izveidots, izmantojot SVG un GSAP TweenMax bibliotēku.

CSS vs SVG Mario Sanchez Maselli

Tagad apskatīsim CSS un SVG animācijas salīdzinājumu, vai jūs redzat atšķirību?

Marks Nelsons

Vēl viens veids, kā aktivizēt SVG, ir, izmantojot sprites attēlus, piemēram, kā šis radītājs darīja.

Leela smilšu stikla iekrāvējs

Radošs darbs, kas veikts, izmantojot tīru SVG animāciju (SMIL); nav CSS vai JS, lai šeit dzīvotu.

Logo Adem ilter

Lūk, jauks animācijas logotips, kas izmanto inline SVG animāciju. Neviens CSS vai JS netika izmantots, lai viss darbotos.

Jonas Badalicas statistika

Skaists statu grafiks ar SVG animāciju, ko nodrošina Snap.SVG bibliotēka.

Ouroboros no Noel Delgado

Pārsteidzošs SVG animācijas ceļš. Vispirms autors veica ceļa maršrutu uz SVG, pirms izmantot tween.js, lai pievienotu animāciju.

Lucas Bebberas radošās Gooey efekti

Šeit ir septiņi SVG filtra izmantošanas veidi, lai padarītu gooey līdzīgu efektu. Mūzikas vizualizators ir mans mīļākais, animācija izskatās ļoti jauka.

Mest govju Sarah Drasner

Šī ir SVG animācija, ko darbina TweenMax, bet ir tikai jautri. Turiet un velciet govis ap planētu. Tas spin "orbītā".

Animēts logo no Ali

Animācija varētu būt jauks neliels papildinājums burbuļojošam alus logotipam. Jauki mazie peldošie burbuļi ir veidoti tikai ar SVG dzimtās animācijas sintaksi.