Anime.js - Bibliotecă de animație JavaScript ușoară

Animație web a parcurs un drum lung. Nu numai dezvoltatorii pot face orice animație folosind un combo de CSS / SVG / JS, dar există zeci de biblioteci libere pentru a economisi timp în acest proces.

Unul dintre preferatele mele este Anime.js, o sursă deschisă complet liberă JavaScript de animație bibliotecă.

Această bibliotecă poate fa totul. este construit pe JavaScript dar, de asemenea se bazează foarte mult pe animațiile CSS. Puteți viza elemente de pagină individuale prin DOM sau chiar puteți viza SVG personalizate.

Toată documentația este găzduit de GitHub, astfel încât ar putea fi necesar să defilați pentru a găsi exact ceea ce căutați. Dar fiecare caracteristică de animație vine cu câțiva parametri cum ar fi întârzierea, durata și ușurarea.

Rețineți această bibliotecă nu vine cu multe stiluri de animație implicite. Anime.js este pentru dezvoltatori care doresc să personalizeze animațiile lor fără a scrie codul verbose.

Pentru o exemplu live, verificați pictograma Codepen de mai jos. Codul este foarte simplu dar aveți o animație credibilă squash & stretch la care se adauga anticipare, ambele fundamente ale animației.

Un avertisment corect: biblioteca Anime.js este dens. Nu este atât de greu să creezi o animație personalizată, dar trebuie să o faci înțelegeți câteva elemente de bază cum ar fi relaxarea și sintaxa obișnuită a JavaScript pentru apelurile și opțiunile de apel.

Dar toate informațiile de care aveți nevoie este pe pagina repo, inclusiv o mulțime de mostre de cod și tabele detaliate de documentare. Și puteți naviga prin rapoartele de erori deschise sau puteți verifica asistența browserului care include în prezent toate browserele majore și IE 10+.

Aceasta este cu ușurință una dintre cele mai bune biblioteci de animație pentru dezvoltatorii web și ar trebui să fie soluția dvs. go-to pentru orice animație web complexă.

Pentru a vedea o mulțime de exemple live, verificați această colecție de demo-uri Anime.js găzduită pe CodePen. Mai jos, am încorporat preferatul meu care animă întregul logo de la zero, cu vivacitate reală.