Kaip pridėti animacijų prie savo „React“ programų naudojant „Framer Motion“.

Animacija yra esminė beveik kiekvienos šiuolaikinės žiniatinklio programos dalis. Tai taip pat yra viena iš sunkiausių dalių.

„Framer Motion“ yra „React“ sukurta biblioteka, kuri leidžia lengvai animuoti komponentus.

Kaip veikia Framer Motion

„Framer Motion“ animacijai naudoja judesio komponentą. Kiekvienas HTML / SVG elementas turi lygiavertį judesio komponentą, turintį gestų ir animacijų rekvizitus. Pavyzdžiui, įprastas HTML div atrodo taip:

<div>div>

Nors Framer Motion atitikmuo atrodo taip:

<judesys.div>judesys.div>

Judesio komponentai palaiko an pagyvinti rekvizitas, kuris suaktyvina animaciją, kai pasikeičia jo reikšmės. Jei norite sukurti sudėtingas animacijas, naudokite naudoti Animate kablys su taikiniu ref.

Animacija „Framer Motion“.

Prieš naudodami Framer Motion savo projekte, turite turėti Node.js vykdymo laikas ir jūsų kompiuteryje įdiegta verpalų paketų tvarkyklė ir suprasti, kas yra React ir kaip jį naudoti.

Atidarykite terminalą ir paleiskite:

git klonas [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
verpalai
verpalai dev

Kai atidarysite Localhost: 5173 savo naršyklėje pamatysite tai:

Dabar galite sukurti savo pirmąją paprastą animaciją – mygtuką, kuris auga užvedus pelės žymeklį ir susitraukia, kai žymeklis palieka.

Atidaryk src/App.jsx failą kodų rengyklėje. Šiame faile yra funkcinis komponentas, kuris grąžina React fragmentą. Importuoti Mygtukas komponentas, tada perteikite jį, perduodamas a tekstą rekvizitas:

Animuotas mygtukas</h4>
Perkelkite pelės žymeklį virš mygtuko, kad pamatytumėte efektą</div>
„Užvesk mane“/>
</section>

Tada redaguokite Mygtukas.jsx failą ir importuoti judesį naudingumas iš framer-motion:

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

Dabar pakeiskite įprastą mygtuką elementas su judesys.[elementas] komponentas. Tokiu atveju naudokite judesio.mygtukas komponentas.

Tada pridėkite a o Užveskite pelės žymeklį gestų rekvizitai ir perduoti reikšmių objektą, kurį Framer Motion turėtų animuoti, kai vartotojas užveda pelės žymeklį virš mygtuko.

skalė: 1.1 }}>
{text}
</motion.button>

Dabar mygtukas bus animuotas, kai perkelsite pelės žymeklį ant jo arba pašalinsite iš jo:

Jums gali kilti klausimas, kodėl ši demonstracinė versija nenaudojama CSS animacijos vietoj to. „Framer Motion“ turi pranašumų prieš CSS, nes jis integruojamas su „React“ būsena ir paprastai sukuria švaresnį kodą.

Tada išbandykite ką nors sudėtingesnio: suaktyvinkite modalą. Į Backdrop.jsx, importuokite judesio įrankį ir sukurkite funkcinį komponentą su paspaudus ir vaikai rekvizitai. Grąžinti a judesys.div komponentas su klase "fonas" ir paspaudus klausytojas JSX.

eksportuotinumatytasfunkcijaFonas() {
grąžinti (<>

 </motion.div>
 </>)
}

Tada pridėkite tris rekvizitus, būtent: pradinė, animuoti, ir išeiti. Šie rekvizitai atitinkamai parodo pradinę komponento būseną, būseną, kurią komponentas turėtų animuoti, ir būseną, kurios komponentas turėtų būti po animacijos.

Papildyti paspaudus ir vaikai rekvizitai prie judesys.div ir nustatykite perėjimo trukmę į 0,34 sekundės:

eksportuotinumatytasfunkcijaFonas ({onClick, vaikai}){
grąžinti (<>
 onClick={onClick}
 className="fonas"
 inicialus={{ neskaidrumas: 0, fono filtras:„Blur (0px)“ }}
 animuoti={{ neskaidrumas: 1, fono filtras:„suliejimas (3,4 piks.)“ }}
 exit={{ neskaidrumas: 0, fono filtras:„Blur (0px)“}}
 pereinamumas={{
 trukmė: 0.34,
 }}
 >
 {vaikai}
 </motion.div>
 </>)
}

The Fonas komponentas yra įvynioklis Modalinis komponentas. Spustelėjus foną modalas išjungiamas. Į Modal.jsx, importuoti judesį ir fono komponentas. Numatytasis funkcinis komponentas priima rekvizitus: closeModal ir tekstą. Sukurkite varianto kintamąjį kaip objektą.

konst variantai = {
 inicialas: {
 y: "-200%",
 neskaidrumas: 1,
 },
 matomas: {
 y: "50%",
 perėjimas: {
 trukmė: 0.1,
 tipas: "pavasaris",
 slopinimas: 32,
 standumas: 500
 }
 },
 išeiti: {
 y: "200%",
 }
 }

Grąžina motion.div komponentą, apvyniotą fono komponentu su "variantų" rekvizitu, nukreipiančiu į objektą variantai. Variantai yra iš anksto nustatytų animacijos būsenų, kuriose gali būti komponentas, rinkinys.

 onClick={(e) => e.stopPropagation()}
 className="modalinis"
 variantai={variantai}
 pradinis ='pradinis'
 animuoti ='matomas'
 išeiti ='išeiti'
 >
 {text}
 </motion.div>
</Backdrop>

Tada turite pridėti funkciją, kad būtų rodomas modalas, kai vartotojas spustelėja mygtuką. Atidaryk App.jsx failą ir importuoti useState Reaguoti kabliuką ir Modalinis komponentas.

importuoti { useState } iš"reaguoti";
importuoti Modalinis iš"./components/Modal";

Tada sukurkite a modalOpen būsena, kai nustatyta numatytoji vertė klaidinga.

konst [modalOpen, setModalOpen] = useState(klaidinga);

Tada apibrėžkite funkciją closeModal kuris nustato modalOpen meluoti.

funkcijacloseModal() {
 setModalOpen(klaidinga)
}

React fragmento viršuje sąlygiškai pateikite a Modalinis komponentą ir perduoti atitinkamą tekstą atrama su closeModal rekvizitu.

{modalOpen && <Modalinistekstą=„Tai modalas, animuotas su Framer Motion“}

Tada, antrajame skyrius elementas, atvaizduojamas a mygtuką elementas su onClick įvykių tvarkykle, kuri nustato modalOpen į false.

 setModalOpen(tiesa)}>Rodyti modalą</button>

Galite pastebėti, kad „React“ atjungia „Modal“ komponentą iš DOM be išėjimo animacijos. Norėdami tai išspręsti, jums reikia AnimatePresence komponentas. Importuoti AnimatePresence iš framer-motion.

importuoti {AnimatePresence} iš„framer-motion“;

Dabar apvyniokite „Modal“ komponentą į „AnimatePresence“ komponentą ir nustatykite pradinė prop to false ir režimu palaukti".

klaidinga} režimas="laukti">
 {modalOpen && <Modalinistekstą=„Tai modalas, animuotas su Framer Motion“closeModal={closeModal} />}
</AnimatePresence>

Komponentas AnimatePresence leidžia užbaigti išėjimo animaciją prieš React atjungiant jį nuo DOM.

Framer Motion gali animuoti komponentus slinkdami naudodami o InView prop. Atidaryk ScrollElement.jsxir importuoti judesį naudingumas. Keisti div į judesys.div su klase "slinkties elementas".

 inicialus={{ neskaidrumas: 0, skalė: 0, pasukti: 14 }}
 whileInView={{ neskaidrumas: 1, skalė: 1, pasukti: 0 }}
 pereinamumas={{ trukmės: .8 }}
 peržiūros sritis={{ kartą: tiesa }}
 className="slinkties elementas"
>
 Slinkties elementas
</motion.div>

The peržiūros sritis rekvizitas nurodo objektą, kuris nustato kartą į tiesa. Toliau, į App.jsx failą, importuokite ScrollElement komponentą ir apibrėžkite kintamąjį scrollElementCount, kuriame yra sveikasis skaičius.

leisti scrollElementCount=14;

Paskutiniame skyrius elementą, sukurkite masyvą, kurio tam tikras ilgis yra apibrėžtas scrollElementCount kuris susieja kiekvieną masyvo elementą ir generuoja komponentą su unikaliu raktu pagal indeksą i.

{[...Masyvas (scrollElementCount)].map((x, i) =><ScrollElementRaktas={i} />)}

Dabar, grįžus į naršyklę, elementai turėtų būti animuoti, kai juos slenkate į rodinį.

„Framer Motion“ alternatyvos

„Framer Motion“ nėra vienintelė animacijos biblioteka rinkoje. Jei jums nepatinka, kaip Framer Motion veikia, galite išbandyti kitas bibliotekas, pvz Reaguokite pavasarį.

Taip pat galite naudoti CSS animacijas, kurias palaiko visos šiuolaikinės naršyklės, tačiau jas išmokti ir nustatyti gali būti sudėtinga.

Vartotojo patirties gerinimas naudojant animacijas

Kiekvienas vartotojas tikisi sklandžiai naudotis žiniatinklio programa. Svetainė ar programa be animacijos atrodo statiška ir nereaguoja. Animacijos pagerina vartotojo patirtį, nes jas galite naudoti norėdami perduoti vartotojui atsiliepimą, kai jis atlieka tam tikrą veiksmą.