Anime.js - Kevyt JavaScript-animaatiokirjasto

Web-animaatio on tullut pitkälle. Kehittäjät eivät voi tehdä mitään animaatiota käyttäen CSS / SVG / JS: n yhdistelmää, mutta on olemassa kymmeniä ilmaisia ​​kirjastoja säästää aikaa prosessissa.

Yksi suosikeistani on Anime.js, täysin ilmainen, avoimen lähdekoodin JavaScript-animaatiokirjasto.

Tämä kirjasto voi tee kaikki. Sen rakennettu JavaScript mutta se myös luottaa suuresti CSS-animaatioihin. Voit kohdistaa yksittäisiä sivuelementtejä DOM: n kautta tai voit jopa kohdistaa mukautetut SVG: t.

Kaikki dokumentaatio on itse isännöi GitHubissa, saatat joutua selaamaan, mitä etsit. Mutta jokainen animaatio-ominaisuus mukana muutama parametri kuten viive, kesto ja helpottaminen.

Huomaa tämä kirjasto ei tule on monia oletustyyppejä. Anime.js on kehittäjille jotka haluavat muokata animaatiotaan kirjoittamatta verbose-koodia.

A live-esimerkki, tutustu Codepen-kynään alla. Koodi on erittäin yksinkertainen mutta saat uskottavan animaation squash ja venytys plus ennakointi, molemmat animaation perusteet.

Oikein varoitus: Anime.js-kirjasto on tiheä. Ei ole kovin vaikeaa luoda mukautettua animaatiota, mutta sinun täytyy ymmärtää joitakin perusasioita kuten helpottaminen ja yhteiset JavaScript-syntaksit soittopyyntöjä ja valintoja varten.

Mutta kaikki tarvittavat tiedot sijaitsee repo-sivu, mukaan lukien paljon koodinäytteitä ja yksityiskohtaiset dokumentointitaulukot. Voit myös selata avoimia vikailmoituksia tai tarkistaa selaimen tuen, joka tällä hetkellä sisältää kaikki tärkeimmät selaimet ja IE 10+.

Tämä on helposti yksi web-kehittäjien parhaista animaatiokirjastoista, ja sen pitäisi olla sinun ratkaisu mikä tahansa monimutkainen web-animaatio.

Jos haluat nähdä joukon live-esimerkkejä, tutustu CodePenissä järjestettyyn Anime.js-demojen kokoelmaan. Alla upotin suosikkini animoi koko logon tyhjästä, todellista eloisuutta.