Kuinka luoda sisään- ja ulostuloanimaatioita reaktiokomponentille Framer Motionin avulla

React-komponentin animointi sen saapuessa näyttöön tai poistuessaan siitä voi olla haaste. Tämä johtuu siitä, että kun piilotat komponentin, React poistaa sen DOM: sta, jolloin se ei ole käytettävissä animaatiolle. Kun näytät komponentin uudelleen, React lisää sen uudelleen DOM: iin, mikä voi johtaa äkilliseen ulkoasuun ilman animaatiota.

Voit ratkaista tämän ongelman animaatiokirjastolla, kuten Framer Motion.

Mikä Framer Motion on?

Framer Motion on tuotantovalmis animaatiokirjasto Reactille. Se tarjoaa joukon komponentteja, koukkuja, avainkehyksiä ja mukautettuja helpotustoimintoja animaatioiden luomiseen ja hallintaan.

Yksi Framer Motionin etu on, että sen avulla on helppo luoda sujuvat ja sulavat animaatiot ilman, että sinun tarvitsee kirjoittaa paljon JavaScript-koodia tai selvittää laskelmia kullekin siirrolle.

Siinä on myös tapahtumajärjestelmä, jonka avulla voit käynnistää animaatioita, jotka perustuvat käyttäjän syötteisiin, kuten painikkeiden napsautuksiin ja eleisiin, luoden interaktiivisia ja dynaamisia käyttöliittymiä, jotka tuntuvat reagoivilta.

Havainnollistaaksesi, kuinka Framer Motionia käytetään Reactissa, animoi komponentti, joka tulee näyttöön ja poistuu siitä, kun napsautat painiketta.

React-projektin luominen

React-projektin luominen edellyttää asenna Node.js ja npm (Node Package Manager) koneellesi jos et ole.

Kun olet asentanut nämä riippuvuudet, voit tehdä sen Luo uusi React-projekti Viten avulla suorittamalla yarn vite -komento terminaalissasi.

lanka vite

Tämä komento luo uuden kansion, jossa kaikki tarvittavat tiedostot ja riippuvuudet on esiasennettu. Siirry kansioon ja käynnistä kehityspalvelin yarn start -komennolla.

langan alku

Framer Motionin asentaminen Reactiin

Asenna Framer Motion suorittamalla tämä komento:

npm asentaa framer-motion

Tämä komento lisää Framer Motionin riippuvuutena projektiisi.

Komponentin animointi

Jos haluat animoida komponentin sen saapuessa näytölle ja poistuessaan siitä Reactissa Framer Motionin avulla, sinun on käärittävä se liikekomponenttiin.

Liikekomponentti tarjoaa joukon ominaisuuksia komponentin sisään- ja ulostulon animoimiseksi. Voit käyttää aloitus-, animaatio- ja poistumisrekvisiitta ohjaamaan sen näkyvyyttä ja sijaintia.

Jos haluat nähdä sen toiminnassa, lisää seuraava koodi App.jsx: n yläosaan tuodaksesi liikekomponentin framer-motionista.

tuonti { liike } alkaen"framer-motion";

Luo seuraavaksi komponentti, jonka haluat animoida käärimällä se liikekomponenttiin. Tässä esimerkissä käytetään div-elementtiä, mutta voit käyttää mitä tahansa muuta haluamaasi elementtiä, kuten button, li ja p.

tuonti { liike, AnimatePresence } alkaen"framer-motion"
toimintoSovellus() {
palata (
 <>

 iniciaali={{ x: -100, opasiteetti: 0 }}
 animoida={{ x: 0, opasiteetti: 1 }}
 exit={{ x: -100, opasiteetti: 0 }}
 >
Lähetetty! </p>
 </motion.div>

 </>
 )
}

Liikekomponentin avulla voit animoida div-elementin, joka sisältää tekstin "Lähetetty!".

The alkukirjain, animoida, ja poistu liikekomponentin ominaisuudet määrittelevät komponentin tulo- ja poistumisanimaatiot. Kun komponentti hahmonnetaan alun perin, se alkaa x-paikalla -100 (näytön ulkopuolella vasemmalla) ja opasiteetilla 0 ja siitä tulee näkymätön.

Animate-ominaisuus määrittää, kuinka komponentin tulee animoitua, kun se tulee näyttöön, tässä tapauksessa siirtyy x: stä asemasta -100 x-asentoon 0 (liukuen sisään vasemmalta) ja häipyy vähitellen läpinäkymättömäksi arvoksi 1 ja tulee täysin näkyvissä.

Lopuksi exit-ominaisuus määrittää, kuinka komponentin tulee animoitua, kun poistat sen näytöltä. Tässä tapauksessa komponentti liukuu pois näytöltä vasemmalle x-asennossa -100 ja häipyy asteittain opasiteettiin 0.

Sinun on myös käärittävä liikekomponentti AnimatePresence-komponentilla framer-motionista animoidaksesi komponentit, kun poistat ne React DOM -puusta.

Nyt kun olet määrittänyt sisääntulo- ja poistumisanimaatiot, voit lisätä painikkeen animaation käynnistämiseksi. Tässä on muokattu komponentti painikkeella:

tuonti { AnimatePresence, motion } alkaen"framer-motion";
tuonti { useState } alkaen"reagoi";
toimintoSovellus() {
konst [isVisible, setIsVisible] = useState(totta);
konst toggleVisibility = () => {
 setIsVisible(!isVisible);
 };
palata (
 <>

 {onVisible && ( <motion.div
 iniciaali={{ x: -100, opasiteetti: 0 }}
 animoida={{ x: 0, opasiteetti: 1 }}
 exit={{ x: -100, opasiteetti: 0 }}
 >
Lähetetty! </p>
 </motion.div>)}
 </AnimatePresence>

 Ilmoittaa
 </button>
 </>
 )
}

Tämä päivitetty koodi lisää tilamuuttujan nimeltä isVisible käyttämällä useState-koukkua. Tämä muuttuja seuraa, pitäisikö komponentin olla näkyvissä. ToggleVisibility-funktio vaihtaa isVisible-arvon tosi ja epätosi välillä, kun napsautat painiketta.

Sinä olet nyt renderöimällä komponentin ehdollisesti isVisible-arvon mukaan. Jos isVisible on tosi, liikekomponentti renderöityy sisääntuloanimaatiolla.

Lisää lopuksi onClick-tapahtumakäsittelijä painikkeeseen, joka kutsuu toggleVisibility-funktion, päivittää isVisisible-tilan ja laukaisee liikekomponentin sisään- tai poistumisanimaation.

Helpotustoiminnon lisääminen

Helpotustoiminto ohjaa animaation muutosnopeutta ajan myötä. Se määrittää animaation ajoituksen määrittämällä, kuinka animaation tulee nopeutua tai hidastua sen edetessä. Ilman helpotustoimintoa animaatio saattaa hahmottua liian nopeasti.

Framer Motion tarjoaa useita valittavissa olevia helpotustoimintoja, mukaan lukien easeInOut. Tuo se App.jsx: n yläreunasta framer-motionista käyttääksesi sitä.

tuonti { liike, easeInOut } alkaen"framer-motion";

Lisää se sitten liikekomponentin siirtymäobjektiin:

 iniciaali={{ x: -100, opasiteetti: 0 }}
 animoida={{ x: 0, opasiteetti: 1, siirtyminen: { kesto: 0.5, helppous: easeInOut } }}
 exit={{ x: -100, opasiteetti: 0, siirtyminen: { kesto: 0.5, helppous: easeInOut } }}
>
Lähetetty! </p>
</motion.div>

Kesto-ominaisuus määrittää, kuinka kauan animaation tulee olla käynnissä.

Käytä tavallista CSS: ää yksinkertaisiin animaatioihin

Framer Motionilla voit tehdä paljon muuta, mukaan lukien 3D-animaatio. Et kuitenkaan aina tarvitse kirjastoa animaatioiden luomiseen. Yksinkertaisia ​​animaatioita, kuten hover-siirtymiä, varten voit aina käyttää tavallista CSS: ää.