Anime.js - Et Letvægts JavaScript Animation Library

Web animation er kommet langt. Ikke kun kan udviklere lave nogen animation ved hjælp af en combo af CSS / SVG / JS, men der er snesevis af gratis biblioteker for at spare tid i processen.

En af mine favoritter er Anime.js, en helt fri, åben kilde JavaScript animationsbibliotek.

Dette bibliotek kan gør alt. Det er bygget på JavaScript men det også afhænger meget af CSS animationer. Du kan målrette mod individuelle sideelementer via DOM eller du kan endda målrette brugerdefinerede SVG'er.

Al dokumentationen er selvstændig vært på GitHub, så du skal muligvis rulle for at finde præcis, hvad du leder efter. Men hver animationsfunktion leveres med nogle få parametre såsom forsinkelse, varighed og lempelse.

Bemærk dette bibliotek kommer ikke med mange standard animation stilarter. Anime.js er lavet til udviklere der vil tilpasse deres animationer uden at skrive verbose kode.

For a levende eksempel, Tjek kodepenpen nedenfor. Koden er yderst simpelt men du får en troværdig animation med squash og stretch plus forventning, begge fundamentale af animation.

En rimelig advarsel: Anime.js biblioteket er tæt. Det er ikke så svært at oprette en brugerdefineret animation, men du behøver det forstå nogle grundlæggende ting som lempelse og almindelig JavaScript-syntaks for tilbagekaldelser og muligheder.

Men alle de oplysninger, du har brug for er på repo side, inklusive masser af kode prøver og detaljerede dokumentationstabeller. Og du kan gennemse åbne fejlrapporter eller kontrollere browser support, som i øjeblikket indeholder alle større browsere og IE 10+.

Dette er nemt et af de bedste animationsbiblioteker til webudviklere, og det skal være din go-to løsning til enhver kompleks web animation.

At se en flok af levende eksempler, tjek denne samling af Anime.js demoer hosted på CodePen. Nedenfor indlejrede jeg min favorit som animerer hele logoet fra bunden, med ægte livlighed.