Animationen können eine großartige Möglichkeit sein, die Benutzererfahrung Ihrer React-Anwendung zu verbessern. Sie können dazu beitragen, dass sich Interaktionen reibungsloser anfühlen, und können auch visuelles Feedback geben oder die Aufmerksamkeit auf ein bestimmtes Element lenken.

Es gibt viele Möglichkeiten, mit CSS-Animationen mit React zu arbeiten, von einer nativen Lösung bis hin zu Bibliotheken von Drittanbietern.

Warum Animationen in React verwenden?

Es gibt viele Gründe, warum Sie Animationen in Ihrer React-Anwendung verwenden möchten. Einige der häufigsten Gründe sind:

  • Interaktionen sich natürlicher anfühlen. Animationen können dazu beitragen, dass sich Benutzerinteraktionen natürlicher und reibungsloser anfühlen. Wenn Sie beispielsweise eine Toggle-Komponente verwenden, möchten Sie möglicherweise die Toggle-Schaltfläche zwischen den Zuständen „Ein“ und „Aus“ animieren. Ein weiteres Beispiel sind Fortschrittsbalken, Sie können Erstellen Sie einen animierten Fortschrittsbalken für die Seiten Ihrer React-App.
    • instagram viewer
  • Bereitstellung von visuellem Feedback. Animationen können dem Benutzer visuelles Feedback geben. Wenn ein Benutzer beispielsweise auf eine Schaltfläche klickt, möchten Sie möglicherweise die Schaltfläche animieren, um anzuzeigen, dass die App diese Aktion registriert hat.
  • Lenken der Aufmerksamkeit des Benutzers. Animationen können die Aufmerksamkeit des Benutzers auf ein bestimmtes Element lenken. Wenn Sie beispielsweise einen modalen Dialog haben, der auf dem Bildschirm erscheint, möchten Sie möglicherweise eine Animation verwenden, um die Aufmerksamkeit des Benutzers darauf zu lenken.
  • Ein Gefühl der Dringlichkeit schaffen.Animationen können ein Gefühl von Dringlichkeit oder Wichtigkeit erzeugen. Wenn Sie beispielsweise eine Timer-Komponente haben, die herunterzählt, möchten Sie möglicherweise eine Animation verwenden, um die Dringlichkeit widerzuspiegeln, wenn sich die Frist nähert.

Es gibt mehrere Möglichkeiten, Animationen zu React-Komponenten hinzuzufügen. Die drei, die Sie hier lernen werden, sind Animationen im Inline-Stil, die React-Animations-Bibliothek und die React-Simple-Animate-Bibliothek.

Beginnen Sie mit Erstellen einer einfachen React-App, und folgen Sie dann der Methode Ihrer Wahl.

Methode 1: Verwenden von Animationen im Inline-Stil

Angenommen, Sie möchten eine Komponente so animieren, dass sie eingeblendet wird, wenn Sie auf eine Schaltfläche klicken. Sie können dies mit dem folgenden Code tun:

importieren Reagieren, {Komponente} aus 'reagieren';
KlasseFadeInOuterweitertKomponente{
Konstrukteur(Requisiten) {
super(Requisiten);


Das.Zustand = {
 ist sichtbar: FALSCH
 };
 }


rendern() {
konst Stile = {
Opazität: Das.Zustand.ist sichtbar? 1: 0,
 Übergang: 'Deckkraft 2s'
 };


zurückkehren (
<div>
<div style={Stile}>
 Hallo Welt!
</div>
<Schaltfläche onClick={this.toggleVisibility}>
 Umschalten
</button>
</div>
 );
 }


toggleVisibility = () => {
Das.setState (prevState => ({
ist sichtbar: !vorherigerZustand.ist sichtbar
 }));
 }
}
ExportStandard FadeInOut;

In diesem Beispiel hat ein Stilobjekt Deckkraft- und Übergangseigenschaften. Die Deckkraft ist 0, wenn die Komponente nicht sichtbar ist, und 1, wenn sie sichtbar ist. Die Übergangseigenschaft ist „Opazität 2s“, was dazu führt, dass die Opazität über zwei Sekunden wechselt, wenn sie sich ändert.

Die Schaltfläche schaltet die Sichtbarkeit der Komponente um. Wenn jemand auf die Schaltfläche klickt, wird die Zustandsvariable isVisible aktualisiert und die Komponente wird je nach aktuellem Zustand ein- oder ausgeblendet.

Methode 2: Verwenden der React-Animationsbibliothek

Eine andere Möglichkeit, Animationen zu React-Komponenten hinzuzufügen, besteht darin, eine Bibliothek wie beispielsweise „react-animations“ zu verwenden. Diese Bibliothek bietet eine Reihe vordefinierter Animationen, die Sie in Ihren React-Komponenten verwenden können.

Um React-Animationen zu verwenden, müssen Sie zuerst die Bibliothek installieren:

npm Installieren Reaktionsanimationen --speichern

Sie müssen auch Aphrodite installieren, das eine Abhängigkeit von React-Animationen ist:

npm Installieren Aphrodite --speichern

Nachdem Sie die Bibliotheken installiert haben, können Sie die gewünschten Animationen importieren:

importieren { einblenden ausblenden } aus 'Reaktionsanimationen';

Anschließend können Sie die Animationen in Ihren Komponenten verwenden:

importieren Reagieren, {Komponente} aus 'reagieren';
importieren { Stylesheet, css } aus 'Aphrodite';
importieren { einblenden ausblenden } aus 'Reaktionsanimationen';
konst Stile = StyleSheet.create({
 einblenden: {
 animationName: fadeIn,
 Animationsdauer: '2s'
 },
 ausblenden: {
 animationName: fadeOut,
 Animationsdauer: '2s'
 }
});


KlasseFadeInOuterweitertKomponente{
Konstrukteur(Requisiten) {
super(Requisiten);


Das.Zustand = {
 ist sichtbar: FALSCH
 };
 }


rendern() {
konst Klassenname = Das.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);


zurückkehren (
<div>
<div Klassenname={Klassenname}>
 Hallo Welt!
</div>
<Schaltfläche onClick={this.toggleVisibility}>
 Umschalten
</button>
</div>
 );
 }


toggleVisibility = () => {
Das.setState (prevState => ({
ist sichtbar: !vorherigerZustand.ist sichtbar
 }));
 }
}
ExportStandard FadeInOut;

Dieses Beispiel beginnt mit dem Importieren der FadeIn- und FadeOut-Animationen aus der React-Animations-Bibliothek. Anschließend definiert es ein Styles-Objekt mit den FadeIn- und FadeOut-Animationen und einer auf zwei Sekunden gesetzten AnimationDuration.

Die Schaltfläche schaltet die Sichtbarkeit der Komponente um. Wenn jemand darauf klickt, wird die Zustandsvariable isVisible aktualisiert und die Komponente wird je nach aktuellem Zustand ein- oder ausgeblendet.

Methode 3: Verwenden der React-Simple-Animate-Bibliothek

Die React-Simple-Animate-Bibliothek bietet eine einfache Möglichkeit, Animationen zu React-Komponenten hinzuzufügen. Es bietet eine deklarative API, die es einfach macht, komplexe Animationen zu definieren.

Um die Bibliothek zu verwenden, müssen Sie sie zuerst installieren:

npm Installieren reagieren-einfach-animieren --speichern

Dann können Sie es in Ihren Komponenten verwenden:

importieren Reagieren, {Komponente} aus 'reagieren';
importieren { Animieren, Keyframes animieren} aus "reagieren-einfach-animieren";
KlasseApperweitertKomponente{
 rendern() {
zurückkehren (
<div>
<Animieren
 spielen
Start={{
 Deckkraft: 0
 }}
Ende={{
 Deckkraft: 1
 }}
>
<div>
 Hallo Welt!
</div>
</Animate>
<Keyframes animieren
 spielen
 Dauer={2}
 Keyframes={[
 {Deckkraft: 0, Transformation: 'translateX(-100px)' },
 {Deckkraft: 1, Transformation: 'translateX(0px)' }
 ]}
>
<div>
 Hallo Welt!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
ExportStandard Anwendung;

Der Animieren Die Komponente blendet ein div-Element ein. Es beginnt mit einer Deckkraft von 0 und endet mit einer Deckkraft von 1. Die Play-Prop ist auf „true“ gesetzt, was dazu führt, dass die Animation automatisch abgespielt wird, wenn die Komponente bereitgestellt wird.

Der Keyframes animieren Die Komponente animiert ein div-Element über zwei Sekunden. Das Keyframes-Array gibt den Start- und Endzustand der Animation an. Der erste Keyframe hat eine Deckkraft von 0 und einen translateX-Wert von -100px. Der zweite Keyframe hat eine Deckkraft von 1 und einen translateX-Wert von 0px.

Erhöhen Sie das Benutzerengagement mit Animationen

Jetzt kennen Sie einige der Möglichkeiten, wie Sie Animationen in Ihrer React-Anwendung verwenden können. Sie können Animationen verwenden, um die Benutzerinteraktion mit Ihrer Anwendung zu erhöhen.

Beispielsweise möchten Sie möglicherweise eine Animation verwenden, um den Benutzer für das Abschließen einer Aufgabe zu belohnen. Dies kann so etwas Einfaches wie eine kurze „Spinner“-Animation oder eine komplexere Animation sein, die abgespielt wird, wenn der Benutzer ein Level in einem Spiel abschließt.

Sie können Ihre React-Anwendung auch kostenlos im Web mit Diensten wie Github-Seiten oder Heroku bereitstellen.