Anime.js - ľahká knižnica JavaScript animácie

Webová animácia príde dlhá cesta. Nielenže môžu vývojári vykonávať akúkoľvek animáciu pomocou kombinácie CSS / SVG / JS, ale existujú desiatky bezplatných knižníc ušetriť čas v procese.

Jeden z mojich obľúbených Anime.js, úplne zadarmo, open source Knižnica animácií jazyka JavaScript.

Táto knižnica môže robte to všetko. to je postavený na jazyku JavaScript ale aj to sa spolieha na animácie CSS. Môžete zacieliť na jednotlivé prvky stránky cez DOM alebo dokonca môžete zacieliť vlastné SVG.

Celá dokumentácia je hosťované na GitHub, takže možno budete musieť presunúť nájsť presne to, čo hľadáte. Ale každá animácia prichádza s niekoľkými parametrami ako je oneskorenie, trvanie a uvoľnenie.

Poznámka: táto knižnica nepríde s mnohými predvolenými štýlmi animácie. Anime.js je pre vývojárov ktorí chcú prispôsobiť svoje animácie bez písania podrobného kódu.

Pre živý príklad, pozrite si pero Codepen nižšie. Kód je veľmi jednoduché ale dostanete uveriteľnú animáciu squash & stretch plus očakávania, obidva základy animácie.

Spravodlivé upozornenie: knižnica Anime.js je hustý. Nie je to tak ťažké vytvoriť vlastnú animáciu, ale potrebujete pochopiť niektoré základy ako uvoľnenie a bežná syntax JavaScript pre volania a možnosti.

ale všetky informácie, ktoré potrebujete je na repo stránky, počítajúc do toho veľa kódových vzoriek a podrobné tabuľky dokumentácie. Môžete prechádzať otvorenými správami o chybách alebo kontrolovať podporu prehliadača, ktorá v súčasnosti obsahuje všetky hlavné prehliadače a IE 10+.

Jedná sa o jednoducho jednu z najlepších animovaných knižníc pre webových vývojárov a malo by to byť vašim riešením akákoľvek komplexná webová animácia.

Ak chcete vidieť veľa živé príklady, pozrite sa na túto zbierku democh Anime.js, ktorá bola umiestnená na CodePen. Nižšie som vložil môj obľúbený, ktorý animuje celé logo od začiatku, s reálnou vivacitou.