Jak vytvořit vstupní a výstupní animace pro komponentu React pomocí Framer Motion

Animace komponenty React při vstupu nebo výstupu na obrazovku může být problém. Je to proto, že když komponentu skryjete, React ji odebere z DOM, takže nebude dostupná pro animaci. Když komponentu znovu zobrazíte, React ji znovu přidá do DOM, což může mít za následek náhlý vzhled bez animace.

Tento problém můžete vyřešit pomocí knihovny animací, jako je Framer Motion.

Co je to Framer Motion?

Framer Motion je produkční animační knihovna pro React. Poskytuje řadu komponent, háků, klíčových snímků a vlastních funkcí náběhu/doběhu pro vytváření a ovládání animací.

Jednou z výhod aplikace Framer Motion je, že usnadňuje vytváření plynulých a plynulých animací, aniž byste museli psát velké množství kódu JavaScript nebo zjišťovat výpočty pro každý přechod.

Má také systém událostí, který můžete použít ke spouštění animací na základě vstupu uživatele, jako jsou kliknutí na tlačítka a gesta, a vytvářet tak interaktivní a dynamická rozhraní, která reagují.

Abyste předvedli, jak používat Framer Motion v Reactu, animujete komponentu, která vstupuje na obrazovku a opouští ji, když kliknete na tlačítko.

Vytvoření projektu React

Chcete-li vytvořit projekt React, budete muset nainstalujte Node.js a npm (Node Package Manager) na váš počítač pokud ne.

Jakmile budete mít tyto závislosti nainstalovány, můžete vytvořte nový projekt React pomocí Vite spuštěním příkazu yarn vite ve vašem terminálu.

příze vite

Tento příkaz vytvoří novou složku se všemi potřebnými soubory a předinstalovanými závislostmi. Přejděte do složky a spusťte vývojový server pomocí příkazu yarn start.

začátek příze

Instalace Framer Motion v React

Nainstalujte Framer Motion spuštěním tohoto příkazu:

npm nainstalujte framer-motion

Tento příkaz přidá Framer Motion jako závislost do vašeho projektu.

Animace komponenty

Chcete-li animovat komponentu při vstupu a výstupu z obrazovky v React pomocí Framer Motion, musíte ji zabalit do pohybové komponenty.

Komponenta pohybu poskytuje sadu vlastností pro animaci vstupu a výstupu komponenty. K ovládání jeho viditelnosti a polohy můžete použít počáteční, animované a výstupní podpěry.

Chcete-li to vidět v akci, přidejte následující kód do horní části App.jsx a importujte komponentu pohybu z framer-motion.

import { pohyb } z"framer-motion";

Dále vytvořte komponentu, kterou chcete animovat, tím, že ji obalíte komponentou pohybu. Tento příklad používá prvek div, ale můžete použít jakýkoli jiný prvek, který chcete, například button, li a p.

import { motion, AnimatePresence } z"framer-motion"
funkceAplikace() {
vrátit se (
 <>

 počáteční={{ X: -100, neprůhlednost: 0 }}
 animovat={{ X: 0, neprůhlednost: 1 }}
 exit={{ X: -100, neprůhlednost: 0 }}
 >
Odesláno!</p>
 </motion.div>

 </>
 )
}

Komponenta pohybu umožňuje animovat prvek div obsahující text "Odesláno!".

The počáteční, animovat, a výstup vlastnosti komponenty pohybu definují animace vstupu a výstupu komponenty. Když je komponenta původně vykreslena, začne s pozicí x -100 (mimo obrazovku vlevo) a neprůhledností 0 a stane se neviditelnou.

Vlastnost animate definuje, jak se má komponenta animovat, když vstoupí na obrazovku, v tomto případě se pohybuje od x pozice -100 až pozice x 0 (zasouvání zleva) a postupně slábnoucí do opacity 1 a plně viditelné.

Nakonec vlastnost exit definuje, jak se má komponenta animovat, když ji odstraníte z obrazovky. V tomto případě se komponenta posune z obrazovky doleva s pozicí x -100 a postupně zmizí na neprůhlednost 0.

Musíte také zabalit komponentu pohybu komponentou AnimatePresence z framer-motion do animovat komponenty, když je odstraníte ze stromu React DOM.

Nyní, když jste definovali vstupní a výstupní animace, můžete přidat tlačítko pro spuštění animace. Zde je upravená komponenta s tlačítkem:

import { AnimatePresence, motion } z"framer-motion";
import { useState } z"reagovat";
funkceAplikace() {
konst [isVisible, setIsVisible] = useState(skutečný);
konst přepnout Viditelnost = () => {
 setIsVisible(!isVisible);
 };
vrátit se (
 <>

 {isVisible && ( <pohyb.div
 počáteční={{ X: -100, neprůhlednost: 0 }}
 animovat={{ X: 0, neprůhlednost: 1 }}
 exit={{ X: -100, neprůhlednost: 0 }}
 >
Odesláno!</p>
 </motion.div>)}
 </AnimatePresence>

 Oznámit
 </button>
 </>
 )
}

Tento aktualizovaný kód přidává stavovou proměnnou nazvanou isVisible pomocí háčku useState. Tato proměnná sleduje, zda má být komponenta viditelná. Funkce toggleVisibility přepíná hodnotu isVisible mezi true a false, když kliknete na tlačítko.

Jsi teď podmíněné vykreslení komponenty v závislosti na hodnotě isVisible. Pokud je hodnota isVisible true, komponenta pohybu se vykreslí s animací vstupu.

Nakonec přidejte obslužnou rutinu události onClick k tlačítku, které volá funkci toggleVisibility, aktualizuje stav isVisible a spouští animaci vstupu nebo výstupu komponenty pohybu.

Přidání funkce uvolňování

Funkce náběhu/doběhu řídí rychlost změny animace v průběhu času. Definuje načasování animace určením, jak se má animace zrychlit nebo zpomalit, jak postupuje. Bez funkce náběhu/doběhu se může animace vykreslovat příliš rychle.

Framer Motion nabízí několik funkcí náběhu/doběhu, ze kterých si můžete vybrat, včetně easyInOut. Chcete-li jej použít, importujte jej v horní části App.jsx z framer-motion.

import { pohyb, pohodaInOut } z"framer-motion";

Poté jej přidejte do objektu přechodu v komponentě pohybu:

 počáteční={{ X: -100, neprůhlednost: 0 }}
 animovat={{ X: 0, neprůhlednost: 1, přechod: { doba trvání: 0.5, ulehčit: easyInOut } }}
 exit={{ X: -100, neprůhlednost: 0, přechod: { doba trvání: 0.5, ulehčit: easyInOut } }}
>
Odesláno!</p>
</motion.div>

Vlastnost trvání určuje, jak dlouho má animace běžet.

Pro jednoduché animace použijte prostý CSS

S Framer Motion můžete dělat mnohem víc, včetně 3D animace. Ne vždy však k vytváření animací potřebujete knihovnu. Pro jednoduché animace, jako jsou přechody po najetí, můžete vždy použít obyčejný CSS.