Kako ustvariti animacije vstopa in izstopa za komponento React z uporabo Framer Motion

Animiranje komponente React, ko vstopi na zaslon ali zapusti zaslon, je lahko izziv. To je zato, ker ko skrijete komponento, jo React odstrani iz DOM-a, zaradi česar ni na voljo za animacijo. Ko ponovno prikažete komponento, jo React znova doda v DOM, kar lahko povzroči nenaden videz brez animacije.

To težavo lahko rešite s knjižnico animacij, kot je Framer Motion.

Kaj je Framer Motion?

Framer Motion je produkcijsko pripravljena knjižnica animacij za React. Zagotavlja vrsto komponent, kavljev, ključnih sličic in funkcij za sproščanje po meri za ustvarjanje in nadzor animacij.

Ena od prednosti Framer Motion je, da olajša ustvarjanje gladkih in tekočih animacij, ne da bi morali napisati veliko kode JavaScript ali ugotoviti izračune za vsak prehod.

Ima tudi sistem dogodkov, ki ga lahko uporabite za sprožitev animacij na podlagi uporabniškega vnosa, kot so kliki gumbov in poteze, s čimer ustvarite interaktivne in dinamične vmesnike, ki delujejo odzivno.

Če želite pokazati, kako uporabljati Framer Motion v Reactu, boste animirali komponento, ki vstopi in zapusti zaslon, ko kliknete gumb.

Ustvarjanje projekta React

Če želite ustvariti projekt React, boste morali namestite Node.js in npm (Node Package Manager) na vaš računalnik če nisi.

Ko imate nameščene te odvisnosti, lahko ustvarite nov projekt React z uporabo Vite z izvajanjem ukaza yarn vite v vašem terminalu.

preja vite

Ta ukaz bo ustvaril novo mapo z vnaprej nameščenimi vsemi potrebnimi datotekami in odvisnostmi. Pomaknite se do mape in zaženite razvojni strežnik z ukazom yarn start.

začetek preje

Namestitev Framer Motion v React

Namestite Framer Motion tako, da zaženete ta ukaz:

npm namestite framer-motion

Ta ukaz bo vašemu projektu dodal Framer Motion kot odvisnost.

Animiranje komponente

Če želite animirati komponento, ko vstopi in zapusti zaslon v Reactu z uporabo Framer Motion, jo morate zaviti v komponento gibanja.

Komponenta gibanja nudi nabor lastnosti za animiranje vhoda in izstopa komponente. Za nadzor njegove vidnosti in položaja lahko uporabite začetne, animirane in izhodne pripomočke.

Če ga želite videti v akciji, dodajte naslednjo kodo na vrh App.jsx, da uvozite komponento gibanja iz framer-motion.

uvoz { gibanje } od"framer-motion";

Nato ustvarite komponento, ki jo želite animirati, tako da jo ovijete s komponento gibanja. Ta primer uporablja element div, vendar lahko uporabite kateri koli drug element, kot so gumb, li in p med drugim.

uvoz { gibanje, AnimatePresence } od"framer-motion"
funkcijoaplikacija() {
vrnitev (
 <>

 začetnica={{ x: -100, nepreglednost: 0 }}
 animate={{ x: 0, nepreglednost: 1 }}
 izhod={{ x: -100, nepreglednost: 0 }}
 >
Poslano!</p>
 </motion.div>

 </>
 )
}

Komponenta gibanja vam omogoča animiranje elementa div, ki vsebuje besedilo "Poslano!".

The začetnica, animirati, in izhod lastnosti komponente gibanja določajo animacije vhoda in izstopa komponente. Ko je komponenta prvotno upodobljena, se bo začela s položajem x -100 (izven zaslona levo) in motnostjo 0 ter postala nevidna.

Lastnost animate določa, kako naj se komponenta animira, ko vstopi na zaslon, v tem primeru se premika od x položaj od -100 do položaja x 0 (drsi z leve) in postopoma zbledi v motnost 1 ter postane popolnoma viden.

Končno lastnost izhoda določa, kako naj se komponenta animira, ko jo odstranite z zaslona. V tem primeru bo komponenta zdrsnila z zaslona v levo s položajem x -100 in postopoma zbledela do motnosti 0.

Prav tako morate oviti komponento gibanja s komponento AnimatePresence iz framer-motion v animirane komponente, ko jih odstranite iz drevesa React DOM.

Zdaj, ko ste definirali animacije vstopa in izstopa, lahko dodate gumb za sprožitev animacije. Tukaj je spremenjena komponenta z gumbom:

uvoz { AnimatePresence, gibanje } od"framer-motion";
uvoz {useState} od"reagirati";
funkcijoaplikacija() {
konst [isVisible, setIsVisible] = useState(prav);
konst toggleVisibility = () => {
 setIsVisible(!isVisible);
 };
vrnitev (
 <>

 {isVisible && ( <gibanje.div
 začetnica={{ x: -100, nepreglednost: 0 }}
 animate={{ x: 0, nepreglednost: 1 }}
 izhod={{ x: -100, nepreglednost: 0 }}
 >
Poslano!</p>
 </motion.div>)}
 </AnimatePresence>

 Obvestiti
 </button>
 </>
 )
}

Ta posodobljena koda doda spremenljivko stanja, imenovano isVisible, z uporabo kljuke useState. Ta spremenljivka spremlja, ali mora biti komponenta vidna. Funkcija toggleVisibility preklopi vrednost isVisible med true in false, ko kliknete gumb.

Zdaj si pogojno upodabljanje komponente odvisno od vrednosti isVisible. Če je isVisible nastavljen na true, bo komponenta gibanja upodobljena z vstopno animacijo.

Nazadnje dodajte gumbu za obravnavo dogodkov onClick, ki pokliče funkcijo toggleVisibility, posodobi stanje isVisible in sproži animacijo vstopa ali izstopa komponente gibanja.

Dodajanje funkcije sproščanja

Funkcija popuščanja nadzira hitrost spreminjanja animacije skozi čas. Določa časovno razporeditev animacije tako, da določi, kako naj se animacija med napredovanjem pospeši ali upočasni. Brez funkcije popuščanja se lahko animacija upodobi prehitro.

Framer Motion ponuja več funkcij popuščanja, med katerimi lahko izbirate, vključno z easeInOut. Za uporabo ga uvozite na vrh App.jsx iz framer-motion.

uvoz { gibanje, easeInOut } od"framer-motion";

Nato ga dodajte objektu prehoda v komponenti gibanja:

 začetnica={{ x: -100, nepreglednost: 0 }}
 animate={{ x: 0, nepreglednost: 1, prehod: { trajanje: 0.5, enostavnost: easeInOut } }}
 izhod={{ x: -100, nepreglednost: 0, prehod: { trajanje: 0.5, enostavnost: easeInOut } }}
>
Poslano!</p>
</motion.div>

Lastnost trajanja določa, kako dolgo naj se izvaja animacija.

Uporabite navaden CSS za preproste animacije

S Framer Motion lahko storite veliko več, vključno s 3D animacijo. Vendar za ustvarjanje animacij ne potrebujete vedno knjižnice. Za preproste animacije, kot so prehodi lebdenja, lahko vedno uporabite navaden CSS.