Animasjoner kan være en fin måte å forbedre brukeropplevelsen til React-applikasjonen din på. De kan bidra til at interaksjoner føles jevnere, og kan også gi visuell tilbakemelding eller trekke oppmerksomhet til et bestemt element.

Det er mange måter du kan jobbe med CSS-animasjoner ved å bruke React, fra en innebygd løsning til tredjepartsbiblioteker.

Hvorfor bruke animasjoner i React?

Det er mange grunner til at du kanskje vil bruke animasjoner i React-applikasjonen din. Noen av de vanligste årsakene inkluderer:

  • Å få interaksjoner til å føles mer naturlig. Animasjoner kan bidra til å gjøre brukerinteraksjoner mer naturlige og jevne. For eksempel, hvis du bruker en vekslekomponent, vil du kanskje animere veksleknappen mellom "på" og "av"-tilstandene. Et annet eksempel er fremdriftsindikatorer, du kan lage en animert fremdriftslinje for sidene i react-appen din.
  • Gir visuell tilbakemelding. Animasjoner kan gi visuell tilbakemelding til brukeren. For eksempel, hvis en bruker klikker på en knapp, vil du kanskje animere knappen for å indikere at appen har registrert den handlingen.
  • Veilede brukerens oppmerksomhet. Animasjoner kan lede brukerens oppmerksomhet til et bestemt element. Hvis du for eksempel har en modal dialogboks som vises på skjermen, vil du kanskje bruke animasjon for å trekke brukerens oppmerksomhet til den.
  • Skaper en følelse av at det haster.Animasjoner kan skape en følelse av at det haster eller viktig. Hvis du for eksempel har en tidtakerkomponent som teller ned, kan det være lurt å bruke animasjon for å gjenspeile det haster når fristen nærmer seg.

Det er flere måter å legge til animasjoner i React-komponenter. De tre du vil lære om hvordan du bruker her er animasjoner i inline stil, biblioteket for reager-animasjoner og biblioteket med reager-enkelt-animasjon.

Kom i gang med lage en grunnleggende reagere-app, og følg deretter metoden du velger.

Metode 1: Bruk av innebygde stilanimasjoner

La oss for eksempel si at du vil animere en komponent slik at den toner inn når du klikker på en knapp. Du kan gjøre dette med følgende kode:

import Reager, { Komponent } fra 'reagere';
klasseFadeInOutstrekkerKomponent{
konstruktør(Rekvisitter) {
super(Rekvisitter);


dette.state = {
 er synlig: falsk
 };
 }


render() {
konst stiler = {
opasitet: dette.stat.erSynlig? 1: 0,
 overgang: 'opasitet 2s'
 };


komme tilbake (
<div>
<div style={styles}>
 Hei Verden!
</div>
<button onClick={this.toggleVisibility}>
 Veksle
</button>
</div>
 );
 }


toggleSynlighet = () => {
dette.setState (prevState => ({
er Synlig: !prevState.erSynlig
 }));
 }
}
eksportmisligholde FadeInOut;

I dette eksemplet har et stilobjekt opasitet og overgangsegenskaper. Opasiteten er 0 når komponenten ikke er synlig, og 1 når den er det. Overgangsegenskapen er "opacity 2s", som vil føre til at opaciteten går over i to sekunder når den endres.

Knappen veksler mellom synligheten av komponenten. Når noen klikker på knappen, oppdateres tilstandsvariabelen isVisible, og komponenten vil tone inn eller ut avhengig av dens nåværende tilstand.

Metode 2: Bruke react-animations Library

En annen måte å legge til animasjoner i React-komponenter er å bruke et bibliotek som for eksempel react-animasjoner. Dette biblioteket gir et sett med forhåndsdefinerte animasjoner som du kan bruke i React-komponentene dine.

For å bruke react-animasjoner, må du først installere biblioteket:

npm installere reagere-animasjoner --lagre

Du må også installere aphrodite, som er en avhengighet av react-animasjoner:

npm installere afrodite --lagre

Når du har installert bibliotekene, kan du importere animasjonene du vil bruke:

import { fadeIn, fadeOut } fra 'reager-animasjoner';

Deretter kan du bruke animasjonene i komponentene dine:

import Reager, { Komponent } fra 'reagere';
import { StyleSheet, css } fra 'afrodite';
import { fadeIn, fadeOut } fra 'reager-animasjoner';
konst styles = StyleSheet.create({
 fadeIn: {
 animasjonsnavn: fadeIn,
 animasjonVarighet: '2s'
 },
 fadeOut: {
 animasjonsnavn: fadeOut,
 animasjonVarighet: '2s'
 }
});


klasseFadeInOutstrekkerKomponent{
konstruktør(Rekvisitter) {
super(Rekvisitter);


dette.state = {
 er synlig: falsk
 };
 }


render() {
konst klassenavn = dette.state.erSynlig? css (styles.fadeIn): css (styles.fadeOut);


komme tilbake (
<div>
<div klassenavn={klassenavn}>
 Hei Verden!
</div>
<button onClick={this.toggleVisibility}>
 Veksle
</button>
</div>
 );
 }


toggleSynlighet = () => {
dette.setState (prevState => ({
er Synlig: !prevState.erSynlig
 }));
 }
}
eksportmisligholde FadeInOut;

Dette eksemplet starter med å importere fadeIn og fadeOut-animasjonene fra react-animations-biblioteket. Den definerer deretter et stilobjekt med fadeIn og fadeOut-animasjonene, og animationDuration satt til to sekunder.

Knappen vil veksle mellom synligheten av komponenten. Når noen klikker på den, vil tilstandsvariabelen isVisible oppdateres, og komponenten vil tone inn eller ut avhengig av dens nåværende tilstand.

Metode 3: Bruke react-simple-animate Library

React-simple-animate-biblioteket gir en enkel måte å legge til animasjoner i React-komponenter. Den tilbyr en deklarativ API som gjør det enkelt å definere komplekse animasjoner.

For å bruke biblioteket må du først installere det:

npm installere reagere-enkelt-animere --lagre

Deretter kan du bruke den i komponentene dine:

import Reager, { Komponent } fra 'reagere';
import { Animate, AnimateKeyframes} fra "reager-enkel-animere";
klasseAppstrekkerKomponent{
 render() {
komme tilbake (
<div>
<Animer
 spille
start={{
 opasitet: 0
 }}
slutt={{
 opasitet: 1
 }}
>
<div>
 Hei Verden!
</div>
</Animate>
<Animer nøkkelrammer
 spille
 varighet={2}
 keyframes={[
 { opasitet: 0, transform: 'translateX(-100px)' },
 { opasitet: 1, transform: 'translateX(0px)' }
 ]}
>
<div>
 Hei Verden!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
eksportmisligholde App;

De Animer komponent falmer i et div-element. Den starter med en opasitet på 0 og slutter med en opasitet på 1. Spillrekvisitten er satt til sann, noe som vil føre til at animasjonen spilles av automatisk når komponenten monteres.

De Animer nøkkelrammer komponent animerer et div-element over to sekunder. Keyframes-matrisen spesifiserer start- og slutttilstander for animasjonen. Den første nøkkelrammen har en opasitet på 0 og en translateX-verdi på -100px. Den andre nøkkelrammen har en opasitet på 1 og en translateX-verdi på 0px.

Øk brukerengasjementet med animasjoner

Nå vet du noen av måtene du kan bruke animasjoner på i React-applikasjonen din. Du kan bruke animasjoner for å øke brukerengasjementet med applikasjonen din.

Det kan for eksempel være lurt å bruke animasjon for å belønne brukeren for å fullføre en oppgave. Dette kan være noe så enkelt som en kort "spinner"-animasjon eller en mer kompleks animasjon som spilles når brukeren fullfører et nivå i et spill.

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