Aflați cum să adăugați animații simple în aplicația dvs. React cu un efort minim de codare.
Animația este o parte crucială a aproape oricărei aplicații web moderne. Este, de asemenea, una dintre părțile cele mai dificile de făcut corect.
Framer Motion este o bibliotecă creată pentru React, care facilitează animarea componentelor.
Cum funcționează Framer Motion
Framer Motion folosește componenta de mișcare pentru animații. Fiecare element HTML/SVG are o componentă de mișcare echivalentă care are recuzită pentru gesturi și animații. De exemplu, un div HTML obișnuit arată astfel:
<div>div>
În timp ce echivalentul Framer Motion arată astfel:
<mișcare.div>mișcare.div>
Componentele de mișcare susțin an anima prop care declanșează animații atunci când se schimbă valorile. Pentru animații complexe, utilizați utilizați Animați cârlig cu lunetă ref.
Animație în Framer Motion
Înainte de a utiliza Framer Motion în proiectul dvs., trebuie să aveți Runtime Node.js și managerul de pachete Yarn instalat pe computerul dvs. și înțelegeți ce este React și cum să îl utilizați.
Puteți vizualiza și descărca codul sursă al acestui proiect de pe acesta Depozitul GitHub. Folosește fișiere de pornire ramură ca șablon de pornire de urmat împreună cu acest tutorial, sau dosare-finale ramură pentru demo-ul complet. De asemenea, puteți vedea proiectul în acțiune prin aceasta demo live.
Deschideți terminalul și rulați:
git clone [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
fire
fire dev
Când deschizi localhost: 5173 în browser-ul tău, vei vedea asta:
Acum puteți crea prima animație simplă, un buton care crește la trecerea cu mouse-ul și se micșorează când cursorul pleacă.
Deschide src/App.jsx fișier într-un editor de cod. Acest fișier conține o componentă funcțională care returnează un fragment React. Importă Buton componentă, apoi redați-o, trecând în a text recuzită:
Buton animat</h4>
Mutați mouse-ul peste buton pentru a vedea efectul</div>
Apoi, editați Button.jsx fișier și importați fișierul mişcare utilitate din cadru-mișcare:
import { mișcare } din"cadrator-miscare"
Acum, înlocuiți obișnuit buton element cu mișcare.[element] componentă. În acest caz, utilizați miscare.buton componentă.
Apoi adăugați a în timp ce Hover suport de gest și transmiteți un obiect cu valori pe care Framer Motion ar trebui să îl anime atunci când un utilizator trece cu mouse-ul peste buton.
scară: 1.1 }}> {text}
</motion.button>
Butonul se va anima acum când mutați cursorul mouse-ului peste el sau în afara acestuia:
S-ar putea să vă întrebați de ce această demonstrație nu folosește Animații CSS in schimb. Framer Motion are avantaje față de CSS, deoarece se integrează cu starea React și, în general, are ca rezultat un cod mai curat.
Apoi, încercați ceva mai complex: animarea unui modal. În Backdrop.jsx, importați utilitarul de mișcare și creați o componentă funcțională cu onClick și copii recuzită. Întoarcerea a mișcare.div componentă cu clasa „fondul” și onClick ascultător în JSX.
exportMod implicitfuncţiePe fundal() {
întoarcere (<>
</motion.div>
</>)
}
Apoi adăugați trei elemente de recuzită și anume: iniţială, anima, și Ieșire. Aceste elemente de recuzită reprezintă starea originală a componentei, starea în care ar trebui să se anime componenta și, respectiv, starea în care ar trebui să fie componenta după animație.
Adăuga onClick și copii recuzită la mișcare.div și setați durata tranziției la 0,34 secunde:
exportMod implicitfuncţiePe fundal ({onClick, copii}){
întoarcere (<>
onClick={onClick}
className="fondul"
initial={{ opacitate: 0, backdropFilter:„blur (0px)” }}
animat={{ opacitate: 1, backdropFilter:„blur (3,4px)” }}
ieșire={{ opacitate: 0, backdropFilter:„blur (0px)”}}
tranziție={{
durată: 0.34,
}}
>
{copii}
</motion.div>
</>)
}
The Pe fundal componenta este un înveliș pentru Modal componentă. Făcând clic pe fundal, modalul se închide. În Modal.jsx, import mişcare și componenta Fundal. Componenta funcțională implicită acceptă elemente de recuzită: closeModal și text. Creați o variabilă variantă ca obiect.
const variante = {
initial: {
y: "-200%",
opacitate: 1,
},
vizibil: {
y: "50%",
tranziție: {
durată: 0.1,
tip: "arc",
amortizare: 32,
rigiditate: 500
}
},
Ieșire: {
y: "200%",
}
}
Returnează o componentă motion.div înfășurată de o componentă Backdrop cu o reclamă „variante” îndreptată către obiectul variante. Variantele sunt un set de stări de animație predefinite în care s-ar putea afla componenta.
onClick={(e) => e.stopPropagation()}
className="modal"
variante={variante}
initial='iniţială'
anima='vizibil'
ieșire='Ieșire'
>
{text}
</motion.div>
</Backdrop>
Apoi, trebuie să adăugați funcționalitatea pentru a afișa modal atunci când un utilizator face clic pe buton. Deschide App.jsx fișier și importați fișierul useState Reacționează cârligul și Modal componentă.
import { useState } din"reacţiona";
import Modal din„./components/Modal”;
Apoi creați un modalOpen stare cu valoarea implicită setată la fals.
const [modalOpen, setModalOpen] = useState(fals);
Apoi, definiți o funcție closeModal care stabilește modalOpen la fals.
funcţiecloseModal() {
setModalOpen(fals)
}
În partea de sus a fragmentului React, redați condiționat a Modal componenta si trece corespunzator text prop cu prop closeModal.
{modalOpen && <Modaltext=„Acesta este un modal animat cu Framer Motion”}
Apoi, în al doilea secțiune element, redare a buton element cu un handler de evenimente onClick care setează modalOpen la false.
S-ar putea să observați că React demontează componenta Modal din DOM fără o animație de ieșire. Pentru a remedia asta, aveți nevoie de un AnimatePresence componentă. Importați AnimatePresence din cadru-mișcare.
import {AnimatePresence} din„mișcare cadru”;
Acum, împachetați componenta Modal în componenta AnimatePresence și setați iniţială prop la fals și cel modul a astepta".
fals} mod="aștepta">
{modalOpen && <Modaltext=„Acesta este un modal animat cu Framer Motion”closeModal={closeModal} />}
</AnimatePresence> Componenta AnimatePresence permite finalizarea animațiilor de ieșire înainte ca React să o demonteze din DOM.
Framer Motion poate anima componentele de pe defilare folosind whileInView recuzită. Deschide ScrollElement.jsx, și importați mişcare utilitate. Schimbare div la mișcare.div cu clasa „scroll-element”.
initial={{ opacitate: 0, scară: 0, roti: 14 }}
whileInView={{ opacitate: 1, scară: 1, roti: 0 }}
tranziție={{ durată: .8 }}
viewport={{ o singura data: Adevărat }}
className=„element-defilare”
>
Element de defilare
</motion.div>
The fereastra prop indică un obiect care se fixează o singura data la Adevărat. În continuare, în App.jsx fișier, importați ScrollElement componentă și definiți o variabilă scrollElementCount care conține o valoare întreagă.
lăsa scrollElementCount=14;
În final secțiune element, creați o matrice cu o lungime specifică definită de scrollElementCount care mapează peste fiecare element al matricei și generează o componentă cu o cheie unică bazată pe index i.
{[...Matrice (scrollElementCount)].map((x, i) =><ScrollElementcheie={i} />)}
Acum, revenind la browser, elementele ar trebui să se anime atunci când le defilați în vizualizare.
Alternative la Framer Motion
Framer Motion nu este singura bibliotecă de animație de pe piață. Dacă nu vă place modul în care Framer Motion face lucrurile, puteți încerca alte biblioteci precum Reacționează Spring.
De asemenea, puteți utiliza animații CSS, pe care toate browserele moderne le acceptă nativ, dar tehnicile implicate pot fi dificil de învățat și configurat.
Îmbunătățirea experienței utilizatorului cu animații
Fiecare utilizator se așteaptă la o experiență netedă atunci când folosește o aplicație web. Un site web sau o aplicație fără animații se simte static și nu răspunde. Animațiile îmbunătățesc experiența utilizatorului, deoarece le puteți folosi pentru a comunica feedback utilizatorului atunci când efectuează o anumită acțiune.