Oživení webové aplikace pomocí animací patří k nejúčinnějším způsobům, jak vylepšit její vizuální stránku a celkový dojem.
Animace, neboli pohyblivé prvky, slouží webovým návrhářům a vývojářům k zaujetí pozornosti uživatelů a nenápadnému navedení k určitým akcím.
Ruční kódování animací může být náročné, proto je výhodné využít specializované knihovny.
Animační knihovna je soubor předpřipravených animací, které mohou návrháři snadno integrovat do svých webových stránek.
Proč zvolit knihovny animací?
- Úspora času: Animační knihovny poskytují základní stavební bloky, což vám dává více času věnovat se funkcionalitě vaší aplikace.
- Přizpůsobitelnost: Knihovny animací obvykle nabízejí standardní kód, který si můžete upravit podle svých specifických potřeb.
- Snadná konzistence designu: Pokud používáte animace na různých místech webu, sjednocení knihovny zajistí jednotný vzhled barev a písma.
- Široká škála efektů: Některé knihovny animací nabízejí rozsáhlý výběr různých animací.
Provedl jsem analýzu několika špičkových JavaScriptových animačních knihoven, které můžete efektivně využít:
Anime.js
Anime.js je odlehčená JavaScriptová knihovna, která disponuje silným API. Lze ji použít s JavaScriptovými objekty, atributy DOM, SVG a CSS vlastnostmi.
Instalace
npm install animejs --save
Použití
import anime from 'animejs/lib/anime.es.js';
Klíčové vlastnosti:
- Intuitivní použití: Anime.js se snadno používá i pro ty, kteří nemají hluboké znalosti JavaScriptu. K tomu přispívá i kvalitní dokumentace.
- Rozšiřitelnost: Kód z této knihovny si můžete upravit podle svých potřeb. Lze také vytvářet zpětná volání, časové osy a funkce pro náběh a doběh animace.
- Flexibilita: Anime.js není pouze animační knihovna pro JavaScript. Můžete ji využít i pro SVG a CSS vlastnosti.
- Podpora napříč prohlížeči: Animace z Anime.js fungují bez problémů 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 zaměřená na pohyblivou grafiku. Poskytuje úplnou kontrolu nad animacemi prostřednictvím deklarativního API.
Instalace
npm install @mojs/core
nebo
yarn add @mojs/core
Použití;
import mojs from '@mojs/core';
Klíčové vlastnosti:
- Modularita: Komponenty v této knihovně jsou rozděleny do menších, opakovaně použitelných bloků kódu. Při testování jsem mohl přidávat a odebírat různé komponenty, aniž bych musel přepisovat celý kód.
- Jednoduchost: Deklarativní API usnadňuje použití a přizpůsobení komponent této knihovny.
- Responzivita: Mo.js je připraven pro displeje s vysokým rozlišením, takže reaguje na různé velikosti obrazovky.
- Robustnost: Knihovna prošla důkladným testováním, které zajistilo její bezchybné fungování.
Mo.js je bezplatná knihovna s otevřeným zdrojovým kódem.
Popmotion
Popmotion je jednoduchá animační knihovna určená k tvorbě příjemných uživatelských rozhraní. Je snadno použitelná s vanilkovým JavaScriptem a většinou JavaScriptových knihoven a frameworků.
Instalace
npm install popmotion
Použití
import { animate } from "popmotion"
Klíčové vlastnosti:
- Výkon: I přes svou malou velikost (4,5 kb) podporuje pružinové animace, setrvačnost a klíčové snímky pro barvy, čísla a komplexní řetězce.
- Podpora TypeScriptu: Popmotion je napsaný v TypeScriptu, nadstavbě JavaScriptu. Pokud ve svém projektu používáte TypeScript, můžete využít typovou kontrolu.
- Přizpůsobitelnost: Komponenty této knihovny lze upravit podle vašich animačních potřeb.
- Stabilita: Všechny komponenty v Popmotion prošly důkladným testováním.
Popmotion je volně dostupný.
Theatre.js
Theatre.js je knihovna nabízející profesionální nástroje pro design pohybu. Umožňuje navrhovat filmové scény a působivé interakce s uživatelským rozhraním.
Pro použití Theatre.js s HTML a čistým JavaScriptem, můžete přidat odkaz na CDN do sekce head vašeho HTML dokumentu.
Klíčové vlastnosti:
- Kompatibilita s různými frameworky a knihovnami: Theatre.js lze použít s React Three Fiber a THREE.js.
- Přizpůsobitelnost: Knihovna disponuje pokročilým editorem sekvencí pro blokování sekvencí během několika sekund. Editor grafů umožňuje doladit každý snímek ve vaší aplikaci.
- Rozšiřitelnost: Theatre.js má různá rozšíření, která zvyšují jeho funkčnost. Můžete do ní přidat své vlastní nástroje či rozšíření.
Theatre.js je open-source knihovna.
ScrollReveal.js je JavaScriptová knihovna, která umožňuje animovat prvky při posouvání do viditelné části stránky.
Instalace;
npm install scrollreveal
Použití;
const ScrollReveal = require('scrollreveal')
Klíčové vlastnosti:
- Jednoduchost použití: Pro animování prvků stačí přidat třídu `scrollreveal` a můžete začít.
- Rozšiřitelnost: Můžete přidávat a odebírat prvky z komponent této knihovny.
- Flexibilita: ScrollReveal.js lze nastavit tak, aby odhaloval prvky při najetí myší, kliknutí nebo posouvání. Umožňuje vám kontrolovat rychlost a směr odhalování, i použít různé křivky zmírnění.
ScrollReveal.js je placená knihovna s cenami od 30 USD.
GreenSock GSAP
GreenSock GSAP je JavaScriptová knihovna pro animaci SVG, UI, React nebo Three.js komponent. Nabízí vše potřebné pro tvorbu rychlých a atraktivních animací.
Klíčové vlastnosti:
- Vysoká kompatibilita: GSAP lze použít s Canvas, CSS, HTML, SVG a JavaScript knihovnami a frameworky jako Angular, React, Vue a jQuery.
- Rozšiřitelnost: Modulární architektura GSAP umožňuje přizpůsobit komponenty podle potřeb animace.
- Flexibilita: GSAP nemá žádný předdefinovaný seznam animovatelných prvků. Můžete animovat jakoukoliv numerickou vlastnost objektu.
- Robustnost: S GSAP můžete animovat pole, Bézierovy křivky, CSS vlastnosti, barvy a další. Knihovna umožňuje vytvářet sekvence, opakování, yoyo efekty a definovat zpětná volání.
GreenSock Animation Platform (GSAP) nabízí bezplatný balíček, zatímco placené verze začínají od 88 GBP.
ProgressBar.js
ProgressBar.js je animační knihovna pro vytváření responzivních a stylových ukazatelů průběhu pro web.
Instalace
Použití Boweru
bower install progressbar.js
Použití npm
npm install progressbar.js
Klíčové vlastnosti:
- Různé předdefinované tvary: ProgressBar.js má tři vestavěné tvary – půlkruh, kruh a čáru. Umožňuje také vytváření vlastních tvarů.
- Responzivita: Ukazatele průběhu z této knihovny fungují bezchybně na různých velikostech obrazovky.
- Přizpůsobitelnost: Lze upravovat barvy komponent, velikost písma a jeho styl.
ProgressBar.js je knihovna s otevřeným zdrojovým kódem.
AnisJS
AniJS je knihovna interakcí uživatelského rozhraní, která poskytuje rychlý a snadný způsob vývoje a prototypování. Po zazipování má pouze 9,0 kb.
Instalace;
bower install anijs --save
Použití;
<script src=”anijs-min.js”></script>
Klíčové vlastnosti:
- Snadné použití: Pro animování prvku stačí přidat třídu AnisJS.
- Rozšiřitelnost: Komponenty z AnisJS lze upravit podle vašich potřeb.
- Flexibilita: AnisJS lze použít s JavaScriptovými objekty, atributy SVG, CSS vlastnostmi a prvky DOM.
- Kompatibilita s hlavními prohlížeči: AnisJS lze použít 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. Používá WebGL renderovací engine, ale podporuje také SVG a CSS3D vykreslování jako doplňky.
Instalace;
npm install --save three
Použití;
import * as THREE from 'three';
Klíčové vlastnosti:
- Snadné použití: Three.js má dobře zdokumentované API, což usnadňuje nastavení a použití.
- Výkon: Pomocí této knihovny můžete vytvářet komplexní 3D scény. Three.js podporuje animace, materiály a osvětlení.
- Flexibilita: Můžete vytvářet různé 3D animace pro hry, vizualizace či simulace.
- Kompatibilita s různými frameworky a knihovnami: Three.js lze použít s React Three Fiber, Egret, Aframe, PlayCanvas a Babylon.js.
Three.js je open-source JavaScriptová knihovna.
Vivus.js
vivus.js je odlehčená JavaScriptová knihovna pro animaci SVG. Animace SVG s touto knihovnou vypadají, jako by byly kreslené rukou.
Instalace;
npm install vivus
nebo
bower install vivus
Klíčové vlastnosti:
- Různé typy animací: Vivus.js umožňuje vytvářet zpožděné (delayed), po jednom (OnebyOne) a synchronizované (Sync) animace. Zpožděná animace je výchozí.
- Možnost vlastních skriptů: Místo použití předdefinovaných typů animací můžete vytvářet vlastní skripty pro animaci SVG.
- Žádné závislosti: Vivus.js je nezávislá knihovna, kterou můžete použít ve většině webových projektů.
Vivus.js je bezplatná knihovna.
Tilt.js
Tilt.js je malá JavaScriptová knihovna, která umožňuje vytvářet 3D efekty naklánění prvků DOM. Můžete ji použít s vanilkovým JavaScriptem i frameworky jako React, Preact, Angular a Polymer.
Instalace;
npm install --save tilt.js
Nebo
yarn add tilt.js
Použití;
Přidejte tento skript těsně před koncovou značku </body>.
<script src=”tilt.jquery.js”></script>
Klíčové vlastnosti:
- Snadné použití: Pro použití Tilt.js stačí přidat atribut data-tilt k prvku, na který chcete cílit.
- Přizpůsobitelnost: Komponenty z Tilt.js lze upravit podle vašich potřeb.
- Responzivita: Komponenty z této knihovny lze použít na zařízeních s různou velikostí obrazovky.
- Usnadnění: Tilt.js je navržena s ohledem na usnadnění a podporuje čtečky obrazovky a navigaci pomocí klávesnice.
Barba.js
Barba.js je malá knihovna pro vytváření plynulých přechodů mezi stránkami na webu. Minifikovaná a komprimovaná verze má pouhých 7 kb a pomáhá minimalizovat požadavky prohlížeče a zkrátit prodlevy mezi stránkami.
Instalace;
npm install @barba/core
nebo
yarn add @barba/core
Použití;
import barba from '@barba/core';
Klíčové vlastnosti:
- Napsáno v TypeScriptu: Chyby v kódu můžete odhalit brzy, protože TypeScript umožňuje definovat typy v kódu.
- Inteligentní přechody: Barba.js umožňuje definovat pravidla a určuje správné přechody pro vaši aplikaci.
- Různé pluginy: Funkcionalitu Barba.js můžete vylepšit pomocí pluginů, jako jsou barbarouter a barbaprefetch.
BarbaJS je volně dostupná knihovna pod licencí MIT.
Splide
Splide je odlehčený posuvník/karusel napsaný v TypeScriptu. Umožňuje vytvářet různé typy snímků změnou voleb, jako jsou miniatury, více snímků, vertikální směr a vnořené posuvníky.
Instalace;
npm install @splidejs/splide
Klíčové vlastnosti:
- Rozšiřitelnost: Prostřednictvím funkce rozšíření můžete do aplikace přidávat další komponenty.
- Flexibilita: Pomocí Splide můžete vytvářet různé typy posuvníků, jako jsou posuvníky videa, textové posuvníky a posuvníky obrázků. Lze také vytvářet vnořené posuvníky.
- Nezávislost: Splide lze použít s jakýmkoli nástrojem pro sestavení nebo frameworkem, protože není závislá na jiných knihovnách.
Splide nabízí bezplatný balíček pro osobní použití. Pro komerční použití je třeba získat licenci na prémiové balíčky, které začínají na 10 USD.
Závěr
Výše uvedené animační knihovny můžete použít k přeměně statických rozvržení na živá interaktivní prostředí. Volba knihovny animací by měla být podřízena tomu, co chcete docílit a jak snadné má být její použití. Někdy je vhodné použít více animačních knihoven na různých stránkách aplikace.
Pokud máte rádi JavaScriptové knihovny, doporučujeme vám prostudovat náš článek o nejlepších React animačních knihovnách.