Tilføjelse af animationer til din webapplikation er en af de bedste metoder til at forbedre udseendet og følelsen af din applikation.
Animationer er objekter i bevægelse, som webdesignere/udviklere bruger til at fange brugernes opmærksomhed og lede dem til at udføre bestemte handlinger.
Det kan være meget arbejde at skrive kode for at tilføje animationer. Heldigvis kan du bruge et animationsbibliotek.
Et animationsbibliotek er en samling af færdiglavede animationsfiler, som designere kan tilføje til deres websteder.
Indholdsfortegnelse
Hvorfor bruge animationsbiblioteker?
- Sparer tid: Animationsbiblioteket vil give barebones, hvilket giver dig mere tid til at fokusere på funktionaliteten af din applikation.
- Kan tilpasses: Animationsbiblioteker tilbyder typisk standardkode, som du kan tilpasse, så den passer til dine behov.
- Let at opnå et ensartet design: Hvis du har animationer på tværs af forskellige websider, kan du bruge ét bibliotek til at sikre, at farveblanding og skrifttyper er ensartede.
- Giv en bred vifte af effekter: Nogle animationsbiblioteker har mange animationer at vælge imellem.
Jeg har gennemgået nogle af de bedste JavaScript-animationsbiblioteker, du kan bruge som følger;
Anime.js
Anime.js er et let JavaScript-bibliotek med en kraftfuld API. Du kan bruge dette bibliotek med JavaScript-objekter, DOM-attributter, SVG- og CSS-egenskaber.
Installation
npm installer animejs – gem
Brug
importer anime fra ‘animejs/lib/anime.es.js’;
Nøglefunktioner:
- Nem at bruge: Jeg fandt Anime.js nem at bruge, selv for dem med begrænset JavaScript viden, da det er veldokumenteret.
- Udvidelig: Du kan tilpasse kodeblokke fra dette bibliotek, så de passer til dine behov. Du kan også oprette tilbagekald, tidslinjer og lempelsesfunktioner.
- Fleksibel: Anime.js er ikke kun et JavaScript-animationsbibliotek; du kan bruge det med SVG- og CSS-egenskaber.
- Understøttelse af flere browsere: Animationer fra Anime.js kører på forskellige browsere såsom Chrome, Safari, IE/Edge, Firefox og Opera.
Anime.js er et open source, gratis bibliotek.
Mo.js
Mo.js er et JavaScript motion graphics-bibliotek. Biblioteket giver dig total kontrol over animationerne gennem dets deklarative API.
Installation
npm installer @mojs/core
eller
garn tilføj @mojs/core
Brug;
importer mojs fra ‘@mojs/core’;
Nøglefunktioner:
- Modulært: Komponenter i dette bibliotek er opdelt i små, genanvendelige kodeblokke. Mens jeg testede dette bibliotek, kunne jeg tilføje eller fjerne forskellige komponenter uden at omskrive hele koden.
- Enkelt: API’ets deklarative design gør det nemt at bruge dette bibliotek og tilpasse dets komponenter.
- Responsiv: Mo.js er retina-klar, hvilket gør den lydhør over for forskellige skærmstørrelser.
- Robust: Dette bibliotek er blevet grundigt testet for at sikre, at det fungerer som forventet.
Mo.js er et gratis, open source-bibliotek.
Popmotion
Popmotion er et simpelt animationsbibliotek til at skabe dejlige brugergrænseflader. Jeg fandt det nemt at bruge dette bibliotek med vanilla JavaScript og de fleste JavaScript-biblioteker og -rammer.
Installation
npm installere popmotion
Brug
importer { animere } fra “popmotion”
Nøglefunktioner:
- Kraftfuld: Selvom animationsfunktionen kun er på 4,5 kb, understøtter den fjeder-, inerti- og keyframe-animationer for farver, tal og komplekse strenge.
- TypeScript-understøttelse: Popmotion er skrevet i TypeScript, en superscript af JavaScript. Du kan således bruge typer, hvis du bruger TypeScript på dit projekt.
- Kan tilpasses: Komponenter fra dette bibliotek kan tilpasses, så de passer til dine animationsbehov.
- Stabil: Alle komponenterne i Popmotion er blevet underkastet grundige tests.
Popmotion er gratis at bruge.
Theatre.js
Theatre.js er et bibliotek med et professionelt værktøjssæt til bevægelsesdesign. Med det kan du designe filmiske scener og dejlige UI-interaktioner.
For at bruge Theatre.js med HTML og almindelig JavaScript, kan du tilføje dets CDN-link til hovedafsnittet i dit HTML-dokument.
Nøglefunktioner:
- Fungerer med flere JavaScript-rammer og biblioteker: Du kan bruge Theatre.js med React Three Fiber og THREE.js.
- Kan tilpasses: Dette bibliotek har en banebrydende sekvenseditor, der hjælper dig med at blokere sekvenser på få sekunder. Du kan også finjustere hver frame i din applikation ved hjælp af grafeditoren.
- Udvidelig: Theatre.js har forskellige udvidelser, der øger dets brugervenlighed. Du kan bruge dine værktøjer eller tilføje udvidelser til dette bibliotek.
Theatre.js er et open source-bibliotek.
ScrollReveal.js er et JavaScript-bibliotek, der giver dig mulighed for at animere elementer, når de ruller ind i viewporten.
Installation;
npm installer scrollreveal
Brug;
const ScrollReveal = require(‘scrollreveal’)
Nøglefunktioner:
- Nem at bruge: Tilføj scrollreveal-klasse til de elementer, du vil animere, og du er klar til at begynde at bruge dette bibliotek.
- Udvidelig: Du kan tilføje nye elementer eller fjerne dem fra de komponenter, du får fra dette bibliotek.
- Fleksibel: Du kan indstille ScrollReveal.js til at afsløre elementer ved at svæve, klikke eller rulle. Biblioteket giver dig også mulighed for at kontrollere afsløringens lempelse, retning og hastighed.
ScrollReveal.js er et betalt bibliotek med pakker, der starter fra $30.
GreenSock GSAP
GreenSock GSAP er et JavaScript-bibliotek til animering af SVG-, UI-, React- eller Three.js-komponenter. Biblioteket har alt hvad du behøver for at skabe hurtige og attraktive animationer.
Nøglefunktioner:
- Høj kompatibilitet: Du kan bruge GSAP med Canvas, CSS, HTML, SVG og JavaScript biblioteker og rammer såsom Angular, React, Vue og jQuery.
- Kan udvides: GSAPs modulære arkitektur giver dig mulighed for at tilpasse komponenter, så de passer til dine animationsbehov.
- Fleksibel: GSAP har ingen foruddefineret liste over ting, du kan animere. Du kan animere enhver numerisk egenskab for et objekt.
- Robust: Med GSAP kan du animere arrays, beziers, CSS-egenskaber, farver og mere. Dette bibliotek giver dig også mulighed for at bygge sekvenser, gentage, yoyo og definere tilbagekald.
GreenSock Animation Platform (GSAP) har en gratis pakke, mens den betalte starter fra £88.
ProgressBar.js
ProgressBar.js er et animationsbibliotek til at skabe responsive og stilfulde fremskridtsbjælker til nettet.
Installation
Bruger bower
bower installation progressbar.js
Bruger npm
npm installer progressbar.js
Nøglefunktioner:
- Forskellige indbyggede former: ProgressBar.js har tre indbyggede former, en SemiCircle, Circle og Line. Du kan også oprette en brugerdefineret form ved hjælp af dette bibliotek.
- Responsiv: Fremskridtsbjælkerne fra dette bibliotek fungerer perfekt på forskellige skærmstørrelser.
- Kan tilpasses: Du kan tilpasse dine komponenters farver, skriftstørrelse og skrifttype.
ProgressBar.js er et open source-bibliotek.
AnisJS
AniJS er et UI-interaktionsbibliotek, der giver en hurtig og nem måde at udvikle og prototype UI’er på. Dette bibliotek er 9,0 kb efter zipning.
Installation;
bower install anijs –save
Brug;
Nøglefunktioner:
- Enkel at bruge: For at bruge dette bibliotek skal du tilføje AnisJS-klassen til et element, du skal animere.
- Udvidelig: Du kan tilpasse komponenter fra AnisJS, så de passer til dine behov.
- Fleksibel: Du kan bruge AnisJS med JavaScript-objekter, SVG-attributter, CSS-egenskaber og DOM-elementer.
- Kompatibel med større browsere: Du kan AnisJS med Chrome, Firefox, Safari og Edge.
AnisJS er et open source-bibliotek, der er gratis at bruge.
Three.js
Three.js er et generelt 3D-bibliotek. Biblioteket bruger en WebGL-renderer, men understøtter også SVG- og CSS3D-renderere som tilføjelser.
Installation;
npm install – gem tre
Brug;
import * som TRE fra ‘tre’;
Nøglefunktioner:
- Brugervenlighed: Three.js har en veldokumenteret API, der gør den nem at konfigurere og bruge.
- Kraftfuld: Du kan skabe komplekse 3D-scener ved hjælp af dette bibliotek. Three.js understøtter også forskellige funktioner, såsom animationer, materialer og belysning.
- Fleksibel: Du kan oprette forskellige 3D-animationer lige fra spil, visualiseringer til simuleringer.
- Kompatibel med forskellige rammer og biblioteker: Du kan bruge Three.js-biblioteket med React Three Fiber, Egret, Aframe, PlayCanvas og Babylon.js.
Three.js er et open source JavaScript-bibliotek.
Vivus.js
vivus.js er et letvægts JavaScript-bibliotek til animering af SVG’er. Når du animerer SVG’er ved hjælp af dette bibliotek, ser de ud, som om de er blevet tegnet.
Installation;
npm installere vivus
eller
bower installere vivus
Nøglefunktioner:
- Forskellige animationstyper: Vivus.js giver dig mulighed for at oprette Delayed, OnebyOne og Sync-animationer. Forsinket er standardanimationstypen i dette bibliotek.
- Tillader brugerdefinerede scripts: I stedet for at bruge de tilgængelige animationstyper i dette bibliotek, kan du oprette brugerdefinerede scripts til at animere dine SVG-filer.
- Ingen afhængigheder: Du kan bruge dette bibliotek på de fleste webprojekter, da det er afhængighedsfrit.
Vivus.js er et gratis bibliotek.
Tilt.js
Tilt.js er et lille JavaScript-bibliotek, der giver udviklere mulighed for at skabe 3D-tilt-effekter på DOM. Du kan bruge Tilt.js med vanilla JavaScript eller biblioteker og rammer som React, Preact, Angular og Polymer.
Installation;
npm install – gem tilt.js
Eller
garn tilføje tilt.js
Brug;
Tilføj dette script lige før det afsluttende
