Přidání animací do vaší webové aplikace je jedním z nejlepších přístupů ke zlepšení vzhledu a dojmu z vaší aplikace.
Animace jsou pohyblivé objekty, které weboví designéři/vývojáři používají k upoutání pozornosti uživatelů a nasměrování k provedení určitých akcí.
Psaní kódu pro přidání animací může být hodně práce. Naštěstí můžete použít knihovnu animací.
Knihovna animací je kolekce předem připravených animačních souborů, které mohou návrháři přidat na své webové stránky.
Table of Contents
Proč používat knihovny animací?
- Šetří čas: Knihovna animací poskytne barebones, což vám poskytne více času soustředit se na funkčnost vaší aplikace.
- Přizpůsobitelné: Knihovny animací obvykle nabízejí standardní kód, který si můžete přizpůsobit tak, aby vyhovoval vašim potřebám.
- Snadné dosažení jednotného designu: Pokud máte animace na různých webových stránkách, můžete použít jednu knihovnu, abyste zajistili, že prolnutí barev a písma budou konzistentní.
- Poskytují širokou škálu efektů: Některé knihovny animací mají na výběr mnoho animací.
Zkontroloval jsem některé z nejlepších knihoven animací JavaScriptu, které můžete použít následovně;
Anime.js
Anime.js je lehká JavaScriptová knihovna s výkonným API. Tuto knihovnu můžete použít s objekty JavaScriptu, atributy DOM, SVG a vlastnostmi CSS.
Instalace
npm nainstalovat animejs –uložit
Používání
import anime z ‚animejs/lib/anime.es.js‘;
Klíčové vlastnosti:
- Snadné použití: Zjistil jsem, že Anime.js se snadno používá, a to i pro ty, kteří mají omezené znalosti JavaScriptu, protože je dobře zdokumentován.
- Rozšiřitelnost: Bloky kódu z této knihovny si můžete přizpůsobit tak, aby vyhovovaly vašim potřebám. Můžete také vytvářet zpětná volání, časové osy a funkce náběhu/doběhu.
- Flexibilní: Anime.js není pouze JavaScriptová animační knihovna; můžete jej použít s vlastnostmi SVG a CSS.
- Podpora více prohlížečů: Animace z Anime.js běží v různých prohlížečích, jako je Chrome, Safari, IE/Edge, Firefox a Opera.
Anime.js je open-source, bezplatná knihovna.
Mo.js
Mo.js je JavaScriptová knihovna pohyblivé grafiky. Knihovna vám dává úplnou kontrolu nad animacemi prostřednictvím svého deklarativního API.
Instalace
npm install @mojs/core
nebo
příze přidat @mojs/core
Používání;
import mojs z ‚@mojs/core‘;
Klíčové vlastnosti:
- Modulární: Komponenty v této knihovně jsou rozděleny do malých, opakovaně použitelných bloků kódu. Při testování této knihovny jsem mohl přidat nebo odstranit různé komponenty bez přepisování celého kódu.
- Jednoduché: Deklarativní design API usnadňuje použití této knihovny a přizpůsobení jejích komponent.
- Responzivní: Mo.js je připraven pro sítnici, takže reaguje na různé velikosti obrazovky.
- Robustní: Tato knihovna byla důkladně testována, aby bylo zajištěno, že funguje podle očekávání.
Mo.js je bezplatná knihovna s otevřeným zdrojovým kódem.
Popmotion
Popmotion je jednoduchá knihovna animací pro vytváření příjemných uživatelských rozhraní. Zjistil jsem, že je snadné používat tuto knihovnu s vanilkovým JavaScriptem a většinou JavaScriptových knihoven a frameworků.
Instalace
npm install popmotion
Používání
import { animate } z „popmotion“
Klíčové vlastnosti:
- Výkonný: Přestože funkce animace má pouze 4,5 kb, podporuje animace pružin, setrvačnosti a klíčových snímků pro barvy, čísla a složité řetězce.
- Podpora TypeScript: Popmotion je napsán v TypeScriptu, horním indexu JavaScriptu. Pokud tedy ve svém projektu používáte TypeScript, můžete použít typy.
- Přizpůsobitelné: Komponenty z této knihovny lze přizpůsobit tak, aby vyhovovaly vašim potřebám animace.
- Stabilní: Všechny komponenty v Popmotion byly podrobeny důkladnému testování.
Popmotion je zdarma k použití.
Theatre.js
Theatre.js je knihovna s profesionální sadou nástrojů pro návrh pohybu. S ním můžete navrhovat filmové scény a nádherné interakce s uživatelským rozhraním.
Chcete-li použít Theatre.js s HTML a prostým JavaScriptem, můžete přidat jeho odkaz CDN do sekce head vašeho HTML dokumentu.
Klíčové vlastnosti:
- Funguje s několika frameworky a knihovnami JavaScriptu: Theatre.js můžete použít s React Three Fiber a THREE.js.
- Přizpůsobitelné: Tato knihovna má špičkový editor sekvencí, který vám pomůže blokovat sekvence během několika sekund. Pomocí editoru grafů můžete také doladit každý snímek ve vaší aplikaci.
- Extensible: Theatre.js má různá rozšíření, která zvyšují jeho použitelnost. Do této knihovny můžete použít své nástroje nebo přidat rozšíření.
Theatre.js je knihovna s otevřeným zdrojovým kódem.
ScrollReveal.js je knihovna JavaScriptu, která umožňuje animovat prvky, když se posouvají do výřezu.
Instalace;
npm nainstalovat scrollreveal
Používání;
const ScrollReveal = vyžadovat(‚scrollreveal‘)
Klíčové vlastnosti:
- Snadné použití: Přidejte třídu scrollreveal k prvkům, které chcete animovat, a jste připraveni začít používat tuto knihovnu.
- Rozšiřitelné: Můžete přidat nové prvky nebo je odebrat z komponent, které získáte z této knihovny.
- Flexibilní: ScrollReveal.js můžete nastavit tak, aby odkryl prvky při najetí myší, kliknutí nebo posouvání. Knihovna vám také umožňuje ovládat zmírnění, směr a rychlost odhalení.
ScrollReveal.js je placená knihovna s balíčky od 30 USD.
GreenSock GSAP
GreenSock GSAP je JavaScriptová knihovna pro animaci komponent SVG, UI, React nebo Three.js. Knihovna má vše, co potřebujete k vytvoření rychlých a atraktivních animací.
Klíčové vlastnosti:
- Vysoká kompatibilita: GSAP můžete používat s knihovnami a frameworky Canvas, CSS, HTML, SVG a JavaScript, jako jsou Angular, React, Vue a jQuery.
- Rozšiřitelné: Modulární architektura GSAP vám umožňuje přizpůsobit komponenty tak, aby vyhovovaly vašim potřebám animace.
- Flexibilní: GSAP nemá žádný předdefinovaný seznam věcí, které můžete animovat. Můžete animovat libovolnou číselnou vlastnost objektu.
- Robustní: S GSAP můžete animovat pole, Béziery, vlastnosti CSS, barvy a další. Tato knihovna také umožňuje vytvářet sekvence, opakovat, yoyo a definovat zpětná volání.
GreenSock Animation Platform (GSAP) má bezplatný balíček, zatímco placený začíná od 88 GBP.
ProgressBar.js
ProgressBar.js je knihovna animací pro vytváření responzivních a stylových ukazatelů průběhu pro web.
Instalace
Použití altánek
bower install progressbar.js
Pomocí npm
npm install progressbar.js
Klíčové vlastnosti:
- Různé vestavěné tvary: ProgressBar.js má tři vestavěné tvary, půlkruh, kruh a čáru. Pomocí této knihovny můžete také vytvořit vlastní tvar.
- Responzivní: Ukazatele průběhu z této knihovny fungují perfektně na různých velikostech obrazovky.
- Přizpůsobitelné: Můžete si přizpůsobit barvy komponent, velikost písma a styl písma.
ProgressBar.js je knihovna s otevřeným zdrojovým kódem.
AnisJS
AniJS je knihovna interakce uživatelského rozhraní, která poskytuje rychlý a snadný způsob vývoje a prototypování uživatelských rozhraní. Tato knihovna má po zazipování 9,0 kb.
Instalace;
bower install anijs –save
Používání;
Klíčové vlastnosti:
- Jednoduché použití: Chcete-li použít tuto knihovnu, přidejte třídu AnisJS k prvku, který potřebujete animovat.
- Rozšiřitelnost: Komponenty z AnisJS si můžete přizpůsobit tak, aby vyhovovaly vašim potřebám.
- Flexibilní: AnisJS můžete používat s objekty JavaScriptu, atributy SVG, vlastnostmi CSS a prvky DOM.
- Kompatibilní s hlavními prohlížeči: AnisJS můžete používat s Chrome, Firefox, Safari a Edge.
AnisJS je open-source knihovna, kterou lze používat zdarma.
Three.js
Three.js je univerzální 3D knihovna. Knihovna používá vykreslovací modul WebGL, ale také podporuje vykreslování SVG a CSS3D jako doplňky.
Instalace;
npm instalace – uložte tři
Používání;
import * jako TŘI z ‚tři‘;
Klíčové vlastnosti:
- Snadné použití: Three.js má dobře zdokumentované API, což usnadňuje nastavení a používání.
- Výkonný: Pomocí této knihovny můžete vytvářet složité 3D scény. Three.js také podporuje různé funkce, jako jsou animace, materiály a osvětlení.
- Flexibilní: Můžete vytvářet různé 3D animace od her, vizualizací až po simulace.
- Kompatibilní s různými frameworky a knihovnami: Knihovnu Three.js můžete použít s React Three Fiber, Egret, Aframe, PlayCanvas a Babylon.js.
Three.js je open-source JavaScriptová knihovna.
Vivus.js
vivus.js je lehká JavaScriptová knihovna pro animaci SVG. Když animujete SVG pomocí této knihovny, vypadají, jako by byly nakreslené.
Instalace;
npm install vivus
nebo
bower install vivus
Klíčové vlastnosti:
- Různé typy animací: Vivus.js vám umožňuje vytvářet zpožděné, OnebyOne a Sync animace. Zpožděná je výchozí typ animace v této knihovně.
- Umožňuje vlastní skripty: Místo použití typů animací dostupných v této knihovně můžete vytvářet vlastní skripty pro animaci souborů SVG.
- Žádné závislosti: Tuto knihovnu můžete použít na většině webových projektů, protože je nezávislá.
Vivus.js je bezplatná knihovna.
Tilt.js
Tilt.js je malá JavaScriptová knihovna, která umožňuje vývojářům vytvářet 3D efekty naklonění na DOM. Tilt.js můžete používat s vanilkovým JavaScriptem nebo knihovnami a frameworky jako React, Preact, Angular a Polymer.
Instalace;
npm install –save tilt.js
Nebo
příze přidat tilt.js
Používání;
Přidejte tento skript těsně před koncovou značku
