Lær, hvordan du tilføjer enkle animationer til din React-app med et minimum af kodningsindsats.
Animation er en afgørende del af næsten enhver moderne webapplikation. Det er også en af de sværeste dele at få rigtigt.
Framer Motion er et bibliotek bygget til React, der gør det nemt at animere komponenter.
Hvordan Framer Motion virker
Framer Motion bruger bevægelseskomponenten til animationer. Hvert HTML/SVG-element har en tilsvarende bevægelseskomponent, der har rekvisitter til bevægelser og animationer. For eksempel ser en almindelig HTML-div ud sådan her:
<div>div>
Mens Framer Motion-ækvivalenten ser sådan ud:
<motion.div>motion.div>
Bevægelseskomponenter understøtter en animere prop, der udløser animationer, når dens værdier ændres. Til komplekse animationer skal du bruge brug Animate krog med en scoped ref.
Animation i Framer Motion
Før du bruger Framer Motion i dit projekt, skal du have Node.js runtime og Garnpakkehåndteringen installeret på din computer og forstå, hvad React er, og hvordan man bruger det.
Du kan se og downloade dette projekts kildekode fra dens GitHub Repository. Brug starter-filer gren som en starterskabelon til at følge sammen med denne tutorial, eller endelige filer filial for den komplette demo. Du kan også se projektet i aktion via denne live demo.
Åbn din terminal og kør:
git clone [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
garn
garn dev
Når du åbner lokal vært: 5173 i din browser vil du se dette:
Du kan nu oprette din første simple animation, en knap, der vokser ved at svæve og krymper, når markøren forlader.
Åbn src/App.jsx fil i en kodeeditor. Denne fil indeholder en funktionel komponent, der returnerer et React-fragment. Importer Knap komponent, gengiv den derefter, passerer i en tekst rekvisit:
Animeret knap</h4>
Bevæg musen over knappen for at se effekten</div>
Dernæst skal du redigere Button.jsx fil og importer bevægelse nytte fra framer-bevægelse:
importere { bevægelse } fra"framer-motion"
Udskift nu den almindelige knap element med bevægelse.[element] komponent. I dette tilfælde skal du bruge bevægelsesknap komponent.
Tilføj derefter a mens hover gestus prop og videregive et objekt med værdier, som Framer Motion skal animere til, når en bruger holder musemarkøren over knappen.
vægt: 1.1 }}> {tekst}
</motion.button>
Knappen vil nu animere, når du flytter musemarkøren hen over den eller ud af den:
Du undrer dig måske over, hvorfor denne demo ikke bruger CSS-animationer i stedet. Framer Motion har fordele i forhold til CSS, fordi det integreres med React-tilstand og generelt resulterer i renere kode.
Prøv derefter noget mere komplekst: at animere en modal. I Backdrop.jsx, importer motion-værktøjet og opret en funktionel komponent med påKlik og børn rekvisitter. Returner a motion.div komponent med klasse "bagtæppe" og påKlik lytter i JSX.
eksportStandardfungereBagtæppe() {
Vend tilbage (<>
</motion.div>
</>)
}
Tilføj derefter tre rekvisitter, nemlig: initial, animere, og Afslut. Disse rekvisitter repræsenterer henholdsvis den oprindelige tilstand af komponenten, den tilstand, komponenten skal animere til, og den tilstand, komponenten skal være i efter animation.
Tilføje påKlik og børn rekvisitter til motion.div og indstil overgangsvarigheden til 0,34 sekunder:
eksportStandardfungereBagtæppe ({onClick, børn}){
Vend tilbage (<>
onClick={onClick}
klassenavn="bagtæppe"
initial={{ Gennemsigtighed: 0, baggrundsfilter:"slør (0px)" }}
animere={{ Gennemsigtighed: 1, baggrundsfilter:"slør (3,4px)" }}
exit={{ Gennemsigtighed: 0, baggrundsfilter:"slør (0px)"}}
overgang={{
varighed: 0.34,
}}
>
{børn}
</motion.div>
</>)
}
Det Bagtæppe komponent er en indpakning til Modal komponent. Ved at klikke på baggrunden afvises modalen. I Modal.jsx, import bevægelse og Backdrop-komponenten. Den funktionelle standardkomponent accepterer rekvisitter: tætModal og tekst. Opret en variantvariabel som et objekt.
konst varianter = {
initial: {
y: "-200%",
Gennemsigtighed: 1,
},
synlig: {
y: "50%",
overgang: {
varighed: 0.1,
type: "forår",
dæmpning: 32,
stivhed: 500
}
},
Afslut: {
y: "200%",
}
}
Returner en motion.div-komponent pakket ind af en baggrundskomponent med en "varianter"-prop, der peger på variantobjektet. Varianter er et sæt foruddefinerede animationstilstande, som komponenten kan være i.
onClick={(e) => e.stopPropagation()}
klassenavn="modal"
varianter={varianter}
initial='initial'
animere ='synlig'
exit='Afslut'
>
{tekst}
</motion.div>
</Backdrop>
Dernæst skal du tilføje funktionaliteten for at vise modalen, når en bruger klikker på knappen. Åbn App.jsx fil og importer useState Reaktionskrog og den Modal komponent.
importere { useState } fra"reagere";
importere Modal fra"./components/Modal";
Opret derefter en modalÅben tilstand med standardværdien indstillet til falsk.
konst [modalOpen, setModalOpen] = useState(falsk);
Dernæst skal du definere en funktion tætModal der sætter modalÅben til falsk.
fungeretætModal() {
sætModalOpen(falsk)
}
Øverst i React-fragmentet skal du betinget gengive en Modal komponent og bestå den relevante tekst prop med closeModal prop.
{modalOpen && <Modaltekst="Dette er en modal animeret med Framer Motion"}
Så i den anden afsnit element, gengive en knap element med en onClick-hændelseshandler, der sætter modalOpen til false.
Du vil måske bemærke, at React afmonterer Modal-komponenten fra DOM uden en exit-animation. For at rette op på det skal du bruge en Animer tilstedeværelse komponent. Importer AnimatePresence fra framer-bevægelse.
importere {AnimatePresence} fra'framer-motion';
Pak nu Modal-komponenten ind i AnimatePresence-komponenten og indstil initial prop til falsk og den mode at vente".
falsk} tilstand="vente">
{modalOpen && <Modaltekst="Dette er en modal animeret med Framer Motion"tætModal={closeModal} />}
</AnimatePresence> AnimatePresence-komponenten tillader exit-animationer at fuldføre, før React demonterer den fra DOM.
Framer Motion kan animere komponenter på scroll ved hjælp af mens InView rekvisit. Åbn ScrollElement.jsx, og importer bevægelse nytte. Lave om div til motion.div med klassen "scroll-element".
initial={{ Gennemsigtighed: 0, vægt: 0, rotere: 14 }}
whileInView={{ Gennemsigtighed: 1, vægt: 1, rotere: 0 }}
overgang={{ varighed: .8 }}
viewport={{ enkelt gang: rigtigt }}
klassenavn='scroll-element'
>
Rul element
</motion.div>
Det viewport prop peger på et objekt, der sætter sig enkelt gang til rigtigt. Dernæst i App.jsx fil, importer ScrollElement komponent og definere en variabel scrollElementCount, der har en heltalsværdi.
lade scrollElementCount=14;
I den sidste afsnit element, skal du oprette et array med en specifik længde defineret af scrollElementCount der kortlægger hvert element i arrayet og genererer en komponent med en unik nøgle baseret på indekset jeg.
{[...Array (scrollElementCount)].map((x, jeg) =><ScrollElementnøgle={jeg} />)}
Nu, når du vender tilbage til browseren, skulle elementer animere, når du ruller dem til syne.
Alternativer til Framer Motion
Framer Motion er ikke det eneste animationsbibliotek på markedet. Hvis du ikke kan lide den måde, Framer Motion gør tingene på, kan du prøve andre biblioteker som f.eks Reager forår.
Du kan også bruge CSS-animationer, som alle moderne browsere understøtter indbygget, men de involverede teknikker kan være vanskelige at lære og konfigurere.
Forbedring af brugeroplevelsen med animationer
Hver bruger forventer en smørglad oplevelse, når de bruger en webapplikation. Et websted eller en applikation uden animationer føles statisk og ikke reagerer. Animationer forbedrer brugeroplevelsen, fordi du kan bruge dem til at kommunikere feedback til brugeren, når de udfører en bestemt handling.