Kaip sukurti „React“ komponento įėjimo ir išėjimo animacijas naudojant „Framer Motion“.

Animuoti React komponentą, kai jis patenka į ekraną arba palieka jį, gali būti sudėtinga. Taip yra todėl, kad kai paslėpsite komponentą, „React“ pašalina jį iš DOM, todėl jis nepasiekiamas animacijai. Kai vėl parodote komponentą, „React“ iš naujo jį prideda prie DOM, todėl gali staiga pasirodyti be animacijos.

Šią problemą galite išspręsti naudodami animacijos biblioteką, pvz., „Framer Motion“.

Kas yra „Framer Motion“?

„Framer Motion“ yra gamybai paruošta „React“ animacijos biblioteka. Jame yra daugybė komponentų, kabliukų, pagrindinių kadrų ir pasirinktinių palengvinimo funkcijų, skirtų animacijai kurti ir valdyti.

Vienas iš „Framer Motion“ pranašumų yra tai, kad juo lengva kurti sklandžią ir sklandžią animaciją, nereikia rašyti daug „JavaScript“ kodo ar išsiaiškinti kiekvieno perėjimo skaičiavimus.

Jame taip pat yra įvykių sistema, kurią galite naudoti animacijai suaktyvinti pagal vartotojo įvestį, pvz., mygtukų paspaudimus ir gestus, kuriant interaktyvias ir dinamines sąsajas, kurios reaguoja.

Norėdami parodyti, kaip naudoti „Framer Motion“ programoje „React“, suaktyvinsite komponentą, kuris patenka į ekraną ir palieka jį spustelėjus mygtuką.

Reagavimo projekto kūrimas

Norėdami sukurti „React“ projektą, turėsite įdiekite Node.js ir npm (Node Package Manager) savo kompiuteryje jei to nepadarėte.

Įdiegę šias priklausomybes galite sukurkite naują React projektą naudodami Vite paleisdami komandą yarn vite savo terminale.

verpalų vite

Ši komanda sukurs naują aplanką su visais reikalingais failais ir iš anksto įdiegtais priklausomybėmis. Eikite į aplanką ir paleiskite kūrimo serverį naudodami yarn start komandą.

verpalų pradžia

„Framer Motion“ diegimas „React“.

Įdiekite „Framer Motion“ vykdydami šią komandą:

npm įdiegti framer-motion

Ši komanda pridės Framer Motion kaip priklausomybę prie jūsų projekto.

Komponento animavimas

Norėdami animuoti komponentą, kai jis įeina ir palieka ekraną React naudojant Framer Motion, turite jį apvynioti judesio komponente.

Judėjimo komponentas suteikia savybių rinkinį, skirtą komponento įėjimui ir išėjimui animuoti. Norėdami valdyti jo matomumą ir padėtį, galite naudoti pradinį, animacinį ir išėjimo rekvizitus.

Norėdami pamatyti, kaip jis veikia, App.jsx viršuje pridėkite šį kodą, kad importuotumėte judesio komponentą iš framer-motion.

importuoti {judesys} iš"rėmelio judesys";

Tada sukurkite komponentą, kurį norite animuoti, apvyniodami jį judesio komponentu. Šiame pavyzdyje naudojamas elementas div, bet galite naudoti bet kurį kitą norimą elementą, pvz., mygtuką, li ir p, be kitų.

importuoti { judesys, AnimatePresence } iš"rėmelio judesys"
funkcijaProgramėlė() {
grąžinti (
 <>

 inicialus={{ x: -100, neskaidrumas: 0 }}
 animuoti={{ x: 0, neskaidrumas: 1 }}
 exit={{ x: -100, neskaidrumas: 0 }}
 >
Išsiųsta!</p>
 </motion.div>

 </>
 )
}

Judėjimo komponentas leidžia animuoti div elementą, kuriame yra tekstas „Išsiųsta!“.

The pradinė, pagyvinti, ir išeiti judesio komponento savybės apibrėžia komponento įėjimo ir išėjimo animacijas. Kai komponentas iš pradžių pateikiamas, jis prasidės nuo x padėties –100 (ne ekrane į kairę), o neskaidrumas – 0 ir taps nematomas.

Animate ypatybė apibrėžia, kaip komponentas turi animuoti, kai jis patenka į ekraną, šiuo atveju juda nuo x padėtis nuo -100 iki x padėties 0 (slenka iš kairės) ir palaipsniui mažėja iki 1 neskaidrumo ir tampa visiškai matomas.

Galiausiai išėjimo ypatybė apibrėžia, kaip komponentas turi animuoti, kai jį pašalinate iš ekrano. Tokiu atveju komponentas nuslys nuo ekrano į kairę, kai x padėtis yra -100, ir palaipsniui išnyks iki 0.

Taip pat turite apvynioti judesio komponentą su AnimatePresence komponentu iš kadravimo judesio, kad suaktyvintumėte komponentus, kai juos pašalinate iš React DOM medžio.

Dabar, kai apibrėžėte įėjimo ir išėjimo animacijas, galite pridėti mygtuką, kad suaktyvintumėte animaciją. Čia yra modifikuotas komponentas su mygtuku:

importuoti { AnimatePresence, motion } iš"rėmelio judesys";
importuoti { useState } iš"reaguoti";
funkcijaProgramėlė() {
konst [isVisible, setIsVisible] = useState(tiesa);
konst toggleVisibility = () => {
 setIsVisible(!isVisible);
 };
grąžinti (
 <>

 {yra matomas && ( <judesys.div
 inicialus={{ x: -100, neskaidrumas: 0 }}
 animuoti={{ x: 0, neskaidrumas: 1 }}
 exit={{ x: -100, neskaidrumas: 0 }}
 >
Išsiųsta!</p>
 </motion.div>)}
 </AnimatePresence>

 Pranešti
 </button>
 </>
 )
}

Šis atnaujintas kodas prideda būsenos kintamąjį, vadinamą „isVisible“, naudojant „useState“ kabliuką. Šis kintamasis stebi, ar komponentas turi būti matomas. Funkcija toggleVisibility perjungia isVisible reikšmę tarp true ir false, kai spustelėsite mygtuką.

Tu esi dabar pateikiant komponentą sąlygiškai priklausomai nuo isVisible reikšmės. Jei „isVisible“ yra tiesa, judesio komponentas bus atvaizduojamas kartu su įėjimo animacija.

Galiausiai prie mygtuko, kuris iškviečia funkciją toggleVisibility, atnaujina „isVisible“ būseną ir suaktyvina judesio komponento įėjimo arba išėjimo animaciją, pridėkite onClick įvykių tvarkyklę.

Lengvinimo funkcijos pridėjimas

Lengvinimo funkcija valdo animacijos kitimo greitį laikui bėgant. Jis apibrėžia animacijos laiką, nurodydamas, kaip animacija turėtų paspartėti arba sulėtėti jai progresuojant. Be lengvinimo funkcijos, animacija gali būti pateikiama per greitai.

„Framer Motion“ siūlo keletą lengvinimo funkcijų, iš kurių galima rinktis, įskaitant „easeInOut“. Importuokite jį App.jsx viršuje iš framer-motion, kad galėtumėte jį naudoti.

importuoti { judesys, easeInOut } iš"rėmelio judesys";

Tada pridėkite jį prie judesio komponento pereinamojo objekto:

 inicialus={{ x: -100, neskaidrumas: 0 }}
 animuoti={{ x: 0, neskaidrumas: 1, perėjimas: { trukmės: 0.5, lengvumas: easyInOut } }}
 exit={{ x: -100, neskaidrumas: 0, perėjimas: { trukmės: 0.5, lengvumas: easyInOut } }}
>
Išsiųsta!</p>
</motion.div>

Savybė trukmė nurodo, kiek laiko turi būti vykdoma animacija.

Norėdami sukurti paprastą animaciją, naudokite paprastą CSS

Su „Framer Motion“ galite padaryti daug daugiau, įskaitant 3D animaciją. Tačiau norint sukurti animaciją, ne visada reikia bibliotekos. Paprastoms animacijoms, pvz., perėjimui užvedus pelės žymeklį, visada galite naudoti paprastą CSS.