Ako vytvoriť animácie vstupu a výstupu pre komponent React pomocou funkcie Framer Motion

Animácia komponentu React pri vstupe alebo výstupe z obrazovky môže byť výzvou. Je to preto, že keď skryjete komponent, React ho odstráni z DOM, čím sa stane nedostupným pre animáciu. Keď komponent znova zobrazíte, React ho znova pridá do DOM, čo môže mať za následok náhly vzhľad bez animácie.

Tento problém môžete vyriešiť pomocou knižnice animácií, ako je Framer Motion.

Čo je to Framer Motion?

Framer Motion je knižnica animácií pripravená na produkciu pre React. Poskytuje celý rad komponentov, háčikov, kľúčových snímok a vlastných funkcií zjednodušenia na vytváranie a ovládanie animácií.

Jednou z výhod programu Framer Motion je, že uľahčuje vytváranie plynulých a plynulých animácií bez toho, aby ste museli písať veľa kódu JavaScript alebo zisťovať výpočty pre každý prechod.

Má tiež systém udalostí, ktorý môžete použiť na spustenie animácií na základe vstupu používateľa, ako sú kliknutia na tlačidlá a gestá, čím sa vytvárajú interaktívne a dynamické rozhrania, ktoré reagujú.

Aby ste demonštrovali, ako používať Framer Motion v Reacte, animujete komponent, ktorý vstupuje na obrazovku a opúšťa ju po kliknutí na tlačidlo.

Vytvorenie projektu React

Ak chcete vytvoriť projekt React, musíte to urobiť nainštalujte Node.js a npm (Node Package Manager) na váš počítač ak nie.

Po nainštalovaní týchto závislostí môžete vytvorte nový projekt React pomocou Vite spustením príkazu yarn vite vo vašom termináli.

priadza vite

Tento príkaz vytvorí nový priečinok so všetkými potrebnými súbormi a predinštalovanými závislosťami. Prejdite do priečinka a spustite vývojový server pomocou príkazu yarn start.

začiatok priadze

Inštalácia Framer Motion v React

Nainštalujte Framer Motion spustením tohto príkazu:

npm nainštalujte framer-motion

Tento príkaz pridá Framer Motion ako závislosť do vášho projektu.

Animácia komponentu

Ak chcete animovať komponent pri vstupe a výstupe z obrazovky v React pomocou Framer Motion, musíte ho zabaliť do komponentu pohybu.

Komponent pohybu poskytuje sadu vlastností na animáciu vstupu a výstupu komponentu. Na ovládanie jeho viditeľnosti a polohy môžete použiť počiatočné, animované a výstupné rekvizity.

Ak ho chcete vidieť v akcii, pridajte nasledujúci kód do hornej časti App.jsx a importujte komponent pohybu z framer-motion.

importovať { pohyb } od"framer-motion";

Potom vytvorte komponent, ktorý chcete animovať, tak, že ho obalíte komponentom pohybu. V tomto príklade sa používa prvok div, ale môžete použiť ľubovoľný iný prvok, ako napríklad button, li a p.

importovať { motion, AnimatePresence } od"framer-motion"
funkciuApp() {
vrátiť (
 <>

 počiatočné={{ X: -100, nepriehľadnosť: 0 }}
 animovať={{ X: 0, nepriehľadnosť: 1 }}
 exit={{ X: -100, nepriehľadnosť: 0 }}
 >
Odoslané!</p>
 </motion.div>

 </>
 )
}

Komponent pohybu vám umožňuje animovať prvok div obsahujúci text „Odoslané!“.

The počiatočné, animovať, a VÝCHOD vlastnosti komponentu pohybu definujú animácie vstupu a výstupu komponentu. Keď sa komponent na začiatku vykreslí, začne s pozíciou x -100 (mimo obrazovky vľavo) a nepriehľadnosťou 0 a stane sa neviditeľným.

Vlastnosť animate definuje, ako sa má komponent animovať, keď vstúpi na obrazovku, v tomto prípade sa pohybuje od x pozícia -100 do polohy x 0 (zasúva sa zľava) a postupne sa stráca na nepriehľadnosť 1 a stáva sa úplne viditeľné.

Nakoniec vlastnosť exit definuje, ako sa má komponent animovať, keď ho odstránite z obrazovky. V tomto prípade sa komponent posunie z obrazovky doľava s polohou x -100 a postupne sa stratí na nepriehľadnosť 0.

Musíte tiež zabaliť komponent pohybu komponentom AnimatePresence z framer-motion na komponenty animovať, keď ich odstránite zo stromu React DOM.

Teraz, keď ste definovali animácie vstupu a výstupu, môžete pridať tlačidlo na spustenie animácie. Tu je upravený komponent s tlačidlom:

importovať { AnimatePresence, motion } od"framer-motion";
importovať { useState } od"reagovať";
funkciuApp() {
konšt [isVisible, setIsVisible] = useState(pravda);
konšt prepnúť Viditeľnosť = () => {
 setIsVisible(!isVisible);
 };
vrátiť (
 <>

 {isVisible && ( <pohyb.div
 počiatočné={{ X: -100, nepriehľadnosť: 0 }}
 animovať={{ X: 0, nepriehľadnosť: 1 }}
 exit={{ X: -100, nepriehľadnosť: 0 }}
 >
Odoslané!</p>
 </motion.div>)}
 </AnimatePresence>

 Upozorniť
 </button>
 </>
 )
}

Tento aktualizovaný kód pridáva stavovú premennú s názvom isVisible pomocou háku useState. Táto premenná sleduje, či má byť komponent viditeľný. Funkcia toggleVisibility prepína hodnotu isVisible medzi true a false, keď kliknete na tlačidlo.

Si teraz podmienené vykreslenie komponentu v závislosti od hodnoty isVisible. Ak je hodnota isVisible true, komponent pohybu sa vykreslí so vstupnou animáciou.

Nakoniec pridajte obsluhu udalosti onClick k tlačidlu, ktoré volá funkciu toggleVisibility, aktualizuje stav isVisible a spúšťa animáciu vstupu alebo výstupu komponentu pohybu.

Pridanie funkcie uvoľnenia

Funkcia nábehu a nábehu riadi rýchlosť zmeny animácie v priebehu času. Definuje načasovanie animácie tým, že špecifikuje, ako sa má animácia zrýchliť alebo spomaliť počas jej priebehu. Bez funkcie easing sa môže animácia vykresľovať príliš rýchlo.

Framer Motion poskytuje na výber niekoľko funkcií zľahčovania vrátane easyInOut. Ak ho chcete použiť, importujte ho v hornej časti App.jsx z framer-motion.

importovať { pohyb, pohodaInOut } od"framer-motion";

Potom ho pridajte do objektu prechodu v komponente pohybu:

 počiatočné={{ X: -100, nepriehľadnosť: 0 }}
 animovať={{ X: 0, nepriehľadnosť: 1, prechod: { trvanie: 0.5, ľahkosť: easyInOut } }}
 exit={{ X: -100, nepriehľadnosť: 0, prechod: { trvanie: 0.5, ľahkosť: easyInOut } }}
>
Odoslané!</p>
</motion.div>

Vlastnosť trvania určuje, ako dlho má animácia bežať.

Pre jednoduché animácie použite obyčajný CSS

S aplikáciou Framer Motion môžete robiť oveľa viac, vrátane 3D animácie. Na vytváranie animácií však nie vždy potrebujete knižnicu. Pre jednoduché animácie, ako sú prechody pri prechode myšou, môžete vždy použiť obyčajný CSS.