Anime.js - Et lett JavaScript-animasjonsbibliotek

Web animasjon har kommet langt. Ikke bare kan utviklere gjøre noen animasjoner ved hjelp av en kombinasjon av CSS / SVG / JS, men det er dusinvis av gratis biblioteker for å spare tid i prosessen.

En av mine favoritter er Anime.js, en helt fri, åpen kildekode JavaScript animasjonsbibliotek.

Dette biblioteket kan gjør alt. Det er bygget på JavaScript men det også stoler sterkt på CSS animasjoner. Du kan målrette mot individuelle sideelementer via DOM eller du kan til og med målrette egendefinerte SVGer.

All dokumentasjonen er Selvbetjent på GitHub, så du må kanskje bla for å finne akkurat det du leter etter. Men hver animasjonsfunksjon kommer med noen få parametere for eksempel forsinkelse, varighet og lettelse.

Merk dette biblioteket kommer ikke med mange standard animasjonsstiler. Anime.js er laget for utviklere som vil tilpasse sine animasjoner uten å skrive verbose kode.

For en live eksempel, sjekk ut kodepennen nedenfor. Koden er overordentlig enkel men du får en troverdig animasjon med squash og stretch i tillegg til forventning, begge grunnleggende av animasjon.

En rettferdig advarsel: Biblioteket Anime.js er tett. Det er ikke så vanskelig å lage en tilpasset animasjon, men du trenger det forstå noe grunnleggende som lettelse og vanlig JavaScript-syntaks for tilbakeringinger og alternativer.

Men all den informasjonen du trenger er på repo side, gjelder også mange kodeprøver og detaljerte dokumentasjonstabeller. Og du kan bla gjennom åpne feilrapporter eller sjekke nettleserstøtte som for tiden inkluderer alle de store nettleserne og IE 10+.

Dette er lett en av de beste animasjonsbiblioteker for webutviklere, og det bør være din go-to-løsning for noen komplekse web animasjon.

Å se en haug med levende eksempler, sjekk ut denne samlingen av Anime.js-demoer som er hostet på CodePen. Nedenfor har jeg lagt inn min favoritt som animerer hele logoen fra bunnen av, med ekte livskraft.