So erstellen Sie Eingangs- und Ausgangsanimationen für eine Reaktionskomponente mithilfe von Framer Motion

Das Animieren einer React-Komponente beim Betreten oder Verlassen des Bildschirms kann eine Herausforderung sein. Dies liegt daran, dass React beim Ausblenden einer Komponente diese aus dem DOM entfernt, wodurch sie für die Animation nicht verfügbar ist. Wenn Sie die Komponente erneut anzeigen, fügt React sie erneut dem DOM hinzu, was zu einem abrupten Erscheinen ohne Animation führen kann.

Sie können dieses Problem mit einer Animationsbibliothek wie Framer Motion lösen.

Was ist Framer Motion?

Framer Motion ist eine produktionsreife Animationsbibliothek für React. Es bietet eine Reihe von Komponenten, Hooks, Keyframes und benutzerdefinierten Beschleunigungsfunktionen zum Erstellen und Steuern von Animationen.

Ein Vorteil von Framer Motion besteht darin, dass es einfach ist, flüssige und flüssige Animationen zu erstellen, ohne viel JavaScript-Code schreiben oder Berechnungen für jeden Übergang durchführen zu müssen.

Es verfügt außerdem über ein Ereignissystem, mit dem Sie Animationen basierend auf Benutzereingaben wie Tastenklicks und Gesten auslösen können, wodurch interaktive und dynamische Schnittstellen erstellt werden, die sich reaktionsschnell anfühlen.

Um zu demonstrieren, wie Framer Motion in React verwendet wird, animieren Sie eine Komponente, die den Bildschirm betritt und verlässt, wenn Sie auf eine Schaltfläche klicken.

Erstellen eines Reaktionsprojekts

Um ein React-Projekt zu erstellen, müssen Sie Folgendes tun Installieren Sie Node.js und npm (Node Package Manager) auf Ihrem Computer wenn nicht.

Sobald Sie diese Abhängigkeiten installiert haben, können Sie es tun Erstellen Sie ein neues React-Projekt mit Vite indem Sie den Befehl „garn vite“ in Ihrem Terminal ausführen.

Garn Vite

Dieser Befehl erstellt einen neuen Ordner mit allen erforderlichen Dateien und Abhängigkeiten vorinstalliert. Navigieren Sie zum Ordner und starten Sie den Entwicklungsserver mit dem Befehl „garn start“.

Garnanfang

Framer Motion in React installieren

Installieren Sie Framer Motion, indem Sie diesen Befehl ausführen:

npm installiere Framer-Motion

Dieser Befehl fügt Framer Motion als Abhängigkeit zu Ihrem Projekt hinzu.

Animieren einer Komponente

Um eine Komponente beim Betreten und Verlassen des Bildschirms in React mithilfe von Framer Motion zu animieren, müssen Sie sie in die Bewegungskomponente einbinden.

Die Bewegungskomponente stellt eine Reihe von Eigenschaften zum Animieren des Ein- und Ausgangs der Komponente bereit. Sie können die Requisiten „Initial“, „Animate“ und „Exit“ verwenden, um seine Sichtbarkeit und Position zu steuern.

Um es in Aktion zu sehen, fügen Sie oben in App.jsx den folgenden Code hinzu, um die Bewegungskomponente aus Framer-Motion zu importieren.

importieren { Bewegung } aus„framer-motion“;

Erstellen Sie als Nächstes die Komponente, die Sie animieren möchten, indem Sie sie mit der Bewegungskomponente umschließen. In diesem Beispiel wird ein div-Element verwendet, Sie können jedoch jedes andere gewünschte Element verwenden, z. B. button, li und p unter anderem.

importieren { Bewegung, AnimatePresence } aus„framer-motion“
FunktionApp() {
zurückkehren (
 <>

 initial={{ X: -100, Opazität: 0 }}
 animieren={{ X: 0, Opazität: 1 }}
 Exit={{ X: -100, Opazität: 0 }}
 >
Gesendet!</p>
 </motion.div>

 </>
 )
}

Mit der Bewegungskomponente können Sie das div-Element animieren, das den Text „Sent!“ enthält.

Der Initial, animieren, Und Ausfahrt Eigenschaften der Bewegungskomponente definieren die Eingangs- und Ausgangsanimationen der Komponente. Wenn die Komponente zum ersten Mal gerendert wird, beginnt sie mit einer x-Position von -100 (außerhalb des Bildschirms nach links) und einer Deckkraft von 0 und wird unsichtbar.

Die animate-Eigenschaft definiert, wie die Komponente animiert werden soll, wenn sie den Bildschirm betritt, in diesem Fall bei der Bewegung von einem x Position von -100 bis zu einer x-Position von 0 (von links nach innen gleitend) und allmählich zu einer Deckkraft von 1 verblassen und vollständig werden sichtbar.

Schließlich definiert die Exit-Eigenschaft, wie die Komponente animiert werden soll, wenn Sie sie vom Bildschirm entfernen. In diesem Fall verschiebt sich die Komponente mit einer x-Position von -100 nach links vom Bildschirm und wird allmählich bis zu einer Deckkraft von 0 ausgeblendet.

Sie müssen die Bewegungskomponente auch mit der AnimatePresence-Komponente von Framer-Motion umschließen, um Komponenten zu animieren, wenn Sie sie aus dem React-DOM-Baum entfernen.

Nachdem Sie nun die Eingangs- und Ausgangsanimationen definiert haben, können Sie eine Schaltfläche zum Auslösen der Animation hinzufügen. Hier ist die geänderte Komponente mit der Schaltfläche:

importieren { AnimatePresence, Bewegung } aus„framer-motion“;
importieren { useState } aus"reagieren";
FunktionApp() {
const [isVisible, setIsVisible] = useState(WAHR);
const toggleVisibility = () => {
 setIsVisible(!isVisible);
 };
zurückkehren (
 <>

 {ist sichtbar && ( <Bewegung.div
 initial={{ X: -100, Opazität: 0 }}
 animieren={{ X: 0, Opazität: 1 }}
 Exit={{ X: -100, Opazität: 0 }}
 >
Gesendet!</p>
 </motion.div>)}
 </AnimatePresence>

 Benachrichtigen
 </button>
 </>
 )
}

Dieser aktualisierte Code fügt mithilfe des useState-Hooks eine Statusvariable namens isVisible hinzu. Diese Variable verfolgt, ob die Komponente sichtbar sein soll. Die Funktion toggleVisibility schaltet den Wert von isVisible zwischen true und false um, wenn Sie auf die Schaltfläche klicken.

Sie sind jetzt Rendern der Komponente unter Bedingungen abhängig vom Wert von isVisible. Wenn isVisible wahr ist, wird die Bewegungskomponente mit der Eingangsanimation gerendert.

Fügen Sie abschließend einen onClick-Ereignishandler zur Schaltfläche hinzu, der die Funktion toggleVisibility aufruft, den Status von isVisible aktualisiert und die Eingangs- oder Ausgangsanimation der Bewegungskomponente auslöst.

Hinzufügen einer Beschleunigungsfunktion

Eine Beschleunigungsfunktion steuert die Änderungsrate der Animation im Laufe der Zeit. Es definiert das Timing einer Animation, indem es angibt, wie die Animation im Verlauf beschleunigt oder verlangsamt werden soll. Ohne eine Beschleunigungsfunktion wird die Animation möglicherweise zu schnell gerendert.

Framer Motion bietet mehrere Beschleunigungsfunktionen zur Auswahl, darunter „easeInOut“. Importieren Sie es oben in App.jsx von Framer-Motion, um es zu verwenden.

importieren { Bewegung, easyInOut } aus„framer-motion“;

Fügen Sie es dann dem Übergangsobjekt in der Bewegungskomponente hinzu:

 initial={{ X: -100, Opazität: 0 }}
 animieren={{ X: 0, Opazität: 1, Übergang: { Dauer: 0.5, Leichtigkeit: easyInOut } }}
 Exit={{ X: -100, Opazität: 0, Übergang: { Dauer: 0.5, Leichtigkeit: easyInOut } }}
>
Gesendet!</p>
</motion.div>

Die Eigenschaft „Dauer“ gibt an, wie lange die Animation laufen soll.

Verwenden Sie einfaches CSS für einfache Animationen

Mit Framer Motion können Sie noch viel mehr tun, einschließlich 3D-Animationen. Allerdings benötigen Sie nicht immer eine Bibliothek, um Animationen zu erstellen. Für einfache Animationen wie Hover-Übergänge können Sie immer einfaches CSS verwenden.