Hur man lägger till animationer till dina React-appar med Framer Motion

Animation är en avgörande del av nästan alla moderna webbapplikationer. Det är också en av de svåraste delarna att få rätt.

Framer Motion är ett bibliotek byggt för React som gör det enkelt att animera komponenter.

Hur Framer Motion fungerar

Framer Motion använder rörelsekomponenten för animationer. Varje HTML/SVG-element har en motsvarande rörelsekomponent som har rekvisita för gester och animationer. Till exempel, en vanlig HTML div ser ut så här:

<div>div>

Medan Framer Motion-motsvarigheten ser ut så här:

<motion.div>motion.div>

Rörelsekomponenter stöder en animera prop som utlöser animationer när dess värden ändras. För komplexa animationer, använd använd Animate krok med en scoped ref.

Animation i Framer Motion

Innan du använder Framer Motion i ditt projekt måste du ha Node.js körtid och Garnpakethanteraren installerad på din dator och förstå vad React är och hur man använder det.

Öppna din terminal och kör:

git clone [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
garn
garn dev

När du öppnar lokal värd: 5173 i din webbläsare kommer du att se detta:

Du kan nu skapa din första enkla animation, en knapp som växer när du svävar och krymper när markören lämnar.

Öppna src/App.jsx fil i en kodredigerare. Den här filen innehåller en funktionell komponent som returnerar ett React-fragment. Importera Knapp komponent, rendera den sedan, passerar in en text stötta:

Animerad knapp</h4>
Flytta musen över knappen för att se effekten</div>
"Hover Me"/>
</section>

Redigera sedan Button.jsx fil och importera rörelse nytta från framer-rörelse:

importera { rörelse } från"framer-motion"

Byt nu ut det vanliga knapp element med rörelse.[element] komponent. Använd i det här fallet rörelseknapp komponent.

Lägg sedan till a medan du håller muspekaren gest stöd och skicka ett objekt med värden som Framer Motion ska animera till när en användare håller muspekaren över knappen.

skala: 1.1 }}>
{text}
</motion.button>

Knappen kommer nu att animeras när du flyttar muspekaren över eller ut ur den:

Du kanske undrar varför den här demon inte används CSS-animationer istället. Framer Motion har fördelar jämfört med CSS eftersom det integreras med React state och generellt resulterar i renare kod.

Prova sedan något mer komplext: animera en modal. I Backdrop.jsx, importera rörelseverktyget och skapa en funktionell komponent med påKlicka och barn rekvisita. Returnera a motion.div komponent med klass "bakgrund" och påKlicka lyssnare i JSX.

exporterastandardfungeraBakgrund() {
lämna tillbaka (<>

 </motion.div>
 </>)
}

Lägg sedan till tre rekvisita, nämligen: första, animera, och utgång. Dessa rekvisita representerar det ursprungliga tillståndet för komponenten, det tillstånd som komponenten ska animera till respektive det tillstånd som komponenten ska vara i efter animeringen.

Lägg till påKlicka och barn rekvisita till motion.div och ställ in övergångslängden till 0,34 sekunder:

exporterastandardfungeraBakgrund ({onClick, barn}){
lämna tillbaka (<>
 onClick={onClick}
 klassnamn="bakgrund"
 initial={{ opacitet: 0, backdropFilter:"oskärpa (0px)" }}
 animera={{ opacitet: 1, backdropFilter:"oskärpa (3,4px)" }}
 exit={{ opacitet: 0, backdropFilter:"oskärpa (0px)"}}
 transition={{
 varaktighet: 0.34,
 }}
 >
 {barn}
 </motion.div>
 </>)
}

De Bakgrund komponenten är ett omslag för Modal komponent. Genom att klicka på bakgrunden avfärdas modalen. I Modal.jsx, importera rörelse och Bakgrundskomponenten. Den funktionella standardkomponenten accepterar rekvisita: stängModal och text. Skapa en variantvariabel som ett objekt.

konst varianter = {
 initial: {
 y: "-200%",
 opacitet: 1,
 },
 synlig: {
 y: "50%",
 övergång: {
 varaktighet: 0.1,
 typ: "vår",
 dämpning: 32,
 styvhet: 500
 }
 },
 utgång: {
 y: "200%",
 }
 }

Returnera en motion.div-komponent omsluten av en Backdrop-komponent med en "variants"-propp som pekar på variants-objektet. Varianter är en uppsättning fördefinierade animeringstillstånd som komponenten kan vara i.

 onClick={(e) => e.stopPropagation()}
 klassnamn="modal"
 variants={varianter}
 initial='första'
 animera='synlig'
 exit='utgång'
 >
 {text}
 </motion.div>
</Backdrop>

Därefter måste du lägga till funktionaliteten för att visa modalen när en användare klickar på knappen. Öppna App.jsx fil och importera useState Reagera kroken och Modal komponent.

importera { useState } från"reagera";
importera Modal från"./components/Modal";

Skapa sedan en modalOpen tillstånd med standardvärdet inställt på falsk.

konst [modalOpen, setModalOpen] = useState(falsk);

Definiera sedan en funktion stängModal som ställer in modalOpen till falskt.

fungerastängModal() {
 setModalOpen(falsk)
}

Överst i React-fragmentet, villkorligt återge a Modal komponent och godkänn lämplig text prop med closeModal prop.

{modalOpen && <Modaltext="Detta är en modal animerad med Framer Motion"}

Sedan, i den andra sektion element, återge en knapp element med en onClick-händelsehanterare som ställer in modalOpen till false.

 setModalOpen(Sann)}>Visa Modal</button>

Du kanske märker att React avmonterar Modal-komponenten från DOM utan en utgångsanimering. För att fixa det behöver du en AnimeraNärvaro komponent. Importera AnimatePresence från framer-rörelse.

importera {AnimatePresence} från'framer-motion';

Slå nu in Modal-komponenten i AnimatePresence-komponenten och ställ in första prop till falska och läge att vänta".

falsk} läge="vänta">
 {modalOpen && <Modaltext="Detta är en modal animerad med Framer Motion"stängModal={closeModal} />}
</AnimatePresence>

AnimatePresence-komponenten tillåter att utgångsanimationer slutförs innan React avmonterar den från DOM.

Framer Motion kan animera komponenter på scroll med hjälp av medan InView stötta. Öppna ScrollElement.jsx, och importera rörelse verktyg. Förändra div till motion.div med klassen "scroll-element".

 initial={{ opacitet: 0, skala: 0, rotera: 14 }}
 whileInView={{ opacitet: 1, skala: 1, rotera: 0 }}
 transition={{ varaktighet: .8 }}
 viewport={{ en gång: Sann }}
 klassnamn='scroll-element'
>
 Scroll Element
</motion.div>

De utsiktsplats prop pekar på ett objekt som sätter en gång till Sann. Nästa, i App.jsx fil, importera ScrollElement komponent och definiera en variabel scrollElementCount som har ett heltalsvärde.

låta scrollElementCount=14;

I den sista sektion element, skapa en array med en specifik längd definierad av scrollElementCount som mappar över varje element i arrayen och genererar en komponent med en unik nyckel baserat på indexet i.

{[...Array (scrollElementCount)].map((x, jag) =><ScrollElementnyckel={i} />)}

Nu, när du återgår till webbläsaren, bör element animeras när du rullar dem till synen.

Alternativ till Framer Motion

Framer Motion är inte det enda animationsbiblioteket på marknaden. Om du inte gillar sättet Framer Motion gör saker på kan du prova andra bibliotek som Reagera våren.

Du kan också använda CSS-animationer, som alla moderna webbläsare stöder inbyggt, men de involverade teknikerna kan vara svåra att lära sig och ställa in.

Förbättra användarupplevelsen med animationer

Varje användare förväntar sig en mjuk upplevelse när de använder en webbapplikation. En webbplats eller applikation utan animationer känns statisk och svarar inte. Animationer förbättrar användarupplevelsen eftersom du kan använda dem för att kommunicera feedback till användaren när de utför en viss åtgärd.