So fügen Sie mit Framer Motion Animationen zu Ihren React-Apps hinzu

Erfahren Sie, wie Sie mit minimalem Programmieraufwand einfache Animationen zu Ihrer React-App hinzufügen.

Animation ist ein entscheidender Bestandteil fast jeder modernen Webanwendung. Es ist auch einer der schwierigsten Teile, es richtig zu machen.

Framer Motion ist eine für React entwickelte Bibliothek, mit der sich Komponenten einfach animieren lassen.

Framer Motion nutzt die Bewegungskomponente für Animationen. Jedes HTML/SVG-Element verfügt über eine entsprechende Bewegungskomponente, die Requisiten für Gesten und Animationen enthält. Ein normales HTML-Div sieht beispielsweise so aus:

Während das Framer Motion-Äquivalent so aussieht:

Bewegungskomponenten unterstützen eineanimieren Requisite, die Animationen auslöst, wenn sich ihre Werte ändern. Für komplexe Animationen verwenden Sie dieverwendenAnimierenHaken mit einer Zielfernrohrreferenz.

Bevor Sie Framer Motion in Ihrem Projekt verwenden, müssen Sie die Node.js-Laufzeitumgebung und den Yarn-Paketmanager auf Ihrem Computer installiert haben und wissen, was React ist und wie man es verwendet.

Sie können den Quellcode dieses Projekts im GitHub-Repository anzeigen und herunterladen. Benutzen Sie dieStarter-Dateienbranch als Startervorlage, um diesem Tutorial zu folgen, oder demendgültige Dateien Branch für die vollständige Demo. Über diese Live-Demo können Sie das Projekt auch in Aktion sehen.

Öffnen Sie Ihr Terminal und führen Sie Folgendes aus:

Beim Öffnenlocalhost:5173In Ihrem Browser sehen Sie Folgendes:

Sie können jetzt Ihre erste einfache Animation erstellen, eine Schaltfläche, die beim Bewegen des Mauszeigers wächst und beim Verlassen des Cursors kleiner wird.

Öffne dassrc/App.jsx Datei in einem Code-Editor. Diese Datei enthält eine funktionale Komponente, die ein React-Fragment zurückgibt. Importieren Sie dieTasteKomponente, dann rendern Sie sie und übergeben Sie aTextStütze:

Bearbeiten Sie als Nächstes dieButton.jsxDatei und importieren Sie dieBewegungDienstprogramm vonFramer-Bewegung:

Ersetzen Sie nun den regulärenTasteElement mit demBewegung.[Element] Komponente. Verwenden Sie in diesem Fall dieBewegungstasteKomponente.

Fügen Sie dann a hinzuwhileHoverGestenstütze und übergeben Sie ein Objekt mit Werten, zu denen Framer Motion animieren soll, wenn ein Benutzer mit der Maus über die Schaltfläche fährt.

Die Schaltfläche wird jetzt animiert, wenn Sie den Mauszeiger darüber oder aus ihr heraus bewegen:

Sie fragen sich vielleicht, warum diese Demo nicht stattdessen CSS-Animationen verwendet. Framer Motion hat Vorteile gegenüber CSS, da es sich in den React-Status integrieren lässt und im Allgemeinen zu saubererem Code führt.

Versuchen Sie als Nächstes etwas Komplexeres: das Animieren eines Modals. InHintergrund.jsx, importieren Sie das Bewegungsdienstprogramm und erstellen Sie eine funktionale Komponente mitonClickUndKinder Requisiten. Geben Sie a zurückBewegung.divKomponente mit der Klasse „Hintergrund“ undonClickListener im JSX.

Fügen Sie dann drei Requisiten hinzu, nämlich:anfänglich,animieren,UndAusfahrt . Diese Requisiten repräsentieren den ursprünglichen Zustand der Komponente, den Zustand, in den die Komponente animiert werden soll, bzw. den Zustand, in dem sich die Komponente nach der Animation befinden sollte.

HinzufügenonClickUndKinderRequisiten an dieBewegung.divund stellen Sie die Übergangsdauer auf 0,34 Sekunden ein:

DerHintergrundKomponente ist ein Wrapper für dieModal Komponente. Durch Klicken auf den Hintergrund wird das Modal ausgeblendet. InModal.jsx, importierenBewegung und die Hintergrundkomponente. Die Standardfunktionskomponente akzeptiert Requisiten:closeModalUndText . Erstellen Sie eine Variantenvariable als Objekt.

Gibt eine motion.div-Komponente zurück, die von einer Hintergrundkomponente umschlossen ist, mit einer „Varianten“-Requisite, die auf das Variantenobjekt zeigt. Varianten sind eine Reihe vordefinierter Animationszustände, in denen sich die Komponente befinden könnte.

Als Nächstes müssen Sie die Funktionalität hinzufügen, um das Modal anzuzeigen, wenn ein Benutzer auf die Schaltfläche klickt. Öffne dasApp.jsxDatei und importieren Sie dieuseStateReagieren Sie mit dem Haken und demModalKomponente.

Dann erstellen Sie einemodalOffenZustand mit dem Standardwert auf eingestelltFALSCH.

Als nächstes definieren Sie eine FunktioncloseModaldas legt festmodalOffenist falsch.

Rendern Sie oben im React-Fragment bedingt aModalKomponente und übergeben Sie das entsprechendeTextprop mit der closeModal-Requisite.

Dann im zweitenAbschnittElement, rendern aTasteElement mit einem onClick-Ereignishandler, der modalOpen auf false setzt.

Möglicherweise stellen Sie fest, dass React die Modal-Komponente ohne eine Exit-Animation aus dem DOM aushängt. Um das zu beheben, benötigen Sie eineAnimatePresence Komponente. Importieren Sie AnimatePresence ausFramer-Bewegung.

Wickeln Sie nun die Modal-Komponente in die AnimatePresence-Komponente ein und legen Sie festanfänglichprop auf false und dasModuswarten".

Die AnimatePresence-Komponente ermöglicht den Abschluss von Exit-Animationen, bevor React sie aus dem DOM aushängt.

Framer Motion kann Komponenten beim Scrollen animierenwhileInView Stütze. Öffne dasScrollElement.jsx, und importieren Sie dieBewegung Dienstprogramm. ÄnderndivZuBewegung.divmit der Klasse „Scroll-Element“.

DerAnsichtsfensterprop zeigt auf ein Objekt, das gesetzt wirdeinmalZuWAHR . Als nächstes imApp.jsxDatei, importieren Sie dieScrollElementKomponente und definieren Sie eine Variable scrollElementCount, die einen ganzzahligen Wert enthält.

Im letztenAbschnittElement, erstellen Sie ein Array mit einer bestimmten Länge, die durch definiert wirdscrollElementCountdas jedes Element des Arrays abbildet und eine Komponente mit einem eindeutigen Schlüssel basierend auf dem Index generiertich.

Wenn Sie nun zum Browser zurückkehren, sollten die Elemente animiert sein, wenn Sie sie in die Ansicht scrollen.

Framer Motion ist nicht die einzige Animationsbibliothek auf dem Markt. Wenn Ihnen die Funktionsweise von Framer Motion nicht gefällt, können Sie andere Bibliotheken wie React Spring ausprobieren.

Sie können auch CSS-Animationen verwenden, die von allen modernen Browsern nativ unterstützt werden. Die entsprechenden Techniken können jedoch schwierig zu erlernen und einzurichten sein.

Jeder Benutzer erwartet ein butterweiches Erlebnis bei der Nutzung einer Webanwendung. Eine Website oder Anwendung ohne Animationen wirkt statisch und reagiert nicht. Animationen verbessern das Benutzererlebnis, da Sie damit dem Benutzer Feedback geben können, wenn er eine bestimmte Aktion ausführt.

David Uzondu ist ein JavaScript-Entwickler mit mehr als 3 Jahren Erfahrung. In seiner Freizeit schreibt er gern.