Ako pridať animácie do svojich aplikácií React pomocou aplikácie Framer Motion

Animácia je kľúčovou súčasťou takmer každej modernej webovej aplikácie. Je to tiež jedna z najťažších častí správneho postupu.

Framer Motion je knižnica vytvorená pre React, ktorá uľahčuje animáciu komponentov.

Ako funguje Framer Motion

Framer Motion používa komponent pohybu pre animácie. Každý prvok HTML/SVG má ekvivalentný pohybový komponent, ktorý má rekvizity pre gestá a animácie. Napríklad bežný HTML div vyzerá takto:

<div>div>

Zatiaľ čo ekvivalent filmu Framer Motion vyzerá takto:

<pohyb.div>pohyb.div>

Pohybové komponenty podporujú an animovať rekvizita, ktorá spúšťa animácie pri zmene hodnôt. Pre zložité animácie použite použite Animovať hák s rozsahom ref.

Animácia vo Framer Motion

Pred použitím aplikácie Framer Motion vo svojom projekte musíte mať Runtime Node.js a správcu balíkov Yarn nainštalovaný na vašom počítači a pochopiť, čo je React a ako ho používať.

Otvorte terminál a spustite:

git clone [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
priadza
priadza výv

Keď otvoríte localhost: 5173 vo vašom prehliadači uvidíte toto:

Teraz môžete vytvoriť svoju prvú jednoduchú animáciu, tlačidlo, ktoré rastie pri umiestnení kurzora myši a zmenšuje sa, keď kurzor opustí.

Otvor src/App.jsx súbor v editore kódu. Tento súbor obsahuje funkčný komponent, ktorý vracia fragment React. Importovať Tlačidlo komponent, potom ho vykreslite a odovzdajte a text podpera:

Animované tlačidlo</h4>
Presuňte kurzor myši na tlačidlo, aby ste videli efekt</div>
"Podržte ma"/>
</section>

Ďalej upravte Button.jsx súbor a importujte súbor pohybu užitočnosť od framer-motion:

importovať { pohyb } od"framer-motion"

Teraz vymeňte bežné tlačidlo prvok s pohyb.[prvok] komponent. V tomto prípade použite pohyb.tlačidlo komponent.

Potom pridajte a zatiaľ čo Vznášaj sa podoprieť gesto a odovzdať objekt s hodnotami, ktoré by mal Framer Motion animovať, keď používateľ umiestni kurzor myši na tlačidlo.

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

Tlačidlo sa teraz animuje, keď naň prejdete kurzorom myši alebo mimo neho:

Možno sa čudujete, prečo sa toto demo nepoužíva CSS animácie namiesto toho. Framer Motion má oproti CSS výhody, pretože sa integruje so stavom React a vo všeobecnosti vedie k čistejšiemu kódu.

Ďalej skúste niečo zložitejšie: animáciu modálu. In Backdrop.jsx, importujte pomôcku pohybu a vytvorte funkčný komponent pomocou po kliknutí a deti rekvizity. Návrat a pohyb.div komponent s triedou "pozadie" a po kliknutí poslucháča v JSX.

exportpredvolenáfunkciuPozadie() {
vrátiť (<>

 </motion.div>
 </>)
}

Potom pridajte tri rekvizity, a to: počiatočné, animovať, a VÝCHOD. Tieto rekvizity predstavujú pôvodný stav komponentu, stav, do ktorého by sa mal komponent animovať, a stav, v ktorom by sa mal komponent nachádzať po animácii, resp.

Pridať po kliknutí a deti rekvizity k pohyb.div a nastavte trvanie prechodu na 0,34 sekundy:

exportpredvolenáfunkciuPozadie ({onClick, deti}){
vrátiť (<>
 onClick={onClick}
 className="pozadie"
 počiatočné={{ nepriehľadnosť: 0, backdropFilter:"rozmazanie (0px)" }}
 animovať={{ nepriehľadnosť: 1, backdropFilter:"blur (3,4px)" }}
 exit={{ nepriehľadnosť: 0, backdropFilter:"rozmazanie (0px)"}}
 prechod={{
 trvanie: 0.34,
 }}
 >
 {children}
 </motion.div>
 </>)
}

The Pozadie komponent je obal pre Modálny komponent. Kliknutím na pozadie sa modal zatvorí. In Modal.jsx, dovoz pohybu a komponent Kulisa. Predvolený funkčný komponent akceptuje rekvizity: closeModal a text. Vytvorte variantnú premennú ako objekt.

konšt varianty = {
 iniciála: {
 y: "-200%",
 nepriehľadnosť: 1,
 },
 viditeľné: {
 y: "50%",
 prechod: {
 trvanie: 0.1,
 typ: "jar",
 tlmenie: 32,
 tuhosť: 500
 }
 },
 VÝCHOD: {
 y: "200%",
 }
 }

Vráti komponent motion.div zabalený komponentom Backdrop s podperou "varianty" smerujúcou na objekt variantov. Varianty sú množinou preddefinovaných stavov animácie, v ktorých sa komponent môže nachádzať.

 onClick={(e) => e.stopPropagation()}
 className="modálny"
 varianty={varianty}
 počiatočné ='počiatočné'
 animovať ='viditeľný'
 výstup ='VÝCHOD'
 >
 {text}
 </motion.div>
</Backdrop>

Ďalej musíte pridať funkciu na zobrazenie modálu, keď používateľ klikne na tlačidlo. Otvor App.jsx súbor a importujte súbor useState Reagovať hák a Modálny komponent.

importovať { useState } od"reagovať";
importovať Modálny od"./components/Modal";

Potom vytvorte a modalOpen stav s predvolenou hodnotou nastavenou na falošný.

konšt [modalOpen, setModalOpen] = useState(falošný);

Ďalej definujte funkciu closeModal ktorý nastavuje modalOpen na falošné.

funkciucloseModal() {
 setModalOpen(falošný)
}

V hornej časti fragmentu React podmienečne vykreslite a Modálny komponent a odovzdať príslušné text prop s closeModal prop.

{modalOpen && <Modálnytext="Toto je modálny animovaný s Framer Motion"}

Potom, v druhom oddiele prvok, render a tlačidlo prvok s obslužným programom udalosti onClick, ktorý nastavuje modalOpen na hodnotu false.

 setModalOpen(pravda)}>Zobraziť modal</button>

Môžete si všimnúť, že React odpojí komponent Modal z DOM bez animácie ukončenia. Ak to chcete opraviť, potrebujete AnimatePresence komponent. Importovať AnimatePresence z framer-motion.

importovať {AnimatePresence} od„framer-motion“;

Teraz zabaľte komponent Modal do komponentu AnimatePresence a nastavte počiatočné prop to false a režim čakať".

falošný} režim="počkaj">
 {modalOpen && <Modálnytext="Toto je modálny animovaný s Framer Motion"closeModal={closeModal} />}
</AnimatePresence>

Komponent AnimatePresence umožňuje dokončiť animácie ukončenia predtým, ako ho React odpojí z DOM.

Framer Motion môže animovať komponenty pri posúvaní pomocou whileInView rekvizita. Otvor ScrollElement.jsxa importovať pohybu užitočnosť. Zmeniť div do pohyb.div s triedou "scroll-element".

 počiatočné={{ nepriehľadnosť: 0, stupnica: 0, točiť sa: 14 }}
 whileInView={{ nepriehľadnosť: 1, stupnica: 1, točiť sa: 0 }}
 prechod={{ trvanie: .8 }}
 zobrazovaná oblasť={{ raz: pravda }}
 className='scroll-element'
>
 Posunúť prvok
</motion.div>

The výrez prop ukazuje na objekt, ktorý zapadá raz do pravda. Ďalej v App.jsx súbor, importujte súbor ScrollElement komponent a definujte premennú scrollElementCount, ktorá obsahuje celočíselné hodnoty.

nech scrollElementCount=14;

V poslednom oddiele vytvorte pole so špecifickou dĺžkou definovanou pomocou scrollElementCount ktorý mapuje každý prvok poľa a generuje komponent s jedinečným kľúčom na základe indexu i.

{[...Array (scrollElementCount)].map((x, i) =><ScrollElementkľúč={i} />)}

Teraz, keď sa vrátite do prehliadača, prvky by sa mali animovať, keď ich posuniete do zobrazenia.

Alternatívy k Framer Motion

Framer Motion nie je jedinou knižnicou animácií na trhu. Ak sa vám nepáči spôsob, akým Framer Motion robí veci, môžete vyskúšať iné knižnice, napr Reagovať Spring.

Môžete tiež použiť animácie CSS, ktoré natívne podporujú všetky moderné prehliadače, ale súvisiace techniky môže byť zložité naučiť sa a nastaviť.

Zlepšenie používateľského zážitku s animáciami

Každý používateľ očakáva pri používaní webovej aplikácie plynulý zážitok. Webová stránka alebo aplikácia bez animácií pôsobí staticky a nereaguje. Animácie zlepšujú používateľskú skúsenosť, pretože ich môžete použiť na sprostredkovanie spätnej väzby používateľovi, keď vykoná určitú akciu.