Ismerje meg, hogyan adhat hozzá egyszerű animációkat a React alkalmazáshoz minimális kódolási erőfeszítéssel.
Az animáció szinte minden modern webalkalmazás döntő része. Ez is az egyik legnehezebben megoldható rész.
A Framer Motion a React számára készült könyvtár, amely megkönnyíti az összetevők animálását.
Hogyan működik a Framer Motion
A Framer Motion a mozgáskomponenst használja az animációkhoz. Minden HTML/SVG elemnek van egyenértékű mozgáskomponense, amely rendelkezik a gesztusokhoz és animációkhoz szükséges kellékekkel. Például egy normál HTML div így néz ki:
<div>div>
Míg a Framer Motion megfelelője így néz ki:
<mozgás.div>mozgás.div>
A mozgási komponensek támogatják a élő prop, amely animációkat vált ki, ha értékei megváltoznak. Összetett animációkhoz használja a useAnimate horog távirányítós ref.
Animáció a Framer Motionban
Mielőtt a Framer Motion-t használná a projektben, rendelkeznie kell a Node.js futási idő és a számítógépére telepített Yarn csomagkezelő és megérteni, mi az a React, és hogyan kell használni.
Megtekintheti és letöltheti a projekt forráskódját GitHub Repository. Használja a indító fájlok elágazás kezdősablonként, amelyet ezzel az oktatóanyaggal együtt követhet, vagy a végleges fájlokat ág a teljes demóhoz. Ezen keresztül működés közben is megtekintheti a projektet élő demo.
Nyissa meg a terminált, és futtassa:
git klón [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
fonal
fonal dev
Amikor kinyitod helyi házigazda: 5173 a böngészőben ezt fogod látni:
Most létrehozhatja az első egyszerű animációt, egy gombot, amely lebegve nő, és csökken, amikor a kurzor kilép.
Nyissa meg a src/App.jsx fájlt egy kódszerkesztőben. Ez a fájl egy funkcionális összetevőt tartalmaz, amely egy React töredéket ad vissza. Importálja a Gomb komponenst, majd rendereli azt, átadva a szöveg támaszt:
Animált gomb</h4>
Vigye az egeret a gomb fölé a hatás megtekintéséhez</div>
Ezután szerkessze a Button.jsx fájlt, és importálja a mozgás segédprogramtól framer-motion:
import { mozgás } tól től"framer-motion"
Most cserélje ki a normált gomb elem a mozgás.[elem] összetevő. Ebben az esetben használja a mozgás.gomb összetevő.
Ezután adjunk hozzá a miközben Lebeg gesztus-prop és átad egy értékobjektumot, amelyet a Framer Motionnak animálnia kell, amikor a felhasználó a gomb fölé viszi az egérmutatót.
skála: 1.1 }}> {szöveg}
</motion.button>
A gomb most animálni fog, ha az egérmutatót rá mozgatja, vagy kilép belőle:
Elgondolkodhat azon, hogy ez a demó miért nem használja CSS animációk helyette. A Framer Motion előnyei a CSS-hez képest, mivel integrálódik a React állapotba, és általában tisztább kódot eredményez.
Ezután próbáljon meg valami bonyolultabbat: animáljon egy modált. Ban ben Backdrop.jsx, importálja a motion segédprogramot, és hozzon létre egy funkcionális összetevőt kattintásra és gyermekek kellékek. Visszatérés a mozgás.div komponens osztály "háttér" és kattintásra hallgató a JSX-ben.
exportalapértelmezettfunkcióHáttér() {
Visszatérés (<>
</motion.div>
</>)
}
Ezután adjon hozzá három kelléket, nevezetesen: a kezdeti, élő, és kijárat. Ezek a kellékek az összetevő eredeti állapotát, azt az állapotot képviselik, amelyre az összetevőnek animálnia kell, illetve azt az állapotot, amelyben az összetevőnek az animáció után kell lennie.
Hozzáadás kattintásra és gyermekek kellékek a mozgás.div és állítsa be az átmenet időtartamát 0,34 másodpercre:
exportalapértelmezettfunkcióHáttér ({onClick, gyerekek}){
Visszatérés (<>
onClick={onClick}
osztálynév="háttér"
kezdeti={{ átlátszatlanság: 0, backdropFilter:"elmosás (0px)" }}
anim={{ átlátszatlanság: 1, backdropFilter:"elmosás (3,4 képpont)" }}
exit={{ átlátszatlanság: 0, backdropFilter:"elmosás (0px)"}}
átmenet={{
időtartam: 0.34,
}}
>
{gyermekek}
</motion.div>
</>)
}
A Háttér komponens egy burkolat a Modal összetevő. A háttérre kattintva eltünteti a modált. Ban ben Modal.jsx, import mozgás és a Backdrop komponens. Az alapértelmezett funkcionális komponens a következőket fogadja el: closeModal és szöveg. Hozzon létre egy változatváltozót objektumként.
const változatok = {
a kezdeti: {
y: "-200%",
átlátszatlanság: 1,
},
látható: {
y: "50%",
átmenet: {
időtartam: 0.1,
típus: "tavaszi",
csillapítás: 32,
merevség: 500
}
},
kilépés: {
y: "200%",
}
}
Egy motion.div komponenst ad vissza egy Backdrop komponenssel egy "variants" támasztékkal, amely a variánsok objektumra mutat. A változatok előre meghatározott animációs állapotok halmaza, amelyekben az összetevő lehet.
onClick={(e) => e.stopPropagation()}
osztálynév="modális"
variánsok={változatok}
kezdeti='a kezdeti'
animálni='látható'
kilépés='kijárat'
>
{szöveg}
</motion.div>
</Backdrop>
Ezután hozzá kell adnia a modális megjelenítéséhez szükséges funkciókat, amikor a felhasználó rákattint a gombra. Nyissa meg a App.jsx fájlt, és importálja a useState React horog és a Modal összetevő.
import { useState } tól től"reagál";
import Modal tól től"./components/Modal";
Ezután hozzon létre a modalOpen állapotot az alapértelmezett értékkel hamis.
const [modalOpen, setModalOpen] = useState(hamis);
Ezután határozzon meg egy függvényt closeModal amely beállítja a modalOpen hogy hamis.
funkciócloseModal() {
setModalOpen(hamis)
}
A React töredék tetején feltételesen jelenítse meg a Modal komponenst, és adja át a megfelelőt szöveg prop a closeModal támasztékkal.
{modalOpen && <Modalszöveg="Ez egy modálisanimált Framer Motion"}
Aztán a másodikban szakasz elem, render a gomb elemet egy onClick eseménykezelővel, amely a modalOpen értéket false értékre állítja.
Észreveheti, hogy a React kilépési animáció nélkül leválasztja a Modal összetevőt a DOM-ról. Ennek kijavításához szüksége van egy AnimatePresence összetevő. AnimatePresence importálása innen framer-motion.
import {AnimatePresence} tól től"framer-motion";
Most csomagolja be a Modal komponenst az AnimatePresence komponensbe, és állítsa be a a kezdeti prop to false és a mód várni".
hamis} mód="várjon">
{modalOpen && <Modalszöveg="Ez egy modálisanimált Framer Motion"closeModal={closeModal} />}
</AnimatePresence> Az AnimatePresence összetevő lehetővé teszi a kilépési animációk befejezését, mielőtt a React leválasztja a DOM-ról.
A Framer Motion görgetés közben animálhatja a komponenseket a míg InView támaszt. Nyissa meg a ScrollElement.jsx, és importálja a mozgás hasznosság. változás div nak nek mozgás.div "scroll-elem" osztállyal.
kezdeti={{ átlátszatlanság: 0, skála: 0, forog: 14 }}
whileInView={{ átlátszatlanság: 1, skála: 1, forog: 0 }}
átmenet={{ időtartama: .8 }}
viewport={{ egyszer: igaz }}
osztálynév='scroll-element'
>
Görgetés elem
</motion.div>
A nézetablak prop egy objektumra mutat, amely beállít egyszer nak nek igaz. Következő, a App.jsx fájlt, importálja a ScrollElement komponenst, és definiáljon egy scrollElementCount változót, amely egész számot tartalmaz.
hagyja scrollElementCount=14;
Az utolsóban szakasz elemet, hozzon létre egy adott hosszúságú tömböt, amelyet a scrollElementCount amely leképezi a tömb minden elemét, és az index alapján egyedi kulccsal rendelkező komponenst generál én.
{[...Tömb (scrollElementCount)].map((x, i) =><ScrollElementkulcs={én} />)}
Most, visszatérve a böngészőhöz, az elemeknek animálniuk kell, amikor görgeti őket a nézetbe.
A Framer Motion alternatívái
A Framer Motion nem az egyetlen animációs könyvtár a piacon. Ha nem tetszik, ahogy a Framer Motion csinálja a dolgokat, kipróbálhat más könyvtárakat, például React Spring.
Használhat CSS-animációkat is, amelyeket minden modern böngésző natívan támogat, de a technikák megtanulása és beállítása bonyolult lehet.
A felhasználói élmény javítása animációkkal
Minden felhasználó sima élményt vár el webalkalmazások használatakor. Az animációk nélküli webhely vagy alkalmazás statikusnak és nem reagálónak tűnik. Az animációk javítják a felhasználói élményt, mert segítségével visszajelzést küldhet a felhasználónak, amikor egy bizonyos műveletet végrehajt.