Kā pievienot animācijas savām React lietotnēm, izmantojot Framer Motion

Animācija ir gandrīz katras mūsdienu tīmekļa lietojumprogrammas būtiska sastāvdaļa. Tā ir arī viena no vissarežģītākajām daļām.

Framer Motion ir React izstrādāta bibliotēka, kas atvieglo komponentu animēšanu.

Kā darbojas Framer Motion

Framer Motion animācijām izmanto kustības komponentu. Katram HTML/SVG elementam ir līdzvērtīgs kustības komponents, kam ir žestu un animāciju rekvizīti. Piemēram, parastais HTML div izskatās šādi:

<div>div>

Kamēr Framer Motion ekvivalents izskatās šādi:

<kustība.div>kustība.div>

Kustības komponenti atbalsta an animēt rekvizīti, kas aktivizē animācijas, kad mainās tās vērtības. Sarežģītām animācijām izmantojiet useAnimate āķis ar tēmētu ref.

Animācija programmā Framer Motion

Pirms Framer Motion izmantošanas projektā jums ir jābūt Node.js izpildlaiks un datorā instalēto dzijas pakotņu pārvaldnieku un saprast, kas ir React un kā to izmantot.

Atveriet savu termināli un palaidiet:

git klons [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
dzija
dzija dev

Kad atverat vietējais saimnieks: 5173 savā pārlūkprogrammā jūs redzēsit šo:

Tagad varat izveidot savu pirmo vienkāršo animāciju — pogu, kas aug, virzot kursoru, un samazinās, kad kursors aiziet.

Atveriet src/App.jsx failu koda redaktorā. Šajā failā ir funkcionāls komponents, kas atgriež React fragmentu. Importēt Poga komponentu, pēc tam renderējiet to, ievadot a tekstu rekvizīts:

Animācijas poga</h4>
Novietojiet peles kursoru virs pogas, lai redzētu efektu</div>
"Liediet mani"/>
</section>

Pēc tam rediģējiet Button.jsx failu un importēt kustība lietderība no framer-motion:

imports {kustība} no"kadra kustība"

Tagad nomainiet parasto pogu elements ar kustība.[element] komponents. Šajā gadījumā izmantojiet kustība.poga komponents.

Pēc tam pievienojiet a kamēr virziet kursoru žests un nodot vērtību objektu, kas Framer Motion jāanimē, kad lietotājs virza kursoru virs pogas.

mērogs: 1.1 }}>
{text}
</motion.button>

Tagad poga tiks animēta, kad pārvietojat peles rādītāju virs tās vai ārā no tās:

Jums varētu rasties jautājums, kāpēc šī demonstrācija netiek izmantota CSS animācijas vietā. Framer Motion ir priekšrocības salīdzinājumā ar CSS, jo tas integrējas ar React stāvokli un parasti nodrošina tīrāku kodu.

Pēc tam izmēģiniet kaut ko sarežģītāku: modāla animāciju. In Backdrop.jsx, importējiet kustības utilītu un izveidojiet funkcionālu komponentu ar onClick un bērniem rekvizīti. Atgriezties a kustība.div komponents ar klasi "fons" un onClick klausītājs JSX.

eksportētnoklusējumafunkcijuFons() {
atgriezties (<>

 </motion.div>
 </>)
}

Pēc tam pievienojiet trīs rekvizītus, proti: sākotnējā, animēt, un Izeja. Šie rekvizīti atspoguļo komponenta sākotnējo stāvokli, stāvokli, kurā komponentam vajadzētu animēt, un stāvokli, kurā komponentam jābūt attiecīgi pēc animācijas.

Pievienot onClick un bērniem rekvizīti uz kustība.div un iestatiet pārejas ilgumu uz 0,34 sekundēm:

eksportētnoklusējumafunkcijuFons ({onClick, bērni}){
atgriezties (<>
 onClick={onClick}
 klasesNosaukums="fons"
 inicials={{ necaurredzamība: 0, fona kolāžas filtrs:"izplūšana (0 pikseļi)" }}
 animēt={{ necaurredzamība: 1, fona kolāžas filtrs:"izplūšana (3,4 pikseļi)" }}
 iziet={{ necaurredzamība: 0, fona kolāžas filtrs:"izplūšana (0 pikseļi)"}}
 pāreja={{
 ilgums: 0.34,
 }}
 >
 {bērni}
 </motion.div>
 </>)
}

The Fons komponents ir iesaiņojums Modāls komponents. Noklikšķinot uz fona kolāžas, modāls tiek noraidīts. In Modal.jsx, imports kustība un fona kolāžas komponents. Noklusējuma funkcionālais komponents pieņem rekvizītus: closeModal un tekstu. Izveidojiet varianta mainīgo kā objektu.

konst varianti = {
 iniciālis: {
 y: "-200%",
 necaurredzamība: 1,
 },
 redzams: {
 y: "50%",
 pāreja: {
 ilgums: 0.1,
 veids: "pavasaris",
 amortizācija: 32,
 stīvums: 500
 }
 },
 Izeja: {
 y: "200%",
 }
 }

Atgriezt motion.div komponentu, kas ir iesaiņots ar fona kolāžas komponentu ar "variantu" rekvizītu, kas norāda uz variantu objektu. Varianti ir iepriekš definētu animācijas stāvokļu kopa, kurā komponents varētu būt.

 onClick={(e) => e.stopPropagation()}
 klasesNosaukums="modāls"
 varianti={variants}
 sākuma ='sākotnējais'
 animēt ='redzams'
 iziet='Izeja'
 >
 {text}
 </motion.div>
</Backdrop>

Pēc tam jums jāpievieno funkcionalitāte, lai parādītu modālu, kad lietotājs noklikšķina uz pogas. Atveriet App.jsx failu un importēt useState Reaģēt āķis un Modāls komponents.

imports { useState } no"reaģēt";
imports Modāls no"./components/Modal";

Pēc tam izveidojiet a modālsAtvērt stāvoklis ar iestatīto noklusējuma vērtību viltus.

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

Pēc tam definējiet funkciju closeModal kas nosaka modālsAtvērt uz nepatiesu.

funkcijucloseModal() {
 setModalOpen(viltus)
}

React fragmenta augšdaļā nosacīti atveidojiet a Modāls komponentu un nodod atbilstošo tekstu prop ar closeModal prop.

{modalOpen && <Modālstekstu="Šī ir modāla animācija ar Framer Motion"}

Tad, otrajā sadaļā elements, renderēt a pogu elements ar onClick notikumu apdarinātāju, kas iestata modalOpen uz false.

 setModalOpen(taisnība)}>Rādīt modālo</button>

Varat pamanīt, ka React atvieno Modal komponentu no DOM bez izejas animācijas. Lai to labotu, jums ir nepieciešams AnimatePresence komponents. Importēt AnimatePresence no framer-motion.

imports {AnimatePresence} no'framer-motion';

Tagad ietiniet Modal komponentu AnimatePresence komponentā un iestatiet sākotnējā prop to viltus un režīmā gaidīt".

viltus} režīms="pagaidi">
 {modalOpen && <Modālstekstu="Šī ir modāla animācija ar Framer Motion"closeModal={closeModal} />}
</AnimatePresence>

AnimatePresence komponents ļauj pabeigt izejas animācijas, pirms React to atvieno no DOM.

Framer Motion var animēt komponentus ritināšanas laikā, izmantojot kamēr skatā prop. Atveriet ScrollElement.jsxun importējiet kustība lietderība. Mainīt div uz kustība.div ar klasi "scroll-element".

 inicials={{ necaurredzamība: 0, mērogs: 0, pagriezt: 14 }}
 whileInView={{ necaurredzamība: 1, mērogs: 1, pagriezt: 0 }}
 pāreja={{ ilgums: .8 }}
 skata vieta={{ vienreiz: taisnība }}
 klasesNosaukums='scroll-element'
>
 Ritināšanas elements
</motion.div>

The skata logs prop norāda uz objektu, kas nosaka vienreiz uz taisnība. Tālāk, sadaļā App.jsx failu, importējiet ScrollElement komponentu un definējiet mainīgo scrollElementCount, kam ir vesela skaitļa vērtība.

ļaut scrollElementCount=14;

Pēdējā sadaļā elementu, izveidojiet masīvu ar noteiktu garumu, ko nosaka ar scrollElementCount kas kartē katru masīva elementu un ģenerē komponentu ar unikālu atslēgu, pamatojoties uz indeksu i.

{[...Masīvs (scrollElementCount)].map((x, i) =><ScrollElementtaustiņu={i} />)}

Tagad, atgriežoties pārlūkprogrammā, elementiem vajadzētu animēties, kad tos ritināt skatā.

Framer Motion alternatīvas

Framer Motion nav vienīgā animācijas bibliotēka tirgū. Ja jums nepatīk, kā Framer Motion dara lietas, varat izmēģināt citas bibliotēkas, piemēram, Reaģējiet uz pavasari.

Varat arī izmantot CSS animācijas, kuras visas mūsdienu pārlūkprogrammas atbalsta sākotnēji, taču izmantotās metodes var būt sarežģītas, lai tās apgūtu un iestatītu.

Lietotāju pieredzes uzlabošana ar animācijām

Katrs lietotājs, izmantojot tīmekļa lietojumprogrammu, sagaida gludu pieredzi. Vietne vai lietojumprogramma bez animācijām šķiet statiska un nereaģē. Animācijas uzlabo lietotāja pieredzi, jo varat tās izmantot, lai sniegtu lietotājam atsauksmes, kad viņš veic noteiktu darbību.