Animációk hozzáadása a webalkalmazáshoz az egyik legjobb módszer az alkalmazás megjelenésének és hangulatának javítására.
Az animációk mozgó objektumok, amelyeket a webtervezők/fejlesztők arra használnak, hogy lekötik a felhasználók figyelmét, és bizonyos műveletekre irányítsák őket.
Az animációk hozzáadásához szükséges kód írása sok munkát igényel. Szerencsére használhat animációs könyvtárat.
Az animációs könyvtár olyan előre elkészített animációs fájlok gyűjteménye, amelyeket a tervezők hozzáadhatnak webhelyeikhez.
Tartalomjegyzék
Miért érdemes animációs könyvtárakat használni?
- Időt takarít meg: Az animációs könyvtár biztosítja a barebone-okat, így több ideje marad az alkalmazás funkcionalitására összpontosítani.
- Testreszabható: Az animációs könyvtárak általában olyan sablonkódot kínálnak, amelyet az igényeinek megfelelően testre szabhat.
- Könnyen elérhető egységes kialakítás: Ha különböző weboldalakon vannak animációi, egyetlen könyvtár használatával biztosíthatja a színkeverés és a betűtípusok egységességét.
- Az effektusok széles skáláját kínálja: Egyes animációs könyvtárak számos animáció közül választhatnak.
Áttekintettem néhány legjobb JavaScript-animációs könyvtárat, amelyeket az alábbiak szerint használhat;
Anime.js
Az Anime.js egy könnyű JavaScript-könyvtár hatékony API-val. Ezt a könyvtárat JavaScript objektumokkal, DOM-attribútumokkal, SVG- és CSS-tulajdonságokkal használhatja.
Telepítés
npm install animejs – mentés
Használat
animék importálása az ‘animejs/lib/anime.es.js’ címről;
Főbb jellemzők:
- Könnyen használható: Az Anime.js-t könnyűnek találtam, még azok számára is, akik korlátozottan ismerik a JavaScriptet, mivel jól dokumentált.
- Bővíthető: testreszabhatja a kódblokkokat ebből a könyvtárból az igényeinek megfelelően. Létrehozhat visszahívásokat, idővonalakat és könnyítő funkciókat is.
- Rugalmas: Az Anime.js nem csak egy JavaScript animációs könyvtár; SVG és CSS tulajdonságokkal használhatod.
- Több böngésző támogatása: Az Anime.js animációi különböző böngészőkön futnak, például Chrome, Safari, IE/Edge, Firefox és Opera.
Az Anime.js egy nyílt forráskódú, ingyenes könyvtár.
Mo.js
A Mo.js egy JavaScript mozgógrafikus könyvtár. A könyvtár teljes irányítást biztosít az animációk felett a deklaratív API-ján keresztül.
Telepítés
npm telepítés @mojs/core
vagy
fonal add @mojs/core
Használat;
mojs importálása innen: ‘@mojs/core’;
Főbb jellemzők:
- Moduláris: A könyvtár komponensei kis, újrafelhasználható kódblokkra vannak felosztva. A könyvtár tesztelése során a teljes kód átírása nélkül hozzáadhattam vagy megszüntethetem különféle összetevőket.
- Egyszerű: Az API deklaratív kialakítása megkönnyíti a könyvtár használatát és komponenseinek testreszabását.
- Reszponzív: A Mo.js retina-kompatibilis, így reagál a különböző képernyőméretekre.
- Robusztus: Ezt a könyvtárat alaposan tesztelték annak érdekében, hogy az elvárásoknak megfelelően működjön.
A Mo.js egy ingyenes, nyílt forráskódú könyvtár.
Popmotion
A Popmotion egy egyszerű animációs könyvtár csodálatos felhasználói felületek létrehozásához. Könnyűnek találtam ezt a könyvtárat a vanilla JavaScript-szel és a legtöbb JavaScript-könyvtárral és keretrendszerrel.
Telepítés
npm install popmotion
Használat
import { animation } from „popmotion”
Főbb jellemzők:
- Erőteljes: Bár az animációs funkció mindössze 4,5 kb, támogatja a rugós, tehetetlenségi és kulcskép-animációkat színekhez, számokhoz és összetett karakterláncokhoz.
- TypeScript-támogatás: A Popmotion TypeScriptben, a JavaScript felső indexében van írva. Így használhat típusokat, ha TypeScriptet használ a projektben.
- Testreszabható: A könyvtár összetevői testreszabhatók az animációs igényeinek megfelelően.
- Stabil: A Popmotion összes alkatrészét alapos tesztelésnek vetették alá.
A Popmotion ingyenesen használható.
Theatre.js
A Theatre.js egy könyvtár professzionális mozgástervező eszközkészlettel. Ezzel moziszerű jeleneteket és elragadó interakciókat tervezhet a felhasználói felülettel.
A Theatre.js HTML-lel és sima JavaScript-kóddal való használatához a CDN-hivatkozást elhelyezheti HTML-dokumentuma fejrészében.
Főbb jellemzők:
- Számos JavaScript-keretrendszerrel és könyvtárral működik: A Theatre.js-t használhatja a React Three Fiberrel és a THREE.js-sel.
- Testreszabható: Ez a könyvtár élvonalbeli szekvenciaszerkesztővel rendelkezik, amely segít másodpercek alatt blokkolni a sorozatokat. Az alkalmazás minden képkockáját finomhangolhatja a grafikonszerkesztő segítségével.
- Bővíthető: A Theatre.js számos kiterjesztéssel rendelkezik, amelyek növelik a használhatóságot. Használhatja eszközeit, vagy bővítményeket adhat hozzá ehhez a könyvtárhoz.
A Theatre.js egy nyílt forráskódú könyvtár.
A ScrollReveal.js egy JavaScript-könyvtár, amely lehetővé teszi az elemek animálását, miközben a nézetablakban görgetnek.
Telepítés;
npm install scrollreveal
Használat;
const ScrollReveal = request(‘scrollreveal’)
Főbb jellemzők:
- Könnyen használható: Adja hozzá a scrollreveal osztályt az animálni kívánt elemekhez, és máris használhatja ezt a könyvtárat.
- Bővíthető: Új elemeket adhat hozzá, vagy eltávolíthatja őket a könyvtárból kapott összetevőkből.
- Rugalmas: Beállíthatja, hogy a ScrollReveal.js felfedje az elemeket az egérmutatóval, kattintással vagy görgetéssel. A könyvtár lehetővé teszi a felfedés könnyítésének, irányának és sebességének szabályozását is.
A ScrollReveal.js egy fizetős könyvtár 30 dollártól kezdődő csomagokkal.
GreenSock GSAP
A GreenSock GSAP egy JavaScript-könyvtár SVG, UI, React vagy Three.js komponensek animálására. A könyvtárban minden megtalálható, ami a gyors és vonzó animációk készítéséhez szükséges.
Főbb jellemzők:
- Kiváló kompatibilitás: A GSAP-t Canvas, CSS, HTML, SVG és JavaScript könyvtárakkal és keretrendszerekkel használhatja, mint például az Angular, React, Vue és jQuery.
- Bővíthető: A GSAP moduláris architektúrája lehetővé teszi az összetevők testreszabását az animációs igényeinek megfelelően.
- Rugalmas: A GSAP-nek nincs előre meghatározott listája azokról a dolgokról, amelyeket animálhat. Az objektum bármely numerikus tulajdonságát animálhatja.
- Robusztus: A GSAP segítségével tömböket, beziereket, CSS-tulajdonságokat, színeket és egyebeket animálhat. Ez a könyvtár lehetővé teszi sorozatok felépítését, ismétlését, jojót és visszahívások meghatározását.
A GreenSock Animation Platform (GSAP) ingyenes csomaggal rendelkezik, míg a fizetős 88 GBP-tól kezdődik.
ProgressBar.js
A ProgressBar.js egy animációs könyvtár reszponzív és stílusos folyamatjelző sávok létrehozásához az interneten.
Telepítés
Bower használata
bower install progressbar.js
Az npm használatával
npm install progressbar.js
Főbb jellemzők:
- Különféle beépített alakzatok: A ProgressBar.js három beépített alakzattal rendelkezik, egy félkör, kör és vonal. Ezzel a könyvtárral egyéni alakzatot is létrehozhat.
- Érzékeny: A könyvtár folyamatjelző sávjai tökéletesen működnek különböző képernyőméreteken.
- Testreszabható: Testreszabhatja az összetevők színét, betűméretét és betűstílusát.
A ProgressBar.js egy nyílt forráskódú könyvtár.
AnisJS
Az AniJS egy UI interakciós könyvtár, amely gyors és egyszerű módot biztosít felhasználói felületek fejlesztésére és prototípusára. Ez a könyvtár 9,0 kb méretű a tömörítés után.
Telepítés;
bower install anijs –save
Használat;
Főbb jellemzők:
- Egyszerű használat: A könyvtár használatához adja hozzá az AnisJS osztályt az animálni kívánt elemhez.
- Bővíthető: Az AnisJS összetevőit igényeinek megfelelően testreszabhatja.
- Rugalmas: Az AnisJS használható JavaScript-objektumokkal, SVG-attribútumokkal, CSS-tulajdonságokkal és DOM-elemekkel.
- Kompatibilis a főbb böngészőkkel: AnisJS-t használhat Chrome, Firefox, Safari és Edge segítségével.
Az AnisJS egy nyílt forráskódú könyvtár, amely ingyenesen használható.
Three.js
A Three.js egy általános célú 3D-s könyvtár. A könyvtár WebGL-megjelenítőt használ, de kiegészítésként támogatja az SVG és CSS3D renderereket is.
Telepítés;
npm install – hármat elment
Használat;
import * mint HÁROM a ‘háromból’;
Főbb jellemzők:
- Könnyű használat: A Three.js jól dokumentált API-val rendelkezik, amely megkönnyíti a beállítását és a használatát.
- Erőteljes: Ezzel a könyvtárral összetett 3D-s jeleneteket hozhat létre. A Three.js különféle funkciókat is támogat, például animációkat, anyagokat és világítást.
- Rugalmas: Különféle 3D-s animációkat készíthet, a játékoktól kezdve a vizualizációkon át a szimulációkig.
- Különféle keretrendszerekkel és könyvtárakkal kompatibilis: A Three.js könyvtárat használhatja a React Three Fiber, Egret, Aframe, PlayCanvas és Babylon.js programokkal.
A Three.js egy nyílt forráskódú JavaScript-könyvtár.
Vivus.js
A vivus.js egy könnyű JavaScript-könyvtár SVG-k animálásához. Amikor SVG-ket animál ezzel a könyvtárral, úgy jelennek meg, mintha rajzolták volna őket.
Telepítés;
npm install vivus
vagy
bower install vivus
Főbb jellemzők:
- Különféle animációs típusok: A Vivus.js lehetővé teszi késleltetett, OnebyOne és Sync animációk létrehozását. A késleltetett az alapértelmezett animációs típus ebben a könyvtárban.
- Egyéni szkriptek engedélyezése: Az ebben a könyvtárban elérhető animációs típusok használata helyett egyéni szkripteket hozhat létre az SVG-fájlok animálásához.
- Nincsenek függőségek: Ezt a könyvtárat a legtöbb webes projektben használhatja, mivel függőségmentes.
A Vivus.js egy ingyenes könyvtár.
Tilt.js
A Tilt.js egy kis JavaScript-könyvtár, amely lehetővé teszi a fejlesztők számára, hogy 3D-s döntési effektusokat hozzanak létre a DOM-on. Használhatja a Tilt.js fájlt a vanilla JavaScript-szel vagy olyan könyvtárakkal és keretrendszerekkel, mint a React, Preact, Angular és Polymer.
Telepítés;
npm install – a tilt.js mentése
Vagy
fonal add tilt.js
Használat;
Adja hozzá ezt a szkriptet közvetlenül a záró
