Anime.js - lehká JavaScript knihovna animace

Webové animace má dlouhou cestu. Nejen, že vývojáři mohou provádět animace pomocí komba CSS / SVG / JS, ale existují desítky bezplatných knihoven šetří čas v procesu.

Jeden z mých oblíbených je Anime.js, zcela zdarma, open source Knihovna animace JavaScriptu.

Tato knihovna může to všechno. To je postavený na JavaScriptu ale také spoléhá na CSS animace. Můžete cílit na jednotlivé prvky stránky přes DOM nebo dokonce můžete cílit vlastní SVG.

Veškerá dokumentace je na hostiteli GitHub, takže možná budete muset najít přesně to, co hledáte. Ale každá animace funkce přichází s několika parametry zpoždění, trvání a uvolnění.

Všimněte si této knihovny nepřichází s mnoha výchozími styly animace. Anime.js je pro vývojáře kteří chtějí přizpůsobit své animace bez psaní podrobného kódu.

Pro živý příklad, podívejte se na kódovací pero níže. Kód je mimořádně jednoduché ale získáte uvěřitelnou animaci squash a protáhnout Plus očekávání, oba základy animace.

Spravedlivé varování: knihovna Anime.js je hustý. Není to tak těžké vytvořit vlastní animaci, ale musíte pochopit některé základy jako je uvolnění a společná syntaxe JavaScriptu pro zpětná volání a možnosti.

Ale všechny potřebné informace je na repo stránka, počítaje v to spousta ukázek kódu a podrobné tabulky dokumentace. A můžete procházet otevřené zprávy o chybách nebo kontrolovat podporu prohlížeče, která v současné době obsahuje všechny hlavní prohlížeče a IE 10+.

To je snadno jeden z nejlepších knihoven animace pro webové vývojáře a mělo by to být vaše go-to řešení pro jakékoliv komplexní webové animace.

Chcete-li vidět spoustu živé příklady, podívejte se na tuto sbírku ukázek Anime.js hostovaných na CodePen. Níže jsem vložil své oblíbené, které animuje celé logo od nuly, se skutečnou živostí.