Animationer kan være en fantastisk måde at forbedre brugeroplevelsen af ​​din React-applikation på. De kan hjælpe med at få interaktioner til at føles glattere og kan også give visuel feedback eller henlede opmærksomheden på et bestemt element.

Der er mange måder, du kan arbejde med CSS-animationer ved hjælp af React, fra en indbygget løsning til tredjepartsbiblioteker.

Hvorfor bruge animationer i React?

Der er mange grunde til, at du måske vil bruge animationer i din React-applikation. Nogle af de mest almindelige årsager omfatter:

  • At få interaktioner til at føles mere naturligt. Animationer kan hjælpe med at få brugerinteraktioner til at føles mere naturlige og glatte. For eksempel, hvis du bruger en til/fra-komponent, vil du måske gerne animere skifteknappen mellem tilstandene "tændt" og "fra". Et andet eksempel er fremskridtsbjælker, du kan oprette en animeret statuslinje for siderne i din React-app.
  • Giver visuel feedback. Animationer kan give visuel feedback til brugeren. For eksempel, hvis en bruger klikker på en knap, vil du måske animere knappen for at angive, at appen har registreret denne handling.
    instagram viewer
  • Vejledning af brugerens opmærksomhed. Animationer kan guide brugerens opmærksomhed til et bestemt element. For eksempel, hvis du har en modal dialog, der vises på skærmen, vil du måske bruge animation til at henlede brugerens opmærksomhed på det.
  • At skabe en følelse af at det haster.Animationer kan skabe en følelse af uopsættelighed eller vigtighed. Hvis du f.eks. har en timerkomponent, der tæller ned, vil du måske bruge animation til at afspejle det haster, når deadline nærmer sig.

Der er flere måder at tilføje animationer til React-komponenter. De tre, du lærer om at bruge her, er inline-stilanimationer, react-animations-biblioteket og react-simple-animate-biblioteket.

Kom i gang med oprettelse af en grundlæggende reagere app, og følg derefter den valgte metode.

Metode 1: Brug af Inline Style Animationer

Lad os f.eks. sige, at du vil animere en komponent, så den toner ind, når du klikker på en knap. Du kan gøre dette med følgende kode:

importere Reager, { Komponent } fra 'reagere';
klasseFadeInOutstrækker sigKomponent{
konstruktør(rekvisitter) {
super(rekvisitter);


det her.state = {
 er synlig: falsk
 };
 }


render() {
konst stilarter = {
Gennemsigtighed: det her.stat.erSynlig? 1: 0,
 overgang: 'opacitet 2s'
 };


Vend tilbage (
<div>
<div style={styles}>
 Hej Verden!
</div>
<button onClick={this.toggleVisibility}>
 Skift
</button>
</div>
 );
 }


toggleSynlighed = () => {
det her.setState (prevState => ({
er Synlig: !prevState.erSynlig
 }));
 }
}
eksportStandard FadeInOut;

I dette eksempel har et stilobjekt opacitet og overgangsegenskaber. Opaciteten er 0, når komponenten ikke er synlig, og 1, når den er det. Overgangsegenskaben er "opacitet 2s", hvilket vil få opaciteten til at skifte over to sekunder, når den ændres.

Knappen skifter synligheden af ​​komponenten. Når nogen klikker på knappen, opdateres tilstandsvariablen isVisible, og komponenten vil tone ind eller ud afhængigt af dens aktuelle tilstand.

Metode 2: Brug af react-animations Library

En anden måde at tilføje animationer til React-komponenter på er at bruge et bibliotek såsom react-animationer. Dette bibliotek giver et sæt foruddefinerede animationer, som du kan bruge i dine React-komponenter.

For at bruge react-animationer skal du først installere biblioteket:

npm installere reagere-animationer --Gemme

Du skal også installere aphrodite, som er en afhængighed af react-animationer:

npm installere afrodite --Gemme

Når du har installeret bibliotekerne, kan du importere de animationer, du vil bruge:

importere { fadeIn, fadeOut } fra 'reager-animationer';

Derefter kan du bruge animationerne i dine komponenter:

importere Reager, { Komponent } fra 'reagere';
importere { StyleSheet, css } fra 'afrodite';
importere { fadeIn, fadeOut } fra 'reager-animationer';
konst styles = StyleSheet.create({
 fadeIn: {
 animationName: fadeIn,
 animation Varighed: '2s'
 },
 svinde bort: {
 animationName: fadeOut,
 animation Varighed: '2s'
 }
});


klasseFadeInOutstrækker sigKomponent{
konstruktør(rekvisitter) {
super(rekvisitter);


det her.state = {
 er synlig: falsk
 };
 }


render() {
konst klassenavn = det her.stat.erSynlig? css (styles.fadeIn): css (styles.fadeOut);


Vend tilbage (
<div>
<div klassenavn={klassenavn}>
 Hej Verden!
</div>
<button onClick={this.toggleVisibility}>
 Skift
</button>
</div>
 );
 }


toggleSynlighed = () => {
det her.setState (prevState => ({
er Synlig: !prevState.erSynlig
 }));
 }
}
eksportStandard FadeInOut;

Dette eksempel starter med at importere fadeIn og fadeOut-animationerne fra react-animations-biblioteket. Den definerer derefter et stilobjekt med fadeIn og fadeOut-animationerne og animationDuration indstillet til to sekunder.

Knappen skifter synligheden af ​​komponenten. Når nogen klikker på den, opdateres tilstandsvariablen isVisible, og komponenten fader ind eller ud afhængigt af dens aktuelle tilstand.

Metode 3: Brug af react-simple-animate Library

React-simple-animate-biblioteket giver en enkel måde at tilføje animationer til React-komponenter. Det tilbyder en deklarativ API, som gør det nemt at definere komplekse animationer.

For at bruge biblioteket skal du først installere det:

npm installere reagere-simpelt-animere --Gemme

Derefter kan du bruge det i dine komponenter:

importere Reager, { Komponent } fra 'reagere';
importere { Animate, AnimateKeyframes} fra "reager-simpelt-animer";
klasseAppstrækker sigKomponent{
 render() {
Vend tilbage (
<div>
<Animer
 Spil
Start={{
 opacitet: 0
 }}
ende={{
 opacitet: 1
 }}
>
<div>
 Hej Verden!
</div>
</Animate>
<Animer nøglerammer
 Spil
 varighed={2}
 keyframes={[
 { opacitet: 0, transformation: 'translateX(-100px)' },
 { opacitet: 1, transformation: 'translateX(0px)' }
 ]}
>
<div>
 Hej Verden!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
eksportStandard App;

Det Animer komponent falmer i et div-element. Det starter med en opacitet på 0 og slutter med en opacitet på 1. Afspilningsrekvisiten er sat til sand, hvilket vil få animationen til at spille automatisk, når komponenten monteres.

Det Animer nøglerammer komponent animerer et div-element over to sekunder. Keyframes-arrayet angiver start- og sluttilstandene for animationen. Den første keyframe har en opacitet på 0 og en translateX-værdi på -100px. Den anden keyframe har en opacitet på 1 og en translateX-værdi på 0px.

Øg brugerengagementet med animationer

Nu kender du nogle af måderne, hvorpå du kan bruge animationer i din React-applikation. Du kan bruge animationer til at øge brugerengagementet med din applikation.

For eksempel vil du måske bruge animation til at belønne brugeren for at udføre en opgave. Dette kunne være noget så simpelt som en kort "spinner"-animation eller en mere kompleks animation, der afspilles, når brugeren fuldfører et niveau i et spil.

Du kan også implementere din React-applikation på nettet gratis med tjenester som Github-sider eller Heroku.