Anime.js - knjižnica z lahkimi animacijami JavaScripta
Spletna animacija je prišel daleč. Ne samo, da lahko razvijalci naredijo kakršno koli animacijo z uporabo kombinacije CSS / SVG / JS, vendar obstajajo desetih brezplačnih knjižnic da prihranite čas v procesu.
Ena od mojih najljubših je Anime.js, popolnoma prost, odprtokoden Knjižnica animacij JavaScripta.
Ta knjižnica lahko naredite vse. To je zgrajena na JavaScriptu ampak tudi se močno opira na animacije CSS. Usmerite lahko posamezne elemente strani preko DOM-a ali pa lahko celo ciljate SVG po meri.
Vsa dokumentacija je v GitHubu, zato se boste morda morali pomakniti, da boste našli točno to, kar iščete. Toda vsaka animacija prihaja z nekaj parametri kot so zamuda, trajanje in sproščanje.
Zapomnite si to knjižnico ne pride s številnimi privzetimi slogi animacije. Anime.js je za razvijalce ki želijo prilagoditi svoje animacije brez pisanja besedne kode.
Za primer živega, Oglejte si spodnjo pisalo Codepen. Koda je zelo preprosta ampak dobiš neverjetno animacijo z squash & stretch plus pričakovanje, obe osnove animacije.
Pravično opozorilo: knjižnica Anime.js je gosto. To ni vse tako težko ustvariti animacijo po meri, vendar morate razumeti nekaj osnov kot je lajšanje in skupna sintaksa JavaScripta za povratne klice in možnosti.
Toda vse informacije, ki jih potrebujete je na repo stran, vključno z veliko vzorcev kode in podrobne dokumentacijske tabele. Lahko brskate po odprtih poročilih o napakah ali preverite podporo brskalnika, ki trenutno vključuje vse glavne brskalnike in IE 10+.
To je preprosto ena najboljših animacijskih knjižnic za spletne razvijalce in za vas bi morala biti vaša rešitev vsaka kompleksna spletna animacija.
Da vidim kup primeri v živo, Oglejte si to zbirko predstavitev Anime.js, ki jih gosti CodePen. Spodaj sem vstavil svojo najljubšo, ki animira celoten logotip od začetka, z resnično živahnostjo.