Kuidas luua Framer Motioni abil reageerimiskomponendi jaoks sisse- ja väljapääsuanimatsioone

Reacti komponendi animeerimine ekraanile sisenemisel või sealt lahkumisel võib olla väljakutse. Selle põhjuseks on asjaolu, et komponendi peitmisel eemaldab React selle DOM-ist, mis muudab selle animatsiooni jaoks kättesaamatuks. Kui näitate komponenti uuesti, lisab React selle uuesti DOM-i, mis võib põhjustada järsu ilmumise ilma animatsioonita.

Saate selle probleemi lahendada animatsiooniteegi (nt Framer Motion) abil.

Mis on Framer Motion?

Framer Motion on Reacti tootmisvalmis animatsiooniteek. See pakub animatsioonide loomiseks ja juhtimiseks mitmesuguseid komponente, konkse, võtmekaadreid ja kohandatud kergendusfunktsioone.

Üks Framer Motioni eelis on see, et selle abil on lihtne luua sujuvaid ja sujuvaid animatsioone, ilma et oleks vaja kirjutada palju JavaScripti koodi või arvutada iga ülemineku jaoks arvutusi.

Sellel on ka sündmuste süsteem, mida saate kasutada animatsioonide käivitamiseks, mis põhinevad kasutaja sisendil (nt nupuklõpsud ja žestid), luues interaktiivseid ja dünaamilisi liideseid, mis tunduvad reageerivad.

Framer Motioni kasutamise demonstreerimiseks Reactis animeerite komponendi, mis siseneb ekraanile ja sealt lahkub, kui klõpsate nupul.

Reageerimisprojekti loomine

Reacti projekti loomiseks peate seda tegema installige oma arvutisse Node.js ja npm (Node Package Manager). kui sa seda pole teinud.

Kui olete need sõltuvused installinud, saate seda teha luua Vite abil uus Reacti projekt käivitades terminalis käsu yarn vite.

lõnga vite

See käsk loob uue kausta, kuhu on eelinstallitud kõik vajalikud failid ja sõltuvused. Liikuge kausta ja käivitage arendusserver käsuga yarn start.

lõnga algus

Framer Motioni installimine programmi React

Installige Framer Motion, käivitades selle käsu:

npm install framer-motion

See käsk lisab Framer Motioni teie projekti sõltuvusse.

Komponendi animeerimine

Komponenti animeerimiseks ekraanile sisenemisel ja ekraanilt lahkumisel React kasutades Framer Motion, peate selle liikumiskomponenti mähkima.

Liikumiskomponent pakub atribuutide komplekti komponendi sisenemise ja väljumise animeerimiseks. Selle nähtavuse ja asukoha juhtimiseks saate kasutada alg-, animeerimis- ja väljumisrekvisiite.

Selle töös nägemiseks lisage faili App.jsx ülaossa järgmine kood, et importida liikumiskomponent kaadri-motionist.

importida { liikumine } alates"framer-motion";

Järgmisena looge komponent, mida soovite animeerida, mähkides selle liikumiskomponendiga. See näide kasutab elementi div, kuid võite kasutada ka muid soovitud elemente, näiteks nuppu, li ja p.

importida { motion, AnimatePresence } alates"framer-motion"
funktsiooniRakendus() {
tagasi (
 <>

 esialgne={{ x: -100, läbipaistmatus: 0 }}
 anim={{ x: 0, läbipaistmatus: 1 }}
 exit={{ x: -100, läbipaistmatus: 0 }}
 >
Saadetud!</p>
 </motion.div>

 </>
 )
}

Liikumiskomponent võimaldab animeerida div elementi, mis sisaldab teksti "Saadetud!".

The esialgne, animeerimaja väljuda liikumiskomponendi omadused määravad komponendi sisenemise ja väljumise animatsioonid. Kui komponent on algselt renderdatud, algab see x-asendiga -100 (väljaspool ekraani vasakul) ja läbipaistmatusega 0 ning muutub nähtamatuks.

Animate atribuut määrab, kuidas komponent ekraanile sisenedes animeerima peaks, antud juhul liikudes x-lt positsioonist -100 kuni x positsioonini 0 (libiseb vasakult sisse) ja muutub järk-järgult läbipaistmatuseks 1 ja muutub täielikult nähtav.

Lõpuks määratleb väljumisomadus, kuidas komponent peaks selle ekraanilt eemaldamisel animeerima. Sel juhul libiseb komponent ekraanilt vasakule x-asendiga -100 ja tuhmub järk-järgult läbipaistmatuseni 0.

Kui eemaldate need React DOM-i puust, peate komponentide animeerimiseks kaadriliikumise komponendiga AnimatePresence'i mähkima.

Nüüd, kui olete sisse- ja väljapääsu animatsioonid määratlenud, saate animatsiooni käivitamiseks lisada nupu. Siin on nupuga muudetud komponent:

importida { AnimatePresence, motion } alates"framer-motion";
importida { useState } alates"reageerida";
funktsiooniRakendus() {
konst [isVisible, setIsVisible] = useState(tõsi);
konst toggleVisibility = () => {
 setIsVisible(!isVisible);
 };
tagasi (
 <>

 {on Nähtav && ( <liikumine.div
 esialgne={{ x: -100, läbipaistmatus: 0 }}
 anim={{ x: 0, läbipaistmatus: 1 }}
 exit={{ x: -100, läbipaistmatus: 0 }}
 >
Saadetud!</p>
 </motion.div>)}
 </AnimatePresence>

 Teavita
 </button>
 </>
 )
}

See värskendatud kood lisab konksu useState abil olekumuutuja nimega isVisible. See muutuja jälgib, kas komponent peaks olema nähtav. Funktsioon toggleVisibility lülitab nupu klõpsamisel isVisible väärtuse tõese ja vale vahel.

Sa oled praegu komponendi tinglikult renderdamine olenevalt isVisible väärtusest. Kui isVisible on tõene, renderdatakse liikumiskomponent koos sissepääsuanimatsiooniga.

Lõpuks lisage nupule onClicki sündmuste töötleja, mis kutsub esile funktsiooni toggleVisibility, värskendab isVisible olekut ja käivitab liikumiskomponendi sisse- või väljumisanimatsiooni.

Kergendusfunktsiooni lisamine

Kergendusfunktsioon juhib animatsiooni muutumise kiirust aja jooksul. See määrab animatsiooni ajastuse, määrates, kuidas animatsioon peaks edenedes kiirendama või aeglustuma. Ilma kergendamisfunktsioonita võib animatsioon renderdada liiga kiiresti.

Framer Motion pakub mitmeid kergendusfunktsioone, sealhulgas easeInOut. Selle kasutamiseks importige see faili App.jsx ülaosas framer-motionist.

importida { motion, easeInOut } alates"framer-motion";

Seejärel lisage see liikumiskomponendi üleminekuobjektile:

 esialgne={{ x: -100, läbipaistmatus: 0 }}
 anim={{ x: 0, läbipaistmatus: 1, üleminek: { kestus: 0.5, kergus: easyInOut } }}
 exit={{ x: -100, läbipaistmatus: 0, üleminek: { kestus: 0.5, kergus: easyInOut } }}
>
Saadetud!</p>
</motion.div>

Atribuut kestus määrab, kui kaua animatsioon peaks kestma.

Kasutage lihtsate animatsioonide jaoks tavalist CSS-i

Framer Motioniga saate teha palju muud, sealhulgas 3D-animatsiooni. Animatsioonide loomiseks pole aga alati raamatukogu vaja. Lihtsate animatsioonide jaoks, nagu hõljutusüleminekud, saate alati kasutada tavalist CSS-i.