Kako dodati animacije svojim React aplikacijama pomoću Framer Motiona

Animacija je ključni dio gotovo svake moderne web aplikacije. To je također jedan od dijelova koje je najteže ispraviti.

Framer Motion je biblioteka izgrađena za React koja olakšava animiranje komponenti.

Kako funkcionira Framer Motion

Framer Motion koristi komponentu pokreta za animacije. Svaki HTML/SVG element ima ekvivalentnu komponentu kretanja koja ima elemente za geste i animacije. Na primjer, uobičajeni HTML div izgleda ovako:

<div>div>

Dok ekvivalent Framer Motion izgleda ovako:

<kretanje.div>kretanje.div>

Komponente pokreta podržavaju an animirati prop koji pokreće animacije kada se njegove vrijednosti promijene. Za složene animacije koristite koristiti Animate udica s ref.

Animacija u Framer Motionu

Prije korištenja Framer Motiona u svom projektu, morate imati Node.js vrijeme izvođenja i upravitelj paketa Yarn instaliran na vašem računalu i razumjeti što je React i kako ga koristiti.

Otvorite svoj terminal i pokrenite:

git klon [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
pređa
pređa dev

Kad otvorite lokalni domaćin: 5173 u svom pregledniku vidjet ćete ovo:

Sada možete izraditi svoju prvu jednostavnu animaciju, gumb koji raste kada lebdite i smanjuje se kada kursor ode.

Otvori src/App.jsx datoteku u uređivaču koda. Ova datoteka sadrži funkcionalnu komponentu koja vraća React fragment. Uvezi Dugme komponentu, zatim je renderirajte, prolazeći u a tekst oslonac:

Animirani gumb</h4>
Pomaknite miš preko gumba da vidite učinak</div>
"Hover Me"/>
</section>

Zatim uredite Button.jsx datoteku i uvoz pokret korisnost od framer-motion:

uvoz { pokret } iz"framer-motion"

Sada zamijenite uobičajeni dugme element s kretanje.[element] komponenta. U ovom slučaju koristite kretanje.gumb komponenta.

Zatim dodajte a dok lebdite geste prop i proslijedite objekt vrijednosti na koje bi Framer Motion trebao animirati kada korisnik prijeđe pokazivačem iznad gumba.

mjerilo: 1.1 }}>
{tekst}
</motion.button>

Gumb će sada animirati kada pomaknete pokazivač miša preko njega ili izvan njega:

Možda se pitate zašto se ovaj demo ne koristi CSS animacije umjesto toga. Framer Motion ima prednosti u odnosu na CSS jer se integrira s React stanjem i općenito rezultira čišćim kodom.

Zatim pokušajte nešto složenije: animirajte modal. U Backdrop.jsx, uvezite uslužni program za kretanje i izradite funkcionalnu komponentu s njim na klik i djece rekviziti. Povratak a kretanje.div komponenta s klasom "pozadina" i na klik slušatelj u JSX-u.

izvozzadanofunkcijaPozadina() {
povratak (<>

 </motion.div>
 </>)
}

Zatim dodajte tri rekvizita, naime: početni, animirati, i Izlaz. Ovi rekviziti predstavljaju izvorno stanje komponente, stanje u koje bi komponenta trebala animirati i stanje u kojem bi komponenta trebala biti nakon animacije.

Dodati na klik i djece rekviziti za kretanje.div i postavite trajanje prijelaza na 0,34 sekunde:

izvozzadanofunkcijaPozadina ({onClick, djeco}){
povratak (<>
 onClick={onClick}
 ime klase="pozadina"
 početni={{ neprozirnost: 0, BackdropFilter:"zamućenje (0px)" }}
 animirati={{ neprozirnost: 1, BackdropFilter:"zamućenje (3,4 px)" }}
 izlaz={{ neprozirnost: 0, BackdropFilter:"zamućenje (0px)"}}
 prijelaz={{
 trajanje: 0.34,
 }}
 >
 {djeca}
 </motion.div>
 </>)
}

The Pozadina komponenta je omotač za Modalni komponenta. Klikom na pozadinu odbacuje se modal. U Modalni.jsx, uvoz pokret i komponentu Backdrop. Zadana funkcionalna komponenta prihvaća rekvizite: closeModal i tekst. Stvorite varijablu varijable kao objekt.

konst varijante = {
 početni: {
 y: "-200%",
 neprozirnost: 1,
 },
 vidljivo: {
 y: "50%",
 tranzicija: {
 trajanje: 0.1,
 tip: "Proljeće",
 prigušenje: 32,
 krutost: 500
 }
 },
 Izlaz: {
 y: "200%",
 }
 }

Vrati komponentu motion.div omotanu komponentom pozadine s propisom "variants" koji pokazuje na objekt varijanti. Varijante su skup unaprijed definiranih stanja animacije u kojima se komponenta može nalaziti.

 onClick={(e) => e.stopPropagation()}
 ime klase="modalni"
 varijante={varijante}
 početni='početno'
 animirati='vidljiv'
 izlaz='Izlaz'
 >
 {tekst}
 </motion.div>
</Backdrop>

Zatim trebate dodati funkciju za prikaz modala kada korisnik klikne gumb. Otvori App.jsx datoteku i uvoz useState React hook and the Modalni komponenta.

uvoz {useState} iz"reagirati";
uvoz Modalni iz"./components/Modal";

Zatim stvorite a modalOpen stanje sa zadanom vrijednošću postavljenom na lažno.

konst [modalOpen, setModalOpen] = useState(lažno);

Zatim definirajte funkciju closeModal koji postavlja modalOpen na lažno.

funkcijacloseModal() {
 setModalOpen(lažno)
}

Na vrhu React fragmenta, uvjetno renderirajte a Modalni komponentu i proći odgovarajuću tekst prop s closeModal prop.

{modalOpen && <Modalnitekst="Ovo je modalno animirano s Framer Motionom"}

Zatim, u drugom odjeljak element, prikazati a dugme element s rukovateljem događaja onClick koji modalOpen postavlja na false.

 setModalOpen(pravi)}>Prikaži Modal</button>

Možda ćete primijetiti da React demontira Modal komponentu iz DOM-a bez izlazne animacije. Da biste to popravili, potreban vam je AnimatePresence komponenta. Uvezi AnimatePresence iz framer-motion.

uvoz {AnimatePresence} iz'framer-motion';

Sada zamotajte komponentu Modal u komponentu AnimatePresence i postavite početni prop to false and the način rada čekati".

lažno} način rada="čekati">
 {modalOpen && <Modalnitekst="Ovo je modalno animirano s Framer Motionom"closeModal={closeModal} />}
</AnimatePresence>

Komponenta AnimatePresence omogućuje završetak izlaznih animacija prije nego što je React demontira iz DOM-a.

Framer Motion može animirati komponente na pomicanju pomoću whileInView oslonac Otvori ScrollElement.jsx, i uvezite pokret korisnost. Promijeniti div do kretanje.div s klasom "scroll-element".

 početni={{ neprozirnost: 0, mjerilo: 0, rotirati: 14 }}
 whileInView={{ neprozirnost: 1, mjerilo: 1, rotirati: 0 }}
 prijelaz={{ trajanje: .8 }}
 okvir za prikaz={{ jednom: pravi }}
 ime klase='scroll-element'
>
 Element pomicanja
</motion.div>

The prozor za prikaz prop ukazuje na objekt koji postavlja jednom do pravi. Dalje, u App.jsx datoteku, uvezite ScrollElement komponentu i definirajte varijablu scrollElementCount koja sadrži cjelobrojnu vrijednost.

neka scrollElementCount=14;

U posljednjih odjeljak element, stvorite niz određene duljine definirane pomoću scrollElementCount koji preslikava svaki element niza i generira komponentu s jedinstvenim ključem na temelju indeksa ja.

{[...Niz (scrollElementCount)].map((x, i) =><ScrollElementključ={i} />)}

Sada, vraćajući se u preglednik, elementi bi trebali animirati kada ih pomaknete u prikaz.

Alternative za Framer Motion

Framer Motion nije jedina biblioteka animacija na tržištu. Ako vam se ne sviđa način na koji Framer Motion radi, možete isprobati druge biblioteke poput Reagirajte proljeće.

Također možete koristiti CSS animacije, koje svi moderni preglednici izvorno podržavaju, ali uključene tehnike mogu biti teške za naučiti i postaviti.

Poboljšanje korisničkog iskustva s animacijama

Svaki korisnik očekuje glatko iskustvo pri korištenju web aplikacije. Web stranica ili aplikacija bez animacija djeluje statično i ne reagira. Animacije poboljšavaju korisničko iskustvo jer ih možete koristiti za prenošenje povratnih informacija korisniku kada izvrši određenu radnju.