10 nejlepších bezplatných animačních knihoven pro web
Animace je jedním z klíčových trendů pro rok 2018, ale nemusíte znovu objevovat kolo, abyste přidali k vašim stránkám pohyb. Podíváme se na nejlepších bezplatných animačních knihovnách pro webové projekty.
Můžete si vytvořit nějaké bláznivé věci UI animace na webu. To se rychle stává normou pro moderní webové stránky, kde je angažovanost uživatelů velkou záležitostí.
Pokud se podíváte kolem, najdete spoustu generátorů kódů a vlastní nástroje na pomoc s animací. Můžete také najít volné knihovny, které vám ušetří čas v procesu kódování.
To jsou moje desítky tipů pro nejlepší open source web animační knihovny. To zahrnuje dobrou kombinaci knihoven JavaScript a animací pouze CSS. Oba styly jsou skvělé a oba mají své výhody a nevýhody.
Ať tak či tak zaručím, že tento seznam bude mít něco, co budete milovat.
1. GSAP
The Knihovna GSAP je jedním z nejlepších bezplatných zdrojů pro vývojáře. To běží čistě na JavaScript a je to jedna z více robustní animace knihoven můžete použít.
Funguje na špičce specifikací HTML5 a hraje se s všemi moderními prohlížeči, přestože tým neustále aktualizuje tuto knihovnu s novými funkcemi. Může pracovat se SVG, plátovými prvky nebo dokonce s jQuery objekty spolu s dalšími souvisejícími knihovnami EaselJS .
Rozhodně stojí za to podívat se, jestli potřebujete silnou knihovnu pro webovou animaci. To může zvládnout i jednoduché úkoly, ale tam je spousta menších knihoven, které si můžete vyzkoušet.
2. Anime.js
Když jsem poprvé našel Anime.js Knihovna byla jsem plovoucí. Tato věc je neuvěřitelně silná a přesahuje jednoduché animace UI / UX.
S Anime.js můžete navrhnout estetické animace s logy, knoflíky, obrázky, které si pojmenujete. To podporuje všechny typické uživatelské spouštěče, jako jsou kliky / pohyby / přetahování a máte přístup ke spoustě animací postavených na míru.
Pokud se podíváte dokumentaci můžete skutečně najít pár příkladů vložených přímo do stránky. Navíc existuje a kolekce na CodePen plný příkladů Anime.js, aby se prohlédli.
3. Špatný CSS
Zde je jedna z novějších knihoven se zaměřením na čistý kód CSS. Špatný CSS pracuje na vrcholu vlastností CSS3 a nabízí některé neuvěřitelné výsledky.
Z hlavní stránky najdete spoustu živých ukázky, které můžete vyzkoušet přímo v prohlížeči. Patří mezi ně rotace objektů, přehýbání, posuny a mnoho podobných efektů animace.
Některé z nich mohou být dost jednoduché, že je můžete postavit sami. Ale ostatní se skutečně složitě a to je to, co dělá Wicked CSS knihovnu tak zábavné.
4. Animace CSS
Možná je konečný zdroj pro webovou animaci Animate.css . Tato knihovna s otevřeným zdrojovým kódem byla propuštěna poměrně málo let zpět a je stále důležitější než kdy jindy.
Vývojář Daniel Eden vytvořil tento projekt jako zjednodušený způsob přidávání vlastních animací CSS3 na webovou stránku. V průběhu let se rozrostla do plnohodnotné animační knihovny s dostatečnou silou pro běh každého významného projektu.
Domovská stránka nabízí spoustu demoů, abyste mohli vyzkoušet animační styly a uvidíte, co si myslíte. Navíc je tu spousta skvělé dokumentace na GitHub včetně seznamu tříd a některých příkladů fragmentů kódu.
5. Úterý
Jedna věc, kterou se mi nejvíc líbí úterý je jednoduchost těchto animací. Pomocí této knihovny můžete ovládat, jak se objekty zobrazují a zmizí ze stránky.
Ale tyto animace nejsou nadčasové nebo super okouzlující. Místo toho zabalí docela jemný úder, který skutečně vylepšuje stránku estetiky, ale neovlivňuje obsah ani zkušenosti uživatelů.
V úterý jsem neviděl mnoho webových stránek, ale je to možná nejčistší knihovna.
To běží na čistém CSS a animační styly jsou tak odvážné. Mohou se mísit s jakýmkoli místem a máte více než tucet fade in / fade styly k práci s.
6. CSShake
Ještě jsem viděl libovolnou knihovnu CSS jako zábavnou nebo podivnou CSShake . To je jedna část bláznivá a jedna část jedinečná, takže pravděpodobně nebude vyhovovat všem webovým stránkám.
Důvod, proč byl seznam proveden, je, že nemohu přemýšlet o podobné knihovně s těmito funkcemi. S nástrojem CSShake můžete přenášet animace s pohybem s třesoucími se efekty ze všech typů stylů, všechny běžící na čistém CSS.
Od mírných pohybů až po energické třástění a vše ostatní, tato knihovna má všechno s velmi snadným nastavením na start.
7. Mo.js
Z mnoha podrobných knihoven JavaScript pro animaci musím říct Mo.js je jedním z nejlepších. Tato knihovna je masivní a je skutečně navržena pohybová grafika přes animace UI / UX.
Ale můžete to použít cokoliv, pokud se dozvíte, jak to funguje. Kódy jsou poměrně jednoduché manipulovat a existuje banda tutoriálů můžete sledovat, abyste usnadnili život.
Je to dokonalá animační knihovna? Stěží.
Má však spoustu úžasných funkcí a skutečně zjednodušuje proces animace, ať už animujete navbar, logo nebo jiný komplexní objekt.
8. Animujte Plus
Pro super lehkou knihovnu s jednoduchými animacemi se podívejte Animate Plus . To pouze váží 2KB při minimalizaci a má všechny základní funkce, které byste očekávali s vlastní animací JavaScriptu.
To je snadné instalovat s npm a můžete jej nastavit po úryvcích kódu v GitHubu. Většina z nich jsou jen základní ukázky, takže se nedostanou do žádného komplexu, ale všechny možnosti a metody zpětného volání najdete také přímo na GitHubu.
Podívejte se na ukázkové ukázky vytáhl přímo z úryvku kódu v hlavním repo. Není to moc, ale ukáže vám, jak nastavit Animate Plus a spustit trochu výchozího kódu od začátku.
9. Bounce.js
S Bounce.js můžete vytvářet výkonné animace CSS3 a JS s několika kliknutími.
Na domovské stránce najdete vlastní tvůrce animací se zaměřením na moduly. Tímto způsobem můžete přidávat specifické animační funkce, které chcete, na stránku bez přidání dalšího kódu.
Největším rozdílem s Bounce.js je to, že nefunguje jako knihovna. I když najdete informace o nastavení na GitHub , není to jen základní skript. Ve skutečnosti je dodáván s nástrojem pro tvorbu webů, takže Bounce je jedna z mála animačních knihoven, které můžete ve svém prohlížeči použít ve stylu.
10. Kouzlo
Zábavné animace s pomlčkou hravosti nejlépe popisují Kouzlo knihovna.
Tato celá sbírka se zaměřuje na animace CSS3, zatímco tlačí na vlastní styly, které nelze nalézt jinde. Je to docela velká sbírka kódů CSS3 a najdete zde spoustu úhledných triků. Rotace, perspektivní převrácení, efekty vyblednutí, spousta práce.
Pokud se podíváte na demo stránky můžete zkontrolovat některé z těchto efektů v akci.
Tato knihovna je ještě mnohem menší než ostatní knihovny CSS3, takže nemůže soutěžit s úterkem nebo Animate.css. Ale má spoustu úhledných webových animací, které právě nenajdete v jiných knihovnách.
