Kā izveidot ieejas un izejas animācijas reakcijas komponentam, izmantojot Framer Motion

React komponenta animēšana, kad tas nonāk ekrānā vai atstāj to, var būt izaicinājums. Tas ir tāpēc, ka, paslēpjot komponentu, React noņem to no DOM, tādējādi tas nav pieejams animācijai. Kad komponents tiek rādīts vēlreiz, React atkārtoti pievieno to DOM, kā rezultātā var rasties pēkšņa parādīšanās bez animācijas.

Šo problēmu var atrisināt, izmantojot animācijas bibliotēku, piemēram, Framer Motion.

Kas ir Framer Motion?

Framer Motion ir ražošanai gatava React animācijas bibliotēka. Tas nodrošina virkni komponentu, āķu, atslēgas kadru un pielāgotas atvieglošanas funkcijas animāciju izveidei un vadīšanai.

Viena no Framer Motion priekšrocībām ir tā, ka tā ļauj viegli izveidot vienmērīgas un plūstošas ​​animācijas, nerakstot daudz JavaScript koda vai izdomājot aprēķinus katrai pārejai.

Tam ir arī notikumu sistēma, ko varat izmantot, lai aktivizētu animācijas, pamatojoties uz lietotāja ievadi, piemēram, pogu klikšķiem un žestiem, radot interaktīvas un dinamiskas saskarnes, kas jūtas atsaucīgas.

Lai parādītu, kā lietot Framer Motion programmā React, jūs animēsit komponentu, kas ieiet ekrānā un iziet no tā, noklikšķinot uz pogas.

Reakcijas projekta izveide

Lai izveidotu React projektu, jums tas būs jādara savā datorā instalējiet Node.js un npm (Node Package Manager). ja jums nav.

Kad šīs atkarības ir instalētas, varat izveidot jaunu React projektu, izmantojot Vite terminālī izpildot komandu yarn vite.

dzijas vite

Šī komanda izveidos jaunu mapi, kurā būs iepriekš instalēti visi nepieciešamie faili un atkarības. Pārejiet uz mapi un palaidiet izstrādes serveri ar komandu yarn start.

dzijas sākums

Framer Motion instalēšana programmā React

Instalējiet Framer Motion, izpildot šo komandu:

npm instalēt framer-motion

Šī komanda pievienos Framer Motion jūsu projektam kā atkarību.

Komponenta animēšana

Lai animētu komponentu, kad tas ieiet ekrānā un iziet no tā, izmantojot React, izmantojot Framer Motion, tas ir jāietver kustības komponentā.

Kustības komponents nodrošina rekvizītu kopu, lai animētu komponenta ieeju un izeju. Varat izmantot sākuma, animācijas un izejas rekvizītus, lai kontrolētu tā redzamību un pozīciju.

Lai to redzētu darbībā, pievienojiet tālāk norādīto kodu App.jsx augšpusē, lai importētu kustības komponentu no framer-motion.

imports {kustība} no"kadra kustība";

Pēc tam izveidojiet komponentu, kuru vēlaties animēt, aptinot to ar kustības komponentu. Šajā piemērā tiek izmantots elements div, taču varat izmantot jebkuru citu vajadzīgo elementu, piemēram, pogu, li un p.

imports { kustība, AnimatePresence } no"kadra kustība"
funkcijuApp() {
atgriezties (
 <>

 inicials={{ x: -100, necaurredzamība: 0 }}
 animēt={{ x: 0, necaurredzamība: 1 }}
 iziet={{ x: -100, necaurredzamība: 0 }}
 >
Nosūtīts!</p>
 </motion.div>

 </>
 )
}

Kustības komponents ļauj animēt div elementu, kurā ir teksts "Nosūtīts!".

The sākotnējā, animēt, un Izeja kustības komponenta īpašības nosaka komponenta ieejas un izejas animācijas. Kad komponents sākotnēji tiek renderēts, tas sāksies ar x pozīciju -100 (ārpus ekrāna pa kreisi) un necaurredzamību 0 un kļūs neredzams.

Rekvizīts animēt nosaka, kā komponentam ir jāanimējas, kad tas nonāk ekrānā, šajā gadījumā pārejot no x pozīcija no -100 līdz x pozīcijai 0 (slīd no kreisās puses) un pakāpeniski izzūd līdz necaurredzamībai 1 un kļūst pilnībā redzams.

Visbeidzot, izejas rekvizīts nosaka, kā komponentam vajadzētu animēties, kad to noņemat no ekrāna. Šādā gadījumā komponents noslīdēs no ekrāna pa kreisi ar x pozīciju -100 un pakāpeniski izzudīs līdz necaurredzamībai 0.

Ja noņemat tos no React DOM koka, kustības komponents ir jāietver ar komponentu AnimatePresence no framer-motion, lai animētu komponentus.

Tagad, kad esat definējis ieejas un izejas animācijas, varat pievienot pogu, lai aktivizētu animāciju. Šeit ir modificēts komponents ar pogu:

imports { AnimatePresence, motion } no"kadra kustība";
imports { useState } no"reaģēt";
funkcijuApp() {
konst [isVisible, setIsVisible] = useState(taisnība);
konst toggleVisibility = () => {
 setIsVisible(!isVisible);
 };
atgriezties (
 <>

 {isVisible && ( <kustība.div
 inicials={{ x: -100, necaurredzamība: 0 }}
 animēt={{ x: 0, necaurredzamība: 1 }}
 iziet={{ x: -100, necaurredzamība: 0 }}
 >
Nosūtīts!</p>
 </motion.div>)}
 </AnimatePresence>

 Paziņot
 </button>
 </>
 )
}

Šis atjauninātais kods pievieno stāvokļa mainīgo ar nosaukumu isVisible, izmantojot āķi useState. Šis mainīgais izseko, vai komponentam jābūt redzamam. Funkcija toggleVisibility pārslēdz isVisible vērtību starp patiesu un nepatiesu, kad noklikšķināt uz pogas.

Jūs tagad esat komponenta atveidošana nosacīti atkarībā no isVisible vērtības. Ja vērtība isVisible ir patiesa, kustības komponents tiks renderēts kopā ar ieejas animāciju.

Visbeidzot pievienojiet onClick notikumu apdarinātāju pogai, kas izsauc toggleVisibility funkciju, atjaunina isVisible stāvokli un aktivizē kustības komponenta ieejas vai izejas animāciju.

Atvieglošanas funkcijas pievienošana

Mīkstināšanas funkcija kontrolē animācijas izmaiņu ātrumu laika gaitā. Tas nosaka animācijas laiku, norādot, kā animācijai jāpaātrina vai jāpalēninās, tai progresējot. Bez atvieglošanas funkcijas animācija var tikt renderēta pārāk ātri.

Framer Motion piedāvā vairākas atvieglošanas funkcijas, no kurām izvēlēties, tostarp easeInOut. Importējiet to App.jsx augšdaļā no framer-motion, lai to izmantotu.

imports { kustība, easeInOut } no"kadra kustība";

Pēc tam pievienojiet to pārejas objektam kustības komponentā:

 inicials={{ x: -100, necaurredzamība: 0 }}
 animēt={{ x: 0, necaurredzamība: 1, pāreja: { ilgums: 0.5, vieglumu: easeInOut } }}
 iziet={{ x: -100, necaurredzamība: 0, pāreja: { ilgums: 0.5, vieglumu: easeInOut } }}
>
Nosūtīts!</p>
</motion.div>

Rekvizīts ilgums norāda, cik ilgi animācijai jādarbojas.

Vienkāršām animācijām izmantojiet vienkāršu CSS

Ar Framer Motion varat paveikt daudz vairāk, tostarp 3D animāciju. Tomēr, lai izveidotu animācijas, ne vienmēr ir nepieciešama bibliotēka. Vienkāršām animācijām, piemēram, kursora pārejām, vienmēr varat izmantot vienkāršu CSS.