Animationer kan vara ett bra sätt att förbättra användarupplevelsen av din React-applikation. De kan hjälpa till att få interaktioner att kännas smidigare och kan också ge visuell feedback eller dra uppmärksamhet till ett visst element.

Det finns många sätt du kan arbeta med CSS-animationer med hjälp av React, från en inbyggd lösning till tredjepartsbibliotek.

Varför använda animationer i React?

Det finns många anledningar till varför du kanske vill använda animationer i din React-applikation. Några av de vanligaste orsakerna inkluderar:

  • Att få interaktioner att kännas mer naturliga. Animationer kan hjälpa till att göra användarinteraktioner mer naturliga och smidiga. Om du till exempel använder en växlingskomponent kanske du vill animera växlingsknappen mellan "på" och "av". Ett annat exempel är förloppsindikatorer, du kan skapa en animerad förloppsindikator för sidorna i din React-app.
  • Ge visuell feedback. Animationer kan ge visuell feedback till användaren. Om en användare till exempel klickar på en knapp, kanske du vill animera knappen för att indikera att appen har registrerat den åtgärden.
    instagram viewer
  • Att vägleda användarens uppmärksamhet. Animationer kan vägleda användarens uppmärksamhet till ett visst element. Om du till exempel har en modal dialogruta som visas på skärmen, kanske du vill använda animering för att dra användarens uppmärksamhet på den.
  • Skapar en känsla av brådska.Animationer kan skapa en känsla av brådska eller betydelse. Till exempel, om du har en timerkomponent som räknar ner, kanske du vill använda animering för att återspegla brådska när deadline närmar sig.

Det finns flera sätt att lägga till animationer till React-komponenter. De tre du kommer att lära dig hur du använder här är inline-animationer, react-animations-biblioteket och react-simple-animate-biblioteket.

Kom igång med skapa en grundläggande reager-app, följ sedan den metod du väljer.

Metod 1: Använda inline-stilanimationer

Låt oss till exempel säga att du vill animera en komponent så att den tonar in när du klickar på en knapp. Du kan göra detta med följande kod:

importera Reagera, { Komponent } från 'reagera';
klassFadeInOutsträcker sigKomponent{
konstruktör(rekvisita) {
super(rekvisita);


detta.state = {
 är synlig: falsk
 };
 }


framställa() {
konst stilar = {
opacitet: detta.stat.är synlig? 1: 0,
 övergång: 'opacitet 2s'
 };


lämna tillbaka (
<div>
<div style={styles}>
 Hej världen!
</div>
<button onClick={this.toggleVisibility}>
 Växla
</button>
</div>
 );
 }


toggleSynlighet = () => {
detta.setState (prevState => ({
är synlig: !prevState.är synlig
 }));
 }
}
exporterastandard FadeInOut;

I det här exemplet har ett stilobjekt opacitet och övergångsegenskaper. Opaciteten är 0 när komponenten inte är synlig och 1 när den är det. Övergångsegenskapen är "opacitet 2s", vilket gör att opaciteten övergår under två sekunder när den ändras.

Knappen växlar synligheten för komponenten. När någon klickar på knappen uppdateras tillståndsvariabeln isVisible och komponenten tonas in eller ut beroende på dess nuvarande tillstånd.

Metod 2: Använda react-animations Library

Ett annat sätt att lägga till animeringar till React-komponenter är att använda ett bibliotek såsom react-animationer. Det här biblioteket tillhandahåller en uppsättning fördefinierade animationer som du kan använda i dina React-komponenter.

För att använda react-animationer måste du först installera biblioteket:

npm Installera reagera-animationer --spara

Du måste också installera afrodite, som är ett beroende av react-animationer:

npm Installera afrodite --spara

När du har installerat biblioteken kan du importera de animationer du vill använda:

importera { fadeIn, fadeOut } från 'reagera-animationer';

Sedan kan du använda animationerna i dina komponenter:

importera Reagera, { Komponent } från 'reagera';
importera { StyleSheet, css } från 'afrodite';
importera { fadeIn, fadeOut } från 'reagera-animationer';
konst styles = StyleSheet.create({
 fadeIn: {
 animationName: fadeIn,
 animationDuration: '2s'
 },
 tona ut: {
 animationName: fadeOut,
 animationDuration: '2s'
 }
});


klassFadeInOutsträcker sigKomponent{
konstruktör(rekvisita) {
super(rekvisita);


detta.state = {
 är synlig: falsk
 };
 }


framställa() {
konst klassnamn = detta.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);


lämna tillbaka (
<div>
<div className={className}>
 Hej världen!
</div>
<button onClick={this.toggleVisibility}>
 Växla
</button>
</div>
 );
 }


toggleSynlighet = () => {
detta.setState (prevState => ({
är synlig: !prevState.är synlig
 }));
 }
}
exporterastandard FadeInOut;

Det här exemplet börjar med att importera fadeIn- och fadeOut-animationerna från react-animations-biblioteket. Den definierar sedan ett stilobjekt med fadeIn- och fadeOut-animationerna och animationDuration inställd på två sekunder.

Knappen växlar synligheten för komponenten. När någon klickar på den uppdateras tillståndsvariabeln isVisible och komponenten tonas in eller ut beroende på dess nuvarande tillstånd.

Metod 3: Använda react-simple-animate Library

React-simple-animate-biblioteket ger ett enkelt sätt att lägga till animationer till React-komponenter. Den erbjuder ett deklarativt API som gör det enkelt att definiera komplexa animationer.

För att använda biblioteket måste du först installera det:

npm Installera reagera-enkelt-animera --spara

Sedan kan du använda den i dina komponenter:

importera Reagera, { Komponent } från 'reagera';
importera { Animate, AnimateKeyframes} från "reagera-enkel-animera";
klassAppsträcker sigKomponent{
 framställa() {
lämna tillbaka (
<div>
<Animera
 spela
Start={{
 opacitet: 0
 }}
slutet={{
 opacitet: 1
 }}
>
<div>
 Hej världen!
</div>
</Animate>
<Animera nyckelramar
 spela
 varaktighet={2}
 keyframes={[
 { opacitet: 0, transform: 'translateX(-100px)' },
 { opacitet: 1, transform: 'translateX(0px)' }
 ]}
>
<div>
 Hej världen!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
exporterastandard App;

De Animera komponent bleknar i ett div-element. Den börjar med opaciteten 0 och slutar med opaciteten 1. Spelets rekvisita är satt till sant, vilket gör att animeringen spelas automatiskt när komponenten monteras.

De Animera nyckelramar komponent animerar ett div-element under två sekunder. Keyframes-arrayen anger start- och sluttillstånden för animeringen. Den första nyckelbildrutan har en opacitet på 0 och ett translateX-värde på -100px. Den andra nyckelbildrutan har en opacitet på 1 och ett translateX-värde på 0px.

Öka användarens engagemang med animationer

Nu vet du några av sätten som du kan använda animationer i din React-applikation. Du kan använda animationer för att öka användarnas engagemang i din applikation.

Du kanske till exempel vill använda animering för att belöna användaren för att ha slutfört en uppgift. Detta kan vara något så enkelt som en kort "spinner"-animation eller en mer komplex animation som spelas när användaren slutför en nivå i ett spel.

Du kan också distribuera din React-applikation på webben gratis med tjänster som Github-sidor eller Heroku.