Siit saate teada, kuidas lisada oma Reacti rakendusele lihtsaid animatsioone minimaalse kodeerimisega.
Animatsioon on peaaegu iga kaasaegse veebirakenduse oluline osa. See on ka üks kõige raskemini saavutatavaid osi.
Framer Motion on Reacti jaoks loodud teek, mis muudab komponentide animeerimise lihtsaks.
Kuidas Framer Motion töötab
Framer Motion kasutab animatsioonide jaoks liikumiskomponenti. Igal HTML/SVG-elemendil on samaväärne liikumiskomponent, millel on žestide ja animatsioonide rekvisiidid. Näiteks tavaline HTML-div näeb välja selline:
<div>div>
Kuigi Framer Motioni ekvivalent näeb välja selline:
<liikumine.div>liikumine.div>
Liikumiskomponendid toetavad an animeerima rekvisiit, mis käivitab animatsioonid, kui selle väärtused muutuvad. Keeruliste animatsioonide jaoks kasutage useAnimate konks skoobiga ref.
Animatsioon Framer Motionis
Enne Framer Motioni kasutamist oma projektis peab teil olema Node.js käitusaeg ja teie arvutisse installitud lõngapaketihaldur ja mõista, mis on React ja kuidas seda kasutada.
Selle projekti lähtekoodi saate vaadata ja alla laadida GitHubi hoidla. Kasuta stardifailid haru alustamismallina, mida koos selle õpetusega järgida, või lõplikud failid haru täieliku demo jaoks. Selle kaudu näete ka projekti töös live demo.
Avage terminal ja käivitage:
git kloon [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
lõng
lõng dev
Kui avate kohalik majutaja: 5173 brauseris näete järgmist:
Nüüd saate luua oma esimese lihtsa animatsiooni – nupu, mis kasvab kursoril ja väheneb kursori lahkumisel.
Ava src/App.jsx faili koodiredaktoris. See fail sisaldab funktsionaalset komponenti, mis tagastab Reacti fragmendi. Importige Nupp komponendi, seejärel renderdage see, edastades a tekst prop:
Animeeritud nupp</h4>
Efekti nägemiseks liigutage kursorit nupule</div>
Järgmisena redigeerige Button.jsx faili ja importige liikumine utiliit alates framer-motion:
importida { liikumine } alates"raami liikumine"
Nüüd asenda tavaline nuppu element koos liikumine.[element] komponent. Sel juhul kasutage motion.nupp komponent.
Seejärel lisage a Hõljutades liigutustega tugi ja edastab väärtusobjekti, mida Framer Motion peaks animeerima, kui kasutaja hõljutab kursorit nupu kohal.
kaal: 1.1 }}> {text}
</motion.button>
Nupp animeerub nüüd, kui liigutate hiirekursori selle kohal või sellest välja:
Võite küsida, miks see demo ei kasuta CSS-animatsioonid selle asemel. Framer Motionil on CSS-i ees eelised, kuna see integreerub React-olekuga ja annab üldiselt puhtama koodi.
Järgmiseks proovige midagi keerukamat: modaali animeerimist. sisse Backdrop.jsx, importige liikumisutiliit ja looge sellega funktsionaalne komponent onClick ja lapsed rekvisiidid. Tagasi a liikumine.div komponent klassiga "taust" ja onClick kuulaja JSX-is.
eksportidavaikimisifunktsiooniTaustaks() {
tagasi (<>
</motion.div>
</>)
}
Seejärel lisage kolm rekvisiiti, nimelt: esialgne, animeerima, ja väljuda. Need rekvisiidid tähistavad vastavalt komponendi algset olekut, olekut, millesse komponent peaks animeerima, ja olekut, milles komponent peaks olema pärast animatsiooni.
Lisama onClick ja lapsed rekvisiidid liikumine.div ja määrake ülemineku kestuseks 0,34 sekundit:
eksportidavaikimisifunktsiooniTaustaks ({onClick, lapsed}){
tagasi (<>
onClick={onClick}
klassinimi="taust"
esialgne={{ läbipaistmatus: 0, taustafilter:"hägu (0px)" }}
animeerima={{ läbipaistmatus: 1, taustafilter:"hägu (3,4 pikslit)" }}
exit={{ läbipaistmatus: 0, taustafilter:"hägu (0px)"}}
üleminek={{
kestus: 0.34,
}}
>
{lapsed}
</motion.div>
</>)
}
The Taustaks komponent on ümbris Modaalne komponent. Taustadekoratsioonil klõpsamine lülitab modaali välja. sisse Modal.jsx, importida liikumine ja taustadekoratsiooni komponent. Vaikimisi funktsionaalne komponent aktsepteerib järgmisi rekvisiite: closeModal ja tekst. Loo objektina variantmuutuja.
konst variandid = {
esialgne: {
y: "-200%",
läbipaistmatus: 1,
},
nähtav: {
y: "50%",
üleminek: {
kestus: 0.1,
tüüp: "kevad",
summutus: 32,
jäikus: 500
}
},
välju: {
y: "200%",
}
}
Tagastab komponendi motion.div, mis on ümbritsetud taustadekoratsiooni komponendiga ja mille rekvisiit viitab objektile variandid. Variandid on eelmääratletud animatsiooniolekute komplekt, milles komponent võib olla.
onClick={(e) => e.stopPropagation()}
klassinimi="modaalne"
variandid={variants}
esialgne='esialgne'
animeerima ='nähtav'
exit='välju'
>
{text}
</motion.div>
</Backdrop>
Järgmiseks peate lisama funktsiooni modaali kuvamiseks, kui kasutaja nuppu klõpsab. Ava App.jsx faili ja importige useState Reageeri konks ja Modaalne komponent.
importida { useState } alates"reageerida";
importida Modaalne alates"./components/Modal";
Seejärel looge a modaalOpen olek, mille vaikeväärtus on seatud vale.
konst [modalOpen, setModalOpen] = useState(vale);
Järgmisena määrake funktsioon closeModal mis määrab modaalOpen valeks.
funktsioonicloseModal() {
setModalOpen(vale)
}
Reacti fragmendi ülaosas renderdage tingimuslikult a Modaalne komponenti ja läbima vastavad tekst prop koos closeModal prop.
{modalOpen && <Modaalnetekst="See on Framer Motioniga animeeritud modaal"}
Siis, teises osa element, renderda a nuppu element onClicki sündmuste käitlejaga, mis määrab modalOpeni väärtuseks false.
Võite märgata, et React eemaldab komponendi Modal DOM-ist ilma väljumisanimatsioonita. Selle parandamiseks vajate AnimatePresence komponent. Importige rakendusest AnimatePresence framer-motion.
importida {AnimatePresence} alates'framer-motion';
Nüüd mähkige komponent Modal komponendi AnimatePresence sisse ja määrake esialgne prop to vale ja režiimis ootama".
vale} mode="oota">
{modalOpen && <Modaalnetekst="See on Framer Motioniga animeeritud modaal"closeModal={closeModal} />}
</AnimatePresence> AnimatePresence'i komponent võimaldab väljumisanimatsioonid lõpule viia enne, kui React selle DOM-ist lahti ühendab.
Framer Motion saab komponente kerimisel animeerida, kasutades nuppu vaatamise ajal prop. Ava ScrollElement.jsxja importige liikumine kasulikkust. Muuda div juurde liikumine.div klassiga "kerimiselement".
esialgne={{ läbipaistmatus: 0, kaal: 0, pöörata: 14 }}
whileInView={{ läbipaistmatus: 1, kaal: 1, pöörata: 0 }}
üleminek={{ kestus: .8 }}
vaateava={{ üks kord: tõsi }}
klassinimi='kerimiselement'
>
Kerige element
</motion.div>
The vaateava prop osutab objektile, mis seab üks kord juurde tõsi. Järgmisena App.jsx fail, importige ScrollElement komponenti ja määratleda muutuja scrollElementCount, mis sisaldab täisarvu.
lase scrollElementCount=14;
Viimases osa element, looge massiiv, mille pikkus on määratletud scrollElementCount mis kaardistab iga massiivi elemendi ja genereerib indeksi põhjal unikaalse võtmega komponendi i.
{[...Massiiv (scrollElementCount)].map((x, i) =><ScrollElementvõti={i} />)}
Nüüd, naastes brauserisse, peaksid elemendid kuvale kerides animeerima.
Framer Motioni alternatiivid
Framer Motion ei ole ainus animatsiooniteek turul. Kui teile ei meeldi, kuidas Framer Motion asju teeb, võite proovida teisi teeke nagu Reageeri kevad.
Võite kasutada ka CSS-animatsioone, mida kõik kaasaegsed brauserid algselt toetavad, kuid nendega seotud tehnikaid võib olla keeruline õppida ja seadistada.
Animatsioonide kasutajakogemuse parandamine
Iga kasutaja ootab veebirakenduse kasutamisel sujuvat kogemust. Animatsioonideta veebisait või rakendus tundub staatiline ja ei reageeri. Animatsioonid parandavad kasutajakogemust, kuna saate neid kasutada kasutajale tagasiside edastamiseks, kui ta teatud toimingut sooritab.