Anime.js - viegla JavaScript animācijas bibliotēka

Tīmekļa animācija ir gājusi tālu. Ne tikai izstrādātāji var veikt animāciju, izmantojot kombināciju CSS / SVG / JS, bet ir desmitiem bezmaksas bibliotēku lai ietaupītu laiku procesā.

Viens no maniem favorītiem ir Anime.js, pilnīgi bez maksas, atvērtā koda JavaScript animācijas bibliotēka.

Šī bibliotēka var darīt visu. Tas ir balstīta uz JavaScript bet tas arī lielā mērā balstās uz CSS animācijām. Varat atlasīt atsevišķus lapas elementus izmantojot DOM vai jūs pat varat mērķēt pielāgotas SVG.

Visi dokumenti ir GitHub, tāpēc jums var būt nepieciešams ritināt, lai atrastu tieši to, ko meklējat. Bet katra animācijas funkcija nāk ar dažiem parametriem piemēram, kavēšanās, ilgums un atvieglojumi.

Ņemiet vērā šo bibliotēku nenāk ar daudziem noklusējuma animācijas stiliem. Anime.js ir izstrādātājiem kas vēlas pielāgot savas animācijas bez rakstiska vārda.

Priekš dzīvot piemēru, pārbaudiet tālāk esošo Codepen pildspalvu. Kods ir ļoti vienkārši bet jūs saņemsiet ticamu animāciju skvošs un stiept plus paredzēšana, abi animācijas pamati.

Godīgs brīdinājums: ir Anime.js bibliotēka blīvs. Ne viss ir grūti izveidot pielāgotu animāciju, bet jums ir nepieciešams izprast dažus pamatus piemēram, atvieglošana un kopēja JavaScript sintakse, kas paredzēta zvaniem un opcijām.

Bet visu nepieciešamo informāciju ir uz repo lapa, tostarp daudz kodu paraugu un detalizētas dokumentācijas tabulas. Un jūs varat pārlūkot atvērtos kļūdu ziņojumus vai pārbaudīt pārlūkprogrammas atbalstu, kas pašlaik ietver visas galvenās pārlūkprogrammas un IE 10+.

Tas ir vienkārši viens no labākajiem animācijas bibliotēkām tīmekļa izstrādātājiem, un tam vajadzētu būt jūsu risinājumam jebkura sarežģīta tīmekļa animācija.

Lai redzētu ķekars dzīvi piemēri, pārbaudiet šo Anime.js demo kolekciju, kas izvietota CodePen. Zemāk es iekārtoju savu iecienītāko animē visu logo no nulles, ar reālu dzīvīgumu.