10+ Bedste JavaScript-animationsbiblioteker, der skal bruges i 2020

10+ Bedste JavaScript-animationsbiblioteker, der skal bruges i 2020

10+ Bedste JavaScript-animationsbiblioteker, der skal bruges i 2020
СОДЕРЖАНИЕ
02 июня 2020

Bedste JavaScript-animationsbiblioteker


Hvis du leder efter at få fat på din besøgendes opmærksomhed, hvad kan da være bedre end animationer? Ved hjælp af de mange applikationsmotorer, der er frit tilgængelige på nettet, kan du nemt få dit websteds elementer til at blegne, hoppe eller whoosh. I dagens indlæg ser vi hvordan JavaScript-animationsbiblioteker kan hjælpe med alt det.

Først lidt om JavaScript-animationer

Det er en ting at tilføje enkle animationer, der kun har brug for én handling (for eksempel at skifte). Til dette kan du altid bruge enkle CSS-animationer. Men for mere komplekse eller avancerede effekter er JavaScript et bedre værktøj. Det siger sig selv, at det er mere udfordrende at bruge JavaScript til at oprette animationer end at bruge CSS.

Ikke desto mindre kan JavaScript håndtere ting, som CSS ikke kan. Dette giver udviklere måde mere magt til at kontrollere komplekse animationer, der har brug for at koordinere flere bevægelige dele.

JavaScript-animationer implementeres ved at føje gradvise ændringer til et elements stil. Du kan tilføje dem online som en del af din kode eller inkludere dem i andre objekter. Ved gengivelse kaldes disse ændringer op af en timer. Du kan også kontrollere animationernes kontinuitet ved at justere tidsintervallet for ændringerne.

De bedste JavaScript-animationsbiblioteker

Her er en liste over JavaScript-animationsbiblioteker, som du kan bruge til at føje nogle fantastiske flotte animationer til dit websted:

1. Anime.js

JavaScript-animationsbiblioteker: Anime.js

Lad os starte denne liste over JavaScript-animationsbiblioteker med Anime.js. Dette lette animationsbibliotek lukker 35K + stjerner på GitHub. Når du arbejder fra et enkelt kraftfuldt API, kan du bruge det til at animere HTML-, CSS-, JS-, SVG- og DOM-attributter. Med et indbygget svimlende system kan det gøre det nemt at skabe krusninger, retningsbevægelser, opfølgning og overlappende effekter. Dette system kan bruges både på timinger og egenskaber.

Der er meget, du kan gøre ved hjælp af de indbyggede tilbagekalds- og kontrolfunktioner. For eksempel kan du afspille, pause, styre, vende og udløse begivenheder i synk. For at se, hvad der ellers er muligt ved hjælp af dette bibliotek, kan du besøge Codepen.

2. Velocity.js

Velocit.js

Velocity.js kombinerer det bedste fra jQuery og CSS overgange. Det satser tæt på 17K stjerner på GitHub og kan prale af prominente brugere som WhatsApp og Mailchimp. Looping, reversering, forsinkelse, skjul / visning af elementer, egenskabsmatematik (+, -, *, /) og hardwareacceleration, alle udgør en del af funktionerne.

Du kan bruge Velocity.js til at rulle browservinduer. Det kan arbejde både med jQuery, der er indlæst i din browser og uafhængig af den, og endda fortryde tidligere animationer.

3. Popmotion

Popmotion

Tæt på 18K stjerner, Popmotion er et funktionelt animationsbibliotek til ethvert JavaScript-miljø. Det kan arbejde med næsten ethvert API, der accepterer tal som input som React, Three.js, A-Frame og PixiJS.

Popmotion vejer kun 11,7 kB, men pakker en punch alligevel. Den indeholder animationer som nøglerammer, henfald, tidslinje til synkronisering af flere forekomster og mere. Du kan forskyde enhver række animationer eller funktioner samt bruge rene funktioner til at komponere dine egne konfigurationer.

4. Three.js

JavaScript-animationsbiblioteker: Three.js

Three.js topper denne liste over JavaScript-animationsbiblioteker med 60K + stjerner på GitHub. Det er afhængigt af WebGL at oprette og gengive 3D-animationer i browseren.

Der er masser af dokumenter til at hjælpe dig, og når du først er kommet forbi indlæringskurven, er der ikke meget, du ikke kan opnå ved at bruge dette bibliotek. For det første opretter du en scene ved hjælp af Three.js-editoren. Derefter får du tilføjet geometriske figurer og justerer belysning og kamera. Materialet, tekstur, objekt, farve og tåge kan alle justeres, og den endelige fil offentliggøres til dit projekt.

5. GreenSock JS

GreenSock

GreenSocks GSAP fungerer med et sæt små JavaScript-filer, der får animationer til at se godt ud i alle større browsere. Det kæder jævnligt flere animationsegenskaber og eliminerer browserfejl.

GSAP-handlinger inkluderer oprettelse af animationer på lærred og animering af ethvert objekt i en scene. Også gradvist afslørende, morfisk eller flytte ethvert objekt langs en sti. Til dette formål fungerer det med en masse software-applikationer som SVGPlugins, PixiPlugin, WebGL, Adobe Animate og EaseJS. Dens modulopbyggede struktur hjælper dig med at vælge bare de funktioner, du har brug for. Med 8 millioner brugere og 10K + stjerner på GitHub, dette magtfulde bibliotek har meget at gøre for det.

6. AniJS

AniJS

Blandt JavaScript-bibliotekerne på denne liste er AniJS noget unik. Det giver dig mulighed for at tilføje animationer til elementer i en enkel ‘sætningslignende’ struktur, fantastisk til folk der er nye med animationen. Hvad mere er, dens ikke-specifikke karakter giver næsten alle mulighed for at bruge det i rutinemæssigt UX-design.

GitHub, AniJS vurderer mere end 3,5 K stjerner. Det stoler ikke på noget tredjepartsbibliotek og hjælper generelt med at fremskynde udviklingen. Det fungerer lige så godt på Android og iOS og også i alle de populære browsere.

7. Mo.js

Mo.js

Bevægelsesgrafik har en stor rolle at spille i animationer, og Mo.js er en mulighed, som du kan gøre indflydelse på. Med en række tutorials og demoer, der hjælper med, kan begynderne måske ikke have svært ved at oprette geometriske figurer og tidsanimationer til prikken.

API’erne kan virke enkle, men der er meget, du kan gøre med dem. Inden i værktøjssættet finder du en Curve Editor og Timeline Editor til at hjælpe dig med at opbygge dine animationer såvel som en Player til at kontrollere dine animationer. Der er forskellige moduler til forskydning, lempelse, tidslinje og mere. Alt dette tjener Mo.js tæt på 16K stjerner på GitHub.

8. Vivus.js

JavaScript-animationsbiblioteker: Vivus

Hvis du ønsker at efterligne en pennetegning på en skærm i realtid, får du mærket med Vivus. Det giver dig mulighed for at animere SVG’er, der giver indtryk af at blive tegnet. Da det ikke har nogen afhængigheder, er det hurtigt og let.

Du kan vælge en af ​​de tilgængelige animationer – Forsinket, Synkroniser eller OneByOne. Ellers kan du også oprette et brugerdefineret script til at tegne din SVG. For mere fleksibilitet kan du tilsidesætte animationen af ​​hver sti ved hjælp af en simpel JavaScript-funktion. Mere end 13 000 brugere giver tommelfingeren op til dette bibliotek på GitHub.

9. ScrollReveal JS

ScrollReveal

Hvis du ønsker at animere dine webelementer, når de ruller til visningen, skuffer ScrollReveal ikke. Dette let at lære animationsbibliotek har nul afhængigheder og 18,5 K + stjerner på GitHub.

ScrollReveal understøtter forskellige typer effekter og fungerer godt med webbrowser og mobile browsere. Det fungerer med vilje med en bare-ben-konfiguration, så du kan bruge det som et lærred til din kreativitet. For at maksimere effekten af ​​animationerne anbefaler rådgiverne, at du bruger dem sparsomt.

10. Typed.js

Typed.js

Typed.js er et simpelt bibliotek (mere af et plugin, virkelig) til at animere indtastning på din skærm. Når du har indtastet en hvilken som helst streng, kan en besøgende se, den indtastes med en indstillet hastighed. Ikke kun det, du kan arbejde på backspace-knappen samt begynde en ny sætning. Hvis du ønsker at tillade besøgende med JS deaktiveret også at se det, skal du blot placere en HTML-div på siden. På den måde kan bots og søgemaskiner også se de indtastede ord.

Dette bibliotek satser 9,5 K + stjerner på GitHub. Power-brugere inkluderer Slack og Envato.

11. Lottie af AirBnB

JavaScript-animationsbiblioteker: Lottie

Lottie er et let animeret grafikformat, der afbalancerer grafik af høj kvalitet mod udgifterne til gengivelse af dem. Det gør applikationer mindre og inkluderer dynamiske funktioner. Det kan bruges til web, Android, iOS og IoT’er uden behov for yderligere software.

Lottie kan køre i enhver browser, der understøtter JavaScript. Animationerne gemmes i almindelig tekst og kan læses af mennesker. Da tekstdataene gemmes i JSON-format, assimileres de let med ethvert JavaScript-miljø. Dette gør det til et populært animeret grafikformat for at forbedre mobile frontends. Android-versionen alene nyder tæt på 30K stjerner på GitHub.

Hvis du er nået til slutningen af ​​denne liste over JavaSCript-animationsbiblioteker, er du muligvis også interesseret i at finde andre JavaScript-biblioteker og -rammer. Eller tjek disse bedste React UI-komponentbiblioteker.

Glem ikke at deltage i vores nedbrudskursus om at fremskynde dit WordPress-sted. Med nogle enkle rettelser kan du reducere din indlæsningstid med endda 50-80%:

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