Kako stvoriti animacije ulaza i izlaza za React komponentu pomoću Framer Motiona

Animiranje komponente React dok ulazi ili izlazi iz zaslona može biti izazov. To je zato što, kada sakrijete komponentu, React je uklanja iz DOM-a, što je čini nedostupnom za animaciju. Kada ponovno prikažete komponentu, React je ponovno dodaje u DOM što može rezultirati naglim pojavljivanjem bez animacije.

Ovaj problem možete riješiti bibliotekom animacije kao što je Framer Motion.

Što je Framer Motion?

Framer Motion je knjižnica animacija spremna za produkciju za React. Omogućuje niz komponenti, spojnica, ključnih okvira i prilagođenih funkcija olakšavanja za stvaranje i kontrolu animacija.

Jedna od prednosti Framer Motiona je ta što olakšava stvaranje glatkih i tečnih animacija bez potrebe za pisanjem puno JavaScript koda ili izračunavanjem izračuna za svaki prijelaz.

Također ima sustav događaja koji možete koristiti za pokretanje animacija na temelju korisničkog unosa kao što su klikovi gumba i geste, stvarajući interaktivna i dinamična sučelja koja djeluju brzo.

Da biste demonstrirali kako koristiti Framer Motion u Reactu, animirat ćete komponentu koja ulazi i izlazi iz zaslona kada kliknete gumb.

Stvaranje React projekta

Da biste stvorili React projekt, morat ćete instalirajte Node.js i npm (Node Package Manager) na vašem računalu ako nisi.

Nakon što instalirate ove ovisnosti, možete izradite novi React projekt koristeći Vite pokretanjem naredbe yarn vite u vašem terminalu.

pređa vite

Ova naredba će stvoriti novu mapu sa svim potrebnim datotekama i unaprijed instaliranim ovisnostima. Dođite do mape i pokrenite razvojni poslužitelj s naredbom yarn start.

početak pređe

Instaliranje Framer Motiona u React

Instalirajte Framer Motion pokretanjem ove naredbe:

npm instalirajte framer-motion

Ova naredba će vašem projektu dodati Framer Motion kao ovisnost.

Animiranje komponente

Da biste animirali komponentu dok ulazi i izlazi sa zaslona u Reactu koristeći Framer Motion, trebate je omotati u komponentu pokreta.

Komponenta kretanja pruža skup svojstava za animiranje ulaza i izlaza komponente. Možete koristiti početne, animirane i izlazne rekvizite za kontrolu njegove vidljivosti i položaja.

Da biste ga vidjeli na djelu, dodajte sljedeći kod na vrh App.jsx da uvezete komponentu kretanja iz framer-motion.

uvoz { pokret } iz"framer-motion";

Zatim izradite komponentu koju želite animirati tako da je omotate komponentom kretanja. Ovaj primjer koristi element div, ali možete koristiti bilo koji drugi element koji želite, kao što su gumb, li i p između ostalih.

uvoz { pokret, AnimatePresence } iz"framer-motion"
funkcijaaplikacija() {
povratak (
 <>

 početni={{ x: -100, neprozirnost: 0 }}
 animirati={{ x: 0, neprozirnost: 1 }}
 izlaz={{ x: -100, neprozirnost: 0 }}
 >
Poslano!</p>
 </motion.div>

 </>
 )
}

Komponenta kretanja omogućuje vam animiranje div elementa koji sadrži tekst "Poslano!".

The početni, animirati, i Izlaz svojstva komponente kretanja definiraju ulazne i izlazne animacije komponente. Kada se komponenta inicijalno renderira, počet će s pozicijom x od -100 (izvan zaslona lijevo) i neprozirnošću od 0 i postat će nevidljiva.

Svojstvo animate definira kako bi komponenta trebala animirati kada uđe na zaslon, u ovom slučaju krećući se od x položaj od -100 do položaja x od 0 (klizi slijeva) i postupno blijedi u neprozirnost od 1 i postaje potpuno vidljivo.

Konačno, svojstvo izlaza definira kako bi komponenta trebala animirati kada je uklonite sa zaslona. U ovom slučaju, komponenta će kliziti sa zaslona ulijevo s x pozicijom od -100 i postupno nestati do neprozirnosti od 0.

Također trebate zamotati komponentu pokreta s komponentom AnimatePresence iz framer-motion za animiranje komponenti kada ih uklonite iz React DOM stabla.

Sada kada ste definirali animacije ulaza i izlaza, možete dodati gumb za pokretanje animacije. Ovdje je modificirana komponenta s gumbom:

uvoz { AnimatePresence, pokret } iz"framer-motion";
uvoz {useState} iz"reagirati";
funkcijaaplikacija() {
konst [isVisible, setIsVisible] = useState(pravi);
konst prebaciVidljivost = () => {
 setIsVisible(!isVisible);
 };
povratak (
 <>

 {isVisible && ( <kretanje.div
 početni={{ x: -100, neprozirnost: 0 }}
 animirati={{ x: 0, neprozirnost: 1 }}
 izlaz={{ x: -100, neprozirnost: 0 }}
 >
Poslano!</p>
 </motion.div>)}
 </AnimatePresence>

 Obavijestiti
 </button>
 </>
 )
}

Ovaj ažurirani kod dodaje varijablu stanja pod nazivom isVisible pomoću kuke useState. Ova varijabla prati treba li komponenta biti vidljiva. Funkcija toggleVisibility prebacuje vrijednost isVisible između true i false kada kliknete gumb.

Ti si sada prikazivanje komponente uvjetno ovisno o vrijednosti isVisible. Ako je isVisible istinito, komponenta pokreta će se prikazati s ulaznom animacijom.

Na kraju dodajte rukovatelj događajem onClick gumbu koji poziva funkciju toggleVisibility, ažurira stanje isVisible i pokreće ulaznu ili izlaznu animaciju komponente kretanja.

Dodavanje funkcije ublažavanja

Funkcija ublažavanja kontrolira brzinu promjene animacije tijekom vremena. Definira vrijeme animacije određivanjem kako bi se animacija trebala ubrzati ili usporiti dok napreduje. Bez funkcije ublažavanja, animacija se može prikazati prebrzo.

Framer Motion nudi nekoliko funkcija ublažavanja koje možete izabrati, uključujući easeInOut. Uvezite ga na vrh App.jsx iz framer-motion da biste ga koristili.

uvoz {pokret, easeInOut} iz"framer-motion";

Zatim ga dodajte prijelaznom objektu u komponenti kretanja:

 početni={{ x: -100, neprozirnost: 0 }}
 animirati={{ x: 0, neprozirnost: 1, tranzicija: { trajanje: 0.5, olakšati: easeInOut } }}
 izlaz={{ x: -100, neprozirnost: 0, tranzicija: { trajanje: 0.5, olakšati: easeInOut } }}
>
Poslano!</p>
</motion.div>

Svojstvo duration određuje koliko dugo se animacija treba izvoditi.

Koristite običan CSS za jednostavne animacije

Puno toga možete učiniti s Framer Motionom, uključujući 3D animaciju. Međutim, nije vam uvijek potrebna biblioteka za stvaranje animacija. Za jednostavne animacije kao što su prijelazi lebdeći, uvijek možete koristiti običan CSS.