Anime.js - Laka JavaScript biblioteka animacija

Web animacija je prošao dug put. Ne samo da programeri mogu napraviti bilo koju animaciju koristeći kombinaciju CSS / SVG / JS, ali postoje desetaka besplatnih knjižnica da uštedite vrijeme u procesu.

Jedan od mojih omiljenih je Anime.js, potpuno slobodan, otvoren izvor JavaScript knjižnica animacija.

Ova knjižnica može učini sve. to je izgrađen na JavaScriptu ali također uvelike se oslanja na CSS animacije. Možete ciljati pojedinačne elemente stranice putem DOM-a ili čak možete ciljati prilagođeni SVG-ovi.

Sva dokumentacija je na GitHubu, tako da ćete možda trebati pomicati se da biste pronašli točno ono što tražite. Ali svaka značajka animacije dolazi s nekoliko parametara kao što su kašnjenje, trajanje i ublažavanje.

Zabilježite ovu knjižnicu ne dolazi s mnogim zadanim stilovima animacije. Anime.js je napravljen za programere koji žele prilagoditi svoje animacije bez pisanja opširnog koda.

Za živi primjer, provjerite olovku Codepen u nastavku. Kod je vrlo jednostavna ali dobivate uvjerljivu animaciju squash & stretch plus predviđanje, obje osnove animacije.

Pravično upozorenje: biblioteka Anime.js je gust. Nije sve teško stvoriti prilagođenu animaciju, ali morate to učiniti razumjeti neke osnove poput olakšavanja i zajedničke JavaScript sintakse za povratne pozive i opcije.

Ali sve potrebne informacije je na repo stranica, uključujući puno uzoraka koda i detaljne tablice dokumentacije. Možete pregledavati i otvorena izvješća o bugovima ili provjeriti podršku preglednika koja trenutno uključuje svi glavni preglednici i IE 10+.

To je jednostavno jedna od najboljih animacijskih knjižnica za web-programere i trebala bi biti vaše rješenje bilo koju složenu web-animaciju.

Da vidim hrpu primjeri uživo, pogledajte ovu zbirku demoa Anime.js smještenih na CodePen. U nastavku sam ugradio svoju omiljenu koja animira cijeli logotip od nule, sa stvarnom živošću.