10+ nejlepších knihoven animace JavaScript, které se mají použít v roce 2020

10+ nejlepších knihoven animace JavaScript, které se mají použít v roce 2020

10+ nejlepších knihoven animace JavaScript, které se mají použít v roce 2020
СОДЕРЖАНИЕ
02 июня 2020

Nejlepší JavaScript Animation Library


Pokud chcete upoutat pozornost návštěvníka vašeho webu, co může být lepší než animace? Pomocí mnoha aplikačních modulů volně dostupných na webu můžete snadno přimět prvky vašeho webu k vyblednutí, odskočení nebo hněvu. V dnešním příspěvku to uvidíme jak mohou knihovny animací JavaScript pomoci se vším tím.

Nejprve něco o animacích JavaScriptu

Jedna věc je přidat jednoduché animace, které vyžadují pouze jednu akci (například přepínání). K tomu můžete vždy použít jednoduché animace CSS. Ale pro složitější nebo pokročilejší efekty je JavaScript lepším nástrojem. Je samozřejmé, že použití JavaScriptu k vytváření animací je náročnější než použití CSS.

JavaScript však dokáže zpracovat věci, které CSS neumí. To poskytuje vývojářům více síly k ovládání složitých animací, které potřebují koordinovat více pohyblivých částí.

Animace JavaScriptu jsou implementovány přidáním postupných změn stylu prvku. Můžete je přidat do řádku jako součást kódu nebo je zahrnout do jiných objektů. Při vykreslování jsou tyto změny vyvolány časovačem. Kontinuitu animací můžete také upravit úpravou časového intervalu změn.

Nejlepší JavaScript animační knihovny

Zde je seznam knihoven animací JavaScriptu, pomocí kterých můžete na svůj web přidat nějaké úžasné animace:

1. Anime.js

Knihovny animací JavaScript: Anime.js

Začněme tento seznam knihoven animace JavaScript pomocí Anime.js. Tato odlehčená knihovna animací obsahuje 35 K + hvězd GitHub. Díky jedinému výkonnému rozhraní API můžete použít k animaci atributů HTML, CSS, JS, SVG a DOM. Díky vestavěnému systému ohromení může být vytváření vln, směrových pohybů, následných a překrývajících se efektů jednoduché. Tento systém je použitelný jak na časování, tak na vlastnosti.

S vestavěnými funkcemi zpětného volání a řízení můžete udělat mnoho. Můžete například synchronně přehrávat, pozastavovat, ovládat, zvrátit a spouštět události. Chcete-li zjistit, co dalšího je možné pomocí této knihovny, můžete navštívit Codepen.

2. Velocity.js

Velocit.js

Velocity.js kombinuje to nejlepší z jQuery a CSS přechodů. Hodnotí se téměř 17 K hvězd GitHub a může se pochlubit významnými uživateli, jako jsou WhatsApp a Mailchimp. Smyčky, obrácení, zpoždění, skrytí / zobrazení prvků, matematika vlastností (+, -, *, /) a hardwarová akcelerace, to vše je součástí prvků.

K procházení oken prohlížeče můžete použít Velocity.js. Může fungovat jak s jQuery načteným v prohlížeči a nezávisle na něm, nebo dokonce vrátit předchozí animace.

3. Popmotion

Popmotion

V těsné blízkosti 18K hvězdy, Popmotion je funkční animační knihovna pro jakékoli prostředí JavaScriptu. Může pracovat s téměř jakýmkoli rozhraním API, které přijímá čísla jako vstupy jako React, Three.js, A-Frame a PixiJS..

Popmotion váží pouze 11,7kB, ale přesto srazí. Obsahuje animace, jako jsou klíčové snímky, rozpad, časová osa pro synchronizaci více instancí a další. Můžete rozložit jakoukoli sérii animací nebo funkcí a také použít čisté funkce k vytvoření vlastních konfigurací.

4. Three.js

Knihovny animací JavaScriptu: Three.js

Three.js na vrcholu tohoto seznamu knihoven animací JavaScriptu s 60 K + hvězdičkami GitHub. Záleží na tom WebGL vytvářet a vykreslovat 3D animace v prohlížeči.

Je tu spousta dokumentace, která vám pomůže, a jakmile se dostanete kolem křivky učení, není toho moc, čeho byste pomocí této knihovny nemohli dosáhnout. Nejprve pomocí editoru Three.js vytvoříte scénu. Poté přidáte geometrické útvary a upravíte osvětlení a kameru. Materiál, textura, objekt, barva a mlha mohou být vyladěny a konečný soubor publikován do vašeho projektu.

5. GreenSock JS

GreenSock

Program GSAP společnosti GreenSock pracuje se sadou malých souborů JavaScriptu, díky nimž budou animace vypadat skvěle ve všech hlavních prohlížečích. Hladce spojuje více vlastností animace a eliminuje chyby prohlížeče.

Akce GSAP zahrnují vytváření animací na plátně a animaci libovolného objektu ve scéně. Také postupně odhaluje, morfuje nebo pohybuje jakýkoli objekt podél cesty. Za tímto účelem pracuje se spoustou softwarových aplikací, jako jsou SVGPlugins, PixiPlugin, WebGL, Adobe Animate a EaseJS. Jeho modulární struktura vám pomůže vybrat jen ty funkce, které potřebujete. S 8 miliony uživatelů a 10 K + hvězdami GitHub, tato mocná knihovna má toho hodně společného.

6. AniJS

AniJS

Mezi knihovnami JavaScriptu v tomto seznamu je AniJS poněkud jedinečná. Umožňuje přidávat animace k elementům v jednoduché struktuře podobné větám, což je skvělé pro lidi, kteří v animaci začínají. A co víc, jeho nespecifická povaha umožňuje, aby ji téměř každý použil v rutinním designu UX.

Na GitHub, AniJS hodnotí více než 3,5 000 hvězdiček. Nespoléhá se na žádnou knihovnu třetích stran a obecně pomáhá urychlit vývoj. Funguje to stejně dobře pro Android a iOS a také ve všech populárních prohlížečích.

7. Mo.js

Mo.js

Pohyblivá grafika má velkou roli v animacích a Mo.js je jednou z možností, kterou můžete ovlivnit. S řadou tutoriálů a ukázek, které vám pomohou, nemusí být pro začátečníky obtížné vytvářet geometrické tvary a animace času na tečku.

Rozhraní API se mohou zdát jednoduchá, ale s nimi můžete hodně dělat. V sadě nástrojů najdete Editor křivek a Editor časové osy, který vám pomůže s vytvářením animací, a přehrávač, který vaše animace ovládá. Existují různé moduly pro ohromující, uvolňující, časovou osu a další. To vše vydělává Mo.js téměř 16 000 hvězd GitHub.

8. Vivus.js

Knihovny animací JavaScriptu: Vivus

Pokud chcete napodobit kresbu perem na obrazovce v reálném čase, narazíte na značku pomocí Vivus. To vám umožní animovat SVG, což působí dojmem nakreslení. Protože nemá závislost, je rychlý a lehký.

Můžete si vybrat kteroukoli z dostupných animací – Delayed, Sync nebo OneByOne. Jinak můžete také vytvořit vlastní skript pro nakreslení SVG. Pro větší flexibilitu můžete přepsat animaci každé cesty pomocí jednoduché funkce JavaScriptu. Více než 13 000 uživatelů dává této knihovně palce nahoru GitHub.

9. ScrollReveal JS

ScrollReveal

Pokud si přejete animovat své webové prvky, když se posouvají do zobrazení, ScrollReveal nezklame. Tato snadno naučitelná knihovna animací má nulovou závislost a 18,5 K + hvězd GitHub.

ScrollReveal podporuje různé typy efektů a funguje dobře s webovými a mobilními prohlížeči. Záměrně pracuje s konfigurací holých kostí, takže ji můžete použít jako plátno pro vaši kreativitu. Aby se maximalizoval účinek animací, tvůrci doporučují, abyste je používali střídmě.

10. Typed.js

Typed.js

Typed.js je jednoduchá knihovna (vlastně spíše plugin), která animuje psaní na obrazovce. Jakmile zadáte libovolný řetězec, může návštěvník sledovat, jak je zadán zadanou rychlostí. Nejen to, že můžete pracovat tlačítko backspace, stejně jako začít novou větu. Pokud chcete umožnit návštěvníkům se zdravotním postižením JS, aby si ji mohli také prohlédnout, stačí na stránku umístit div HTML. Tímto způsobem mohou roboti a vyhledávače také zobrazit zadaná slova.

Tato knihovna hodnotí 9,5 kB a více hvězd GitHub. Mezi mocné uživatele patří Slack a Envato.

11. Lottie od AirBnB

Knihovny animací JavaScriptu: Lottie

Lottie je lehký animovaný grafický formát, který vyrovnává vysoce kvalitní grafiku s náklady na jejich vykreslení. Zmenší aplikace a obsahuje dynamické funkce. Lze jej použít pro web, Android, iOS a IoTs, bez nutnosti dalšího softwaru.

Lottie může běžet v kterémkoli prohlížeči, který podporuje JavaScript. Animace jsou uloženy v prostém textu a jsou snadno čitelné. Protože jsou textová data uložena ve formátu JSON, lze je snadno přizpůsobit jakémukoli prostředí JavaScriptu. Díky tomu je populární animovaný grafický formát, který vylepšuje mobilní rozhraní. Samotná verze systému Android má téměř 30 000 hvězd GitHub.

Pokud jste dosáhli konce tohoto seznamu knihoven animací JavaSCript, možná budete také chtít vyhledat další knihovny a rámce jazyka JavaScript. Nebo se podívejte na tyto nejlepší knihovny komponent React UI.

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 50–80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector