Hvordan lage inngangs- og utgangsanimasjoner for en reaksjonskomponent ved hjelp av Framer Motion

Å animere en React-komponent når den kommer inn eller ut av skjermen kan være en utfordring. Dette er fordi når du skjuler en komponent, fjerner React den fra DOM, noe som gjør den utilgjengelig for animasjon. Når du viser komponenten igjen, legger React den til på nytt i DOM, noe som kan resultere i en brå opptreden uten animasjon.

Du kan løse dette problemet med et animasjonsbibliotek som Framer Motion.

Hva er Framer Motion?

Framer Motion er et produksjonsklart animasjonsbibliotek for React. Den gir en rekke komponenter, kroker, nøkkelbilder og tilpassede lettelsesfunksjoner for å lage og kontrollere animasjoner.

En fordel med Framer Motion er at det gjør det enkelt å lage jevne og flytende animasjoner uten å måtte skrive mye JavaScript-kode eller finne ut beregninger for hver overgang.

Den har også et hendelsessystem, som du kan bruke til å utløse animasjoner basert på brukerinndata som knappeklikk og bevegelser, og skape interaktive og dynamiske grensesnitt som føles responsive.

For å demonstrere hvordan du bruker Framer Motion i React, vil du animere en komponent som kommer inn og ut av skjermen når du klikker på en knapp.

Opprette et React-prosjekt

For å opprette et React-prosjekt må du installer Node.js og npm (Node Package Manager) på maskinen din hvis du ikke har det.

Når du har installert disse avhengighetene, kan du opprette et nytt React-prosjekt ved hjelp av Vite ved å kjøre kommandoen garn vite i terminalen din.

garn vite

Denne kommandoen vil opprette en ny mappe med alle nødvendige filer og avhengigheter forhåndsinstallert. Naviger til mappen og start utviklingsserveren med kommandoen yarn start.

start på garn

Installerer Framer Motion i React

Installer Framer Motion ved å kjøre denne kommandoen:

npm installer framer-motion

Denne kommandoen vil legge til Framer Motion som en avhengighet til prosjektet ditt.

Animering av en komponent

For å animere en komponent når den kommer inn og forlater skjermen i React using Framer Motion, må du pakke den inn i bevegelseskomponenten.

Bevegelseskomponenten gir et sett med egenskaper for å animere komponentens inngang og utgang. Du kan bruke start-, animasjons- og utgangsrekvisittene for å kontrollere synligheten og plasseringen.

For å se den i aksjon, legg til følgende kode øverst i App.jsx for å importere bevegelseskomponenten fra framer-motion.

import { bevegelse } fra"framer-motion";

Deretter oppretter du komponenten du vil animere ved å pakke den inn med bevegelseskomponenten. Dette eksemplet bruker et div-element, men du kan bruke et hvilket som helst annet element du vil, for eksempel button, li og p blant andre.

import { bevegelse, AnimatePresence } fra"framer-motion"
funksjonApp() {
komme tilbake (
 <>

 initial={{ x: -100, opasitet: 0 }}
 animere={{ x: 0, opasitet: 1 }}
 exit={{ x: -100, opasitet: 0 }}
 >
Sendt!</p>
 </motion.div>

 </>
 )
}

Bevegelseskomponenten lar deg animere div-elementet som inneholder teksten "Sendt!".

De første, animere, og exit egenskapene til bevegelseskomponenten definerer komponentens inngangs- og utgangsanimasjoner. Når komponenten først er gjengitt, vil den starte med en x-posisjon på -100 (utenfor skjermen til venstre) og en opasitet på 0 og bli usynlig.

Animer-egenskapen definerer hvordan komponenten skal animere når den kommer inn på skjermen, i dette tilfellet flyttes fra en x posisjon på -100 til en x-posisjon på 0 (glider inn fra venstre) og gradvis falmer inn i en opasitet på 1 og blir fullstendig synlig.

Til slutt definerer exit-egenskapen hvordan komponenten skal animeres når du fjerner den fra skjermen. I dette tilfellet vil komponenten gli av skjermen til venstre med en x-posisjon på -100 og gradvis tone ut til en opasitet på 0.

Du må også pakke inn bevegelseskomponenten med AnimatePresence-komponenten fra framer-motion til animasjonskomponenter når du fjerner dem fra React DOM-treet.

Nå som du har definert inngangs- og utgangsanimasjonene, kan du legge til en knapp for å utløse animasjonen. Her er den modifiserte komponenten med knappen:

import { AnimatePresence, motion } fra"framer-motion";
import { useState } fra"reagere";
funksjonApp() {
konst [isVisible, setIsVisible] = useState(ekte);
konst toggleSynlighet = () => {
 setIsVisible(!isVisible);
 };
komme tilbake (
 <>

 {erVisible && ( <motion.div
 initial={{ x: -100, opasitet: 0 }}
 animere={{ x: 0, opasitet: 1 }}
 exit={{ x: -100, opasitet: 0 }}
 >
Sendt!</p>
 </motion.div>)}
 </AnimatePresence>

 Gi beskjed
 </button>
 </>
 )
}

Denne oppdaterte koden legger til en tilstandsvariabel kalt isVisible ved å bruke useState-kroken. Denne variabelen sporer om komponenten skal være synlig. ToggleVisibility-funksjonen veksler verdien av isVisible mellom sann og usann når du klikker på knappen.

Du er nå gjengi komponenten betinget avhengig av verdien av isVisible. Hvis isVisible er sant, vil bevegelseskomponenten gjengis med inngangsanimasjonen.

Til slutt legger du til en onClick-hendelsesbehandler til knappen som kaller toggleVisibility-funksjonen, oppdaterer statusen til isVisible og utløser inngangs- eller utgangsanimasjonen til bevegelseskomponenten.

Legge til en lettelsesfunksjon

En lettelsesfunksjon kontrollerer endringshastigheten til animasjonen over tid. Den definerer tidspunktet for en animasjon ved å spesifisere hvordan animasjonen skal øke eller redusere hastigheten etter hvert som den skrider frem. Uten en lettelsesfunksjon kan animasjonen gjengi for raskt.

Framer Motion har flere lettelsesfunksjoner å velge mellom, inkludert easeInOut. Importer den øverst i App.jsx fra framer-motion for å bruke den.

import { motion, easeInOut } fra"framer-motion";

Legg den deretter til overgangsobjektet i bevegelseskomponenten:

 initial={{ x: -100, opasitet: 0 }}
 animere={{ x: 0, opasitet: 1, overgang: { varighet: 0.5, letthet: easeInOut } }}
 exit={{ x: -100, opasitet: 0, overgang: { varighet: 0.5, letthet: easeInOut } }}
>
Sendt!</p>
</motion.div>

Duration-egenskapen angir hvor lenge animasjonen skal kjøre.

Bruk vanlig CSS for enkle animasjoner

Det er så mye mer du kan gjøre med Framer Motion, inkludert 3D-animasjon. Du trenger imidlertid ikke alltid et bibliotek for å lage animasjoner. For enkle animasjoner som sveveoverganger kan du alltid bruke vanlig CSS.