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

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.

So funktioniert Framer Motion

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:

<div>div>

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

<Bewegung.div>Bewegung.div>

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

Animation in Framer Motion

Bevor Sie Framer Motion in Ihrem Projekt verwenden können, müssen Sie über Folgendes verfügen

Node.js-Laufzeit und der auf Ihrem Computer installierte Yarn-Paketmanager und Verstehen Sie, was React ist und wie Sie es verwenden.

Sie können den Quellcode dieses Projekts hier ansehen und herunterladen GitHub-Repository. Benutzen Sie die Starter-Dateien branch als Startervorlage, um diesem Tutorial zu folgen, oder dem endgültige Dateien Branch für die vollständige Demo. Darüber können Sie das Projekt auch in Aktion sehen Live-Demo.

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

Git-Klon [email protected]: makeuseofcode/framer-motion-app.git
CD-Framer-Motion-App
Garn
Garnentw

Beim Öffnen localhost: 5173 In 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 das src/App.jsx Datei in einem Code-Editor. Diese Datei enthält eine funktionale Komponente, die ein React-Fragment zurückgibt. Importieren Sie die Taste Komponente, dann rendern Sie sie und übergeben Sie a Text Stütze:

Animierter Button</h4>
Bewegen Sie Ihre Maus über die Schaltfläche, um den Effekt zu sehen</div>
„Lass mich schweben“/>
</section>

Bearbeiten Sie als Nächstes die Button.jsx Datei und importieren Sie die Bewegung Dienstprogramm von Framer-Bewegung:

importieren { Bewegung } aus„framer-motion“

Ersetzen Sie nun den regulären Taste Element mit dem Bewegung.[Element] Komponente. Verwenden Sie in diesem Fall die Bewegungstaste Komponente.

Fügen Sie dann a hinzu whileHover Gestenstü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.

Skala: 1.1 }}>
{Text}
</motion.button>

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 verwendet wird CSS-Animationen stattdessen. 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. In Hintergrund.jsx, importieren Sie das Bewegungsdienstprogramm und erstellen Sie eine funktionale Komponente mit onClick Und Kinder Requisiten. Geben Sie a zurück Bewegung.div Komponente mit der Klasse „Hintergrund“ und onClick Listener im JSX.

ExportStandardFunktionHintergrund() {
zurückkehren (<>

 </motion.div>
 </>)
}

Fügen Sie dann drei Requisiten hinzu, nämlich: Initial, animieren, Und Ausfahrt. 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ügen onClick Und Kinder Requisiten an die Bewegung.div und stellen Sie die Übergangsdauer auf 0,34 Sekunden ein:

ExportStandardFunktionHintergrund ({onClick, Kinder}){
zurückkehren (<>
 onClick={onClick}
 Klassenname="Hintergrund"
 initial={{ Opazität: 0, HintergrundFilter:„Unschärfe (0px)“ }}
 animieren={{ Opazität: 1, HintergrundFilter:„Unschärfe (3,4 Pixel)“ }}
 Exit={{ Opazität: 0, HintergrundFilter:„Unschärfe (0px)“}}
 Übergang={{
 Dauer: 0.34,
 }}
 >
 {Kinder}
 </motion.div>
 </>)
}

Der Hintergrund Komponente ist ein Wrapper für die Modal Komponente. Durch Klicken auf den Hintergrund wird das Modal ausgeblendet. In Modal.jsx, importieren Bewegung und die Hintergrundkomponente. Die Standardfunktionskomponente akzeptiert Requisiten: closeModal Und Text. Erstellen Sie eine Variantenvariable als Objekt.

const Varianten = {
 Initial: {
 y: "-200%",
 Opazität: 1,
 },
 sichtbar: {
 y: "50%",
 Übergang: {
 Dauer: 0.1,
 Typ: "Frühling",
 Dämpfung: 32,
 Steifheit: 500
 }
 },
 Ausfahrt: {
 y: "200%",
 }
 }

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.

 onClick={(e) => e.stopPropagation()}
 Klassenname="modal"
 Varianten={Varianten}
 initial='Initial'
 animieren='sichtbar'
 Ausgang='Ausfahrt'
 >
 {Text}
 </motion.div>
</Backdrop>

Als Nächstes müssen Sie die Funktionalität hinzufügen, um das Modal anzuzeigen, wenn ein Benutzer auf die Schaltfläche klickt. Öffne das App.jsx Datei und importieren Sie die useState Reagieren Sie mit dem Haken und dem Modal Komponente.

importieren { useState } aus"reagieren";
importieren Modal aus"./components/Modal";

Dann erstellen Sie eine modalOffen Zustand, wobei der Standardwert auf festgelegt ist FALSCH.

const [modalOpen, setModalOpen] = useState(FALSCH);

Als nächstes definieren Sie eine Funktion closeModal das legt fest modalOffen zu falsch.

FunktioncloseModal() {
 setModalOpen(FALSCH)
}

Rendern Sie oben im React-Fragment bedingt a Modal Komponente und übergeben Sie die entsprechenden Text prop mit der closeModal-Requisite.

{modalOpen && <ModalText=„Dies ist ein mit Framer Motion animiertes Modal“}

Dann im zweiten Abschnitt Element, rendern a Taste Element mit einem onClick-Ereignishandler, der modalOpen auf false setzt.

 setModalOpen(WAHR)}>Modal anzeigen</button>

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 eine AnimatePresence Komponente. Importieren Sie AnimatePresence aus Framer-Bewegung.

importieren {AnimatePresence} aus'framer-motion';

Wickeln Sie nun die Modal-Komponente in die AnimatePresence-Komponente ein und legen Sie fest Initial prop auf false und das Modus warten".

FALSCH} mode="Warten">
 {modalOpen && <ModalText=„Dies ist ein mit Framer Motion animiertes Modal“closeModal={closeModal} />}
</AnimatePresence>

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

Framer Motion kann Komponenten beim Scrollen animieren whileInView Stütze. Öffne das ScrollElement.jsx, und importieren Sie die Bewegung Dienstprogramm. Ändern div Zu Bewegung.div mit der Klasse „Scroll-Element“.

 initial={{ Opazität: 0, Skala: 0, drehen: 14 }}
 whileInView={{ Opazität: 1, Skala: 1, drehen: 0 }}
 Übergang={{ Dauer: .8 }}
 Ansichtsfenster={{ einmal: WAHR }}
 Klassenname='Scroll-Element'
>
 Scroll-Element
</motion.div>

Der Ansichtsfenster prop zeigt auf ein Objekt, das gesetzt wird einmal Zu WAHR. Als nächstes im App.jsx Datei, importieren Sie die ScrollElement Komponente und definieren Sie eine Variable scrollElementCount, die einen ganzzahligen Wert enthält.

lassen scrollElementCount=14;

Im letzten Abschnitt Element, erstellen Sie ein Array mit einer bestimmten Länge, die durch definiert wird scrollElementCount das jedes Element des Arrays abbildet und eine Komponente mit einem eindeutigen Schlüssel basierend auf dem Index generiert ich.

{[...Array (scrollElementCount)].map((x, ich) =><ScrollElementTaste={ich} />)}

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

Alternativen zu Framer Motion

Framer Motion ist nicht die einzige Animationsbibliothek auf dem Markt. Wenn Ihnen die Art und Weise, wie Framer Motion funktioniert, nicht gefällt, können Sie andere Bibliotheken ausprobieren Reagieren Sie auf den Frühling.

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.

Verbessern der Benutzererfahrung mit Animationen

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.