Het toevoegen van animaties aan uw webapplicatie is een van de beste manieren om het uiterlijk en het gevoel van uw applicatie te verbeteren.
Animaties zijn bewegende objecten die webontwerpers/-ontwikkelaars gebruiken om de aandacht van gebruikers te trekken en hen ertoe aan te zetten bepaalde acties te ondernemen.
Het schrijven van code om animaties toe te voegen kan veel werk zijn. Gelukkig kun je een animatiebibliotheek gebruiken.
Een animatiebibliotheek is een verzameling vooraf gemaakte animatiebestanden die ontwerpers aan hun web sites kunnen toevoegen.
Waarom animatiebibliotheken gebruiken?
- Bespaart tijd: De animatiebibliotheek zorgt voor de barebones, waardoor u meer tijd heeft om u te concentreren op de functionaliteit van uw applicatie.
- Aanpasbaar: Animatiebibliotheken bieden doorgaans standaardcode die u kunt aanpassen aan uw behoeften.
- Gemakkelijk om een constant ontwerp te bereiken: Als u animaties op verschillende webpagina’s heeft, kunt u één bibliotheek gebruiken om ervoor te zorgen dat de kleurovervloeiing en lettertypen constant zijn.
- Zorg voor een breed scala aan effecten: Sommige animatiebibliotheken hebben veel animaties om uit te kiezen.
Ik heb enkele van de beste JavaScript-animatiebibliotheken die je kunt gebruiken als volgt beoordeeld;
Anime.js
Anime.js is een lichtgewicht JavaScript-bibliotheek met een krachtige API. U kunt deze bibliotheek gebruiken met JavaScript-objecten, DOM-kenmerken, SVG- en CSS-eigenschappen.
Installatie
npm set up animejs --save
Gebruik
import anime from 'animejs/lib/anime.es.js';
Belangrijkste kenmerken:
- Makkelijk te gebruiken: Ik vond Anime.js gemakkelijk te gebruiken, zelfs voor mensen met beperkte JavaScript-kennis, omdat het goed gedocumenteerd is.
- Uitbreidbaar: U kunt codeblokken uit deze bibliotheek aanpassen aan uw behoeften. U kunt ook callbacks, tijdlijnen en versoepelingsfuncties maken.
- Flexibel: Anime.js is niet alleen een JavaScript-animatiebibliotheek; je kunt het gebruiken met SVG- en CSS-eigenschappen.
- Ondersteuning voor meerdere browsers: Animaties van Anime.js draaien op verschillende browsers zoals Chrome, Safari, IE/Edge, Firefox en Opera.
Anime.js is een open-source, free of charge bibliotheek.
Mo.js
Mo.js is een JavaScript-bibliotheek voor bewegende beelden. De bibliotheek geeft u volledige controle over de animaties by way of de declaratieve API.
Installatie
npm set up @mojs/core
of
yarn add @mojs/core
Gebruik
import mojs from '@mojs/core';
Belangrijkste kenmerken:
- Modulair: Componenten in deze bibliotheek zijn opgesplitst in kleine, herbruikbare codeblokken. Tijdens het testen van deze bibliotheek kon ik verschillende componenten toevoegen of verwijderen zonder de hele code te herschrijven.
- Eenvoudig: Het declaratieve ontwerp van de API maakt het gemakkelijk om deze bibliotheek te gebruiken en de componenten ervan aan te passen.
- Snel reagerend: Mo.js is klaar voor het netvlies, waardoor het reageert op verschillende schermformaten.
- Robuust: Deze bibliotheek is uitgebreid getest om er zeker van te zijn dat deze naar verwachting werkt.
Mo.js is een free of charge, open-sourcebibliotheek.
Popbeweging
Popmotion is een eenvoudige animatiebibliotheek voor het creëren van prachtige gebruikersinterfaces. Ik vond het gemakkelijk om deze bibliotheek te gebruiken met standaard JavaScript en de meeste JavaScript-bibliotheken en -frameworks.
Installatie
npm set up popmotion
Gebruik
import { animate } from "popmotion"
Belangrijkste kenmerken:
- Krachtig: Hoewel de animatiefunctie slechts 4,5 kb groot is, ondersteunt deze animaties van veren, traagheid en keyframes voor kleuren, getallen en complexe tekenreeksen.
- TypeScript-ondersteuning: Popmotion is geschreven in TypeScript, een superscript van JavaScript. U kunt dus typen gebruiken als u TypeScript in uw mission gebruikt.
- Aanpasbaar: Componenten uit deze bibliotheek kunnen worden aangepast aan uw animatiebehoeften.
- Stal: Alle componenten van Popmotion zijn uitvoerig getest.
Popmotion is free of charge te gebruiken.
Theater.js
Theatre.js is een bibliotheek met een professionele toolset voor bewegingsontwerp. Hiermee kun je filmische scènes en prachtige UI-interacties ontwerpen.
Om Theatre.js met HTML en gewoon JavaScript te gebruiken, kunt u de CDN-link toevoegen aan de head-sectie van uw HTML-document.
Belangrijkste kenmerken:
- Werkt met verschillende JavaScript-frameworks en bibliotheken: U kunt Theatre.js gebruiken met React Three Fiber en THREE.js.
- Aanpasbaar: Deze bibliotheek heeft een geavanceerde reekseditor waarmee u reeksen binnen enkele seconden kunt blokkeren. U kunt ook elk body in uw toepassing verfijnen met behulp van de grafiekeditor.
- Uitbreidbaar: Theatre.js heeft verschillende extensies die bijdragen aan de bruikbaarheid ervan. U kunt uw instruments gebruiken of extensies aan deze bibliotheek toevoegen.
Theatre.js is een open-sourcebibliotheek.
ScrollReveal.js
ScrollReveal.js is een JavaScript-bibliotheek waarmee u elementen kunt animeren terwijl ze door de viewport scrollen.
Installatie
npm set up scrollreveal
Gebruik
const ScrollReveal = require('scrollreveal')
Belangrijkste kenmerken:
- Makkelijk te gebruiken: Toevoegen
scrollrevealclass toe aan de elementen die u wilt animeren, en u bent klaar om deze bibliotheek te gaan gebruiken. - Uitbreidbaar: U kunt nieuwe elementen toevoegen of verwijderen uit de componenten die u uit deze bibliotheek haalt.
- Flexibel: U kunt ScrollReveal.js zo instellen dat elementen zichtbaar worden bij het aanwijzen, klikken of scrollen. Met de bibliotheek kunt u ook de versoepeling, richting en snelheid van de onthulling bepalen.
ScrollReveal.js is een betaalde bibliotheek met pakketten vanaf $ 30.
GreenSockGSAP
GreenSock GSAP is een JavaScript-bibliotheek voor animaties SVG, UI, Reactof Three.js componenten. De bibliotheek heeft alles wat je nodig hebt om snelle en aantrekkelijke animaties te maken.
Belangrijkste kenmerken:
- Hoge compatibiliteit: U kunt GSAP gebruiken met Canvas-, CSS-, HTML-, SVG- en JavaScript-bibliotheken en -frameworks zoals Angular, React, Vue en jQuery.
- Uitbreidbaar: Dankzij de modulaire architectuur van GSAP kunt u componenten aanpassen aan uw animatiebehoeften.
- Flexibel: GSAP heeft geen vooraf gedefinieerde lijst met dingen die u kunt animeren. U kunt elke numerieke eigenschap van een object animeren.
- Robuust: Met GSAP kunt u arrays, beziers, CSS-eigenschappen, kleuren en meer animeren. Met deze bibliotheek kunt u ook reeksen bouwen, herhalen, jojo’s maken en callbacks definiëren.
GreenSock Animation Platform (GSAP) heeft een free of charge pakket, terwijl een betaald pakket begint vanaf £ 88.
ProgressBar.js
ProgressBar.js is een animatiebibliotheek voor het maken van responsieve en stijlvolle voortgangsbalken voor web.
Installatie
Prieel gebruiken
bower set up progressbar.js
Npm gebruiken
npm set up progressbar.js
Belangrijkste kenmerken:
- Various ingebouwde vormen: ProgressBar.js heeft drie ingebouwde vormen: een halve cirkel, cirkel en lijn. Met deze bibliotheek kunt u ook een aangepaste vorm maken.
- Snel reagerend: De voortgangsbalken uit deze bibliotheek werken good op verschillende schermformaten.
- Aanpasbaar: U kunt de kleuren, lettergrootte en letterstijl van uw componenten aanpassen.
ProgressBar.js is een open-sourcebibliotheek.
AnisJS
AniJS is een UI-interactiebibliotheek die een snelle en gemakkelijke manier biedt om UI’s te ontwikkelen en te prototypen. Deze bibliotheek is 9,0 kb na het zippen.
Installatie
bower set up anijs --save
Gebruik
<script src="anijs-min.js"></script>
Belangrijkste kenmerken:
- Eenvoudig te gebruiken: Om deze bibliotheek te gebruiken, voegt u de AnisJS-klasse toe aan een ingredient dat u wilt animeren.
- Uitbreidbaar: U kunt componenten van AnisJS aanpassen aan uw behoeften.
- Flexibel: U kunt AnisJS gebruiken met JavaScript-objecten, SVG-kenmerken, CSS-eigenschappen en DOM-elementen.
- Compatibel met de belangrijkste browsers: Je kunt AnisJS gebruiken met Chrome, Firefox, Safari en Edge.
AnisJS is een open-sourcebibliotheek die free of charge te gebruiken is.
Drie.js
Three.js is een 3D-bibliotheek voor algemene doeleinden. De bibliotheek maakt gebruik van een WebGL-renderer, maar ondersteunt ook SVG- en CSS3D-renderers als add-ons.
Installatie
npm set up --save three
Gebruik
import * as THREE from 'three';
Belangrijkste kenmerken:
- Makkelijk te gebruiken: Three.js heeft een goed gedocumenteerde API, waardoor het eenvoudig in te stellen en te gebruiken is.
- Krachtig: Met deze bibliotheek kunt u complexe 3D-scènes maken. Three.js ondersteunt ook verschillende functies, zoals animaties, materialen en verlichting.
- Flexibel: Je kunt verschillende 3D-animaties maken, variërend van video games, visualisaties tot simulaties.
- Compatibel met verschillende frameworks en bibliotheken: U kunt de Three.js-bibliotheek gebruiken met React Three Fiber, Egret, Aframe, PlayCanvas en Babylon.js.
Three.js is een open-source JavaScript-bibliotheek.
Dwell.js
vivus.js is een lichtgewicht JavaScript-bibliotheek voor het animeren van SVG’s. Wanneer u SVG’s animeert met behulp van deze bibliotheek, zien ze eruit alsof ze zijn getekend.
Installatie
npm set up vivus
of
bower set up vivus
Belangrijkste kenmerken:
- Verschillende animatietypes: Met Vivus.js kunt u vertraagde, OnebyOne- en Sync-animaties maken. Vertraagd is het standaardanimatietype in deze bibliotheek.
- Staat aangepaste scripts toe: In plaats van de animatietypen te gebruiken die beschikbaar zijn in deze bibliotheek, kunt u aangepaste scripts maken om uw SVG-bestanden te animeren.
- Geen afhankelijkheden: U kunt deze bibliotheek voor de meeste webprojecten gebruiken, omdat deze niet afhankelijk is van afhankelijkheid.
Vivus.js is een free of charge bibliotheek.
Tilt.js
Tilt.js is een kleine JavaScript-bibliotheek waarmee ontwikkelaars 3D-kanteleffecten op de DOM kunnen creëren. U kunt Tilt.js gebruiken met standaard JavaScript of bibliotheken en frameworks zoals React, Preact, Angular en Polymer.
Installatie
npm set up --save tilt.js
Of
yarn add tilt.js
Gebruik
Voeg dit script toe internet vóór de afsluitende
