Anime.js - Könnyű JavaScript animációs könyvtár

Web animáció hosszú utat tett. A fejlesztők nemcsak a CSS / SVG / JS kombinációjával animálhatnak, hanem vannak több tucat szabad könyvtár időt takaríthat meg a folyamatban.

Az egyik kedvencem Anime.js, teljesen szabad, nyílt forráskódú JavaScript animációs könyvtár.

Ez a könyvtár lehet csináld mindent. ez beépített JavaScript de ez is nagy mértékben támaszkodik a CSS animációkra. Az egyes oldalelemeket célozhatja a DOM-on keresztül vagy akár célpont is lehet egyéni SVG-k.

Az összes dokumentáció önálló házigazdája a GitHub-on, így előfordulhat, hogy lapozni kell ahhoz, hogy pontosan megtalálja azt, amit keres. De minden animációs funkció jön néhány paraméter például késés, időtartam és könnyítés.

Jegyezze fel ezt a könyvtárat nem jön sok alapértelmezett animációs stílussal. Anime.js van fejlesztők számára készült akik szeretnék testreszabni animációikat anélkül, hogy megírnánk a kódot.

Az a élő példa, nézze meg az alábbi Codepen tollat. A kód rendkívül egyszerű de hihetetlen animációt kapsz squash & stretch plusz előérzet, az animáció mindkét alapja.

Egy tisztességes figyelmeztetés: az Anime.js könyvtár sűrű. Nem minden olyan nehéz létrehozni egyéni animációt, de nem kell megérteni néhány alapot mint a könnyebb és gyakori JavaScript szintaxis a visszahívások és opciók számára.

De minden szükséges információt a repo oldal, beleértve sok kódmintát és részletes dokumentációs táblázatok. És böngészhet a megnyitott hibajelentéseken, vagy ellenőrizheti a böngésző támogatását, amely jelenleg tartalmazza minden nagyobb böngésző és IE 10+.

Ez egyszerűen az egyik legjobb animációs könyvtár a webes fejlesztők számára, és ez a megoldás az Ön számára bármilyen összetett webes animáció.

Ahhoz, hogy egy csomó darabot lásson élő példák, nézd meg ezt az Anime.js demó gyűjteményét, amely a CodePen-en található. Az alábbiakban beágyazott a kedvencem animálja a teljes logót a semmiből, valódi élénkséggel.