Animaties kunnen een geweldige manier zijn om de gebruikerservaring van uw React-applicatie te verbeteren. Ze kunnen ervoor zorgen dat interacties soepeler aanvoelen en kunnen ook visuele feedback geven of de aandacht vestigen op een bepaald element.

Er zijn veel manieren waarop u met CSS-animaties kunt werken met React, van een native oplossing tot bibliotheken van derden.

Waarom animaties gebruiken in React?

Er zijn veel redenen waarom u animaties in uw React-toepassing wilt gebruiken. Enkele van de meest voorkomende redenen zijn:

  • Interacties natuurlijker laten aanvoelen. Animaties kunnen helpen om gebruikersinteracties natuurlijker en soepeler te laten aanvoelen. Als u bijvoorbeeld een schakelcomponent gebruikt, wilt u misschien de schakelknop animeren tussen de status 'aan' en 'uit'. Een ander voorbeeld zijn voortgangsbalken, dat kan maak een geanimeerde voortgangsbalk voor de pagina's van je reactie-app.
  • Visuele feedback geven. Animaties kunnen de gebruiker visuele feedback geven. Als een gebruiker bijvoorbeeld op een knop klikt, wilt u misschien een animatie van de knop maken om aan te geven dat de app die actie heeft geregistreerd.
    instagram viewer
  • De aandacht van de gebruiker leiden. Animaties kunnen de aandacht van de gebruiker naar een bepaald element leiden. Als er bijvoorbeeld een modaal dialoogvenster op het scherm verschijnt, wilt u misschien animatie gebruiken om de aandacht van de gebruiker erop te vestigen.
  • Een gevoel van urgentie creëren.Animaties kunnen een gevoel van urgentie of belangrijkheid creëren. Als u bijvoorbeeld een timercomponent hebt die aftelt, wilt u misschien animatie gebruiken om de urgentie weer te geven naarmate de deadline nadert.

Er zijn verschillende manieren om animaties toe te voegen aan React-componenten. De drie die u hier leert gebruiken, zijn inline-stijlanimaties, de bibliotheek met reageren-animaties en de bibliotheek met reageren-eenvoudig-animeren.

Ga aan de slag door een eenvoudige reactie-app maken, volg dan de methode van uw keuze.

Methode 1: Inline-stijlanimaties gebruiken

Stel dat u bijvoorbeeld een component wilt animeren zodat deze infaden wanneer u op een knop klikt. U kunt dit doen met de volgende code:

importeren Reageren, { Onderdeel } van 'Reageer';
klasVervagen instrekt zich uitOnderdeel{
constructeur(rekwisieten) {
super(rekwisieten);


dit.staat = {
 is zichtbaar: vals
 };
 }


veroorzaken() {
const stijlen = {
ondoorzichtigheid: dit.staat.is zichtbaar? 1: 0,
 overgang: 'dekking 2s'
 };


opbrengst (
<div>
<div-stijl={stijlen}>
 Hallo Wereld!
</div>
<knop onClick={this.toggleVisibility}>
 Schakelaar
</button>
</div>
 );
 }


toggleZichtbaarheid = () => {
dit.setState (prevState => ({
is zichtbaar: !vorigeStaat.is zichtbaar
 }));
 }
}
exporterenstandaard Vervagen in;

In dit voorbeeld heeft een stijlobject dekkings- en overgangseigenschappen. De dekking is 0 wanneer het onderdeel niet zichtbaar is en 1 wanneer dit wel het geval is. De overgangseigenschap is "dekking 2s", waardoor de dekking gedurende twee seconden overgaat wanneer deze verandert.

De knop verandert de zichtbaarheid van het onderdeel. Wanneer iemand op de knop klikt, wordt de statusvariabele isVisible bijgewerkt en zal de component in- of uitfaden, afhankelijk van de huidige status.

Methode 2: De bibliotheek met reactie-animaties gebruiken

Een andere manier om animaties aan React-componenten toe te voegen, is door een bibliotheek zoals react-animations te gebruiken. Deze bibliotheek biedt een set vooraf gedefinieerde animaties die u kunt gebruiken in uw React-componenten.

Om reactie-animaties te gebruiken, moet je eerst de bibliotheek installeren:

npm installeren reactie-animaties --redden

Je moet ook aphrodite installeren, wat een afhankelijkheid is van react-animaties:

npm installeren aphrodite --redden

Nadat u de bibliotheken hebt geïnstalleerd, kunt u de animaties importeren die u wilt gebruiken:

importeren { fadeIn, fadeOut} van 'reageer-animaties';

Vervolgens kunt u de animaties in uw componenten gebruiken:

importeren Reageren, { Onderdeel } van 'Reageer';
importeren { Stijlblad, css } van 'aphrodite';
importeren { fadeIn, fadeOut} van 'reageer-animaties';
const stijlen = StyleSheet.create({
 fadeIn: {
 animatieNaam: fadeIn,
 animatieDuur: '2s'
 },
 fadeOut: {
 animatieNaam: fadeOut,
 animatieDuur: '2s'
 }
});


klasVervagen instrekt zich uitOnderdeel{
constructeur(rekwisieten) {
super(rekwisieten);


dit.staat = {
 is zichtbaar: vals
 };
 }


veroorzaken() {
const classNaam = dit.state.iszichtbaar? css (stijlen.fadeIn): css (stijlen.fadeOut);


opbrengst (
<div>
<div className={className}>
 Hallo Wereld!
</div>
<knop onClick={this.toggleVisibility}>
 Schakelaar
</button>
</div>
 );
 }


toggleZichtbaarheid = () => {
dit.setState (prevState => ({
is zichtbaar: !vorigeStaat.is zichtbaar
 }));
 }
}
exporterenstandaard Vervagen in;

Dit voorbeeld begint met het importeren van de fadeIn- en fadeOut-animaties uit de react-animations-bibliotheek. Vervolgens definieert het een stijlen-object met de fadeIn- en fadeOut-animaties en de animatieDuration ingesteld op twee seconden.

De knop verandert de zichtbaarheid van het onderdeel. Wanneer iemand erop klikt, wordt de statusvariabele isVisible bijgewerkt en zal de component in- of uitfaden, afhankelijk van de huidige status.

Methode 3: de react-simple-animate-bibliotheek gebruiken

De bibliotheek react-simple-animate biedt een eenvoudige manier om animaties toe te voegen aan React-componenten. Het biedt een declaratieve API waarmee het eenvoudig is om complexe animaties te definiëren.

Om de bibliotheek te gebruiken, moet u deze eerst installeren:

npm installeren reageren-eenvoudig-animeren --redden

Vervolgens kunt u het in uw componenten gebruiken:

importeren Reageren, { Onderdeel } van 'Reageer';
importeren { Animeren, Keyframes animeren} van "reageren-eenvoudig-animeren";
klasappstrekt zich uitOnderdeel{
 veroorzaken() {
opbrengst (
<div>
<Animeren
 toneelstuk
begin={{
 ondoorzichtigheid: 0
 }}
einde={{
 ondoorzichtigheid: 1
 }}
>
<div>
 Hallo Wereld!
</div>
</Animate>
<Animeren van keyframes
 toneelstuk
 duur={2}
 sleutelframes={[
 {dekking: 0, transformeren: 'vertalenX(-100px)' },
 {dekking: 1, transformeren: 'vertalenX(0px)' }
 ]}
>
<div>
 Hallo Wereld!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
exporterenstandaard App;

De Animeren component verdwijnt in een div-element. Het begint met een dekking van 0 en eindigt met een dekking van 1. De afspeelprop is ingesteld op waar, waardoor de animatie automatisch wordt afgespeeld wanneer de component wordt geactiveerd.

De Animeren van keyframes component animeert een div-element gedurende twee seconden. De keyframes-array specificeert de begin- en eindstatus van de animatie. Het eerste keyframe heeft een dekking van 0 en een translateX-waarde van -100px. Het tweede keyframe heeft een dekking van 1 en een translateX-waarde van 0px.

Verhoog de betrokkenheid van gebruikers met animaties

U kent nu enkele manieren waarop u animaties in uw React-toepassing kunt gebruiken. U kunt animaties gebruiken om de betrokkenheid van gebruikers bij uw toepassing te vergroten.

U kunt bijvoorbeeld animatie gebruiken om de gebruiker te belonen voor het voltooien van een taak. Dit kan zoiets eenvoudigs zijn als een korte 'spinner'-animatie of een complexere animatie die wordt afgespeeld wanneer de gebruiker een level in een game voltooit.

U kunt uw React-applicatie ook gratis op internet implementeren met services zoals Github-pagina's of Heroku.