Jak přidat animace do aplikací React pomocí aplikace Framer Motion

Animace je klíčovou součástí téměř každé moderní webové aplikace. Je to také jedna z nejobtížnějších částí na správném místě.

Framer Motion je knihovna vytvořená pro React, která usnadňuje animaci komponent.

Jak Framer Motion funguje

Framer Motion používá pro animace komponentu pohybu. Každý prvek HTML/SVG má ekvivalentní pohybovou komponentu, která má rekvizity pro gesta a animace. Například běžný HTML div vypadá takto:

<div>div>

Zatímco ekvivalent filmu Framer Motion vypadá takto:

<pohyb.div>pohyb.div>

Pohybové komponenty podporují an animovat prop, který spouští animace, když se změní jeho hodnoty. Pro složité animace použijte použít Animovat hák s rozsahem ref.

Animace ve Framer Motion

Před použitím aplikace Framer Motion ve svém projektu musíte mít Runtime Node.js a správce balíčků Yarn nainstalovaný na vašem počítači a pochopit, co je React a jak jej používat.

Otevřete terminál a spusťte:

git clone [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
příze
příze voj

Když otevřete localhost: 5173 ve vašem prohlížeči uvidíte toto:

Nyní můžete vytvořit svou první jednoduchou animaci, tlačítko, které roste při najetí myší a zmenšuje se, když kurzor opustí.

Otevři src/App.jsx soubor v editoru kódu. Tento soubor obsahuje funkční komponentu, která vrací fragment React. Importujte Knoflík komponentu, pak ji vykreslit a předat ji text podpěra:

Animované tlačítko</h4>
Přesuňte kurzor myši na tlačítko, abyste viděli efekt</div>
"Hover Me"/>
</section>

Dále upravte Button.jsx soubor a importujte pohyb utility od framer-motion:

import { pohyb } z"framer-motion"

Nyní vyměňte běžný knoflík prvek s pohyb.[prvek] komponent. V tomto případě použijte pohyb.tlačítko komponent.

Poté přidejte a zatímcoHover gesto podepřít a předat objekt hodnot, které by měl Framer Motion animovat, když uživatel najede na tlačítko.

měřítko: 1.1 }}>
{text}
</motion.button>

Tlačítko se nyní animuje, když na něj najedete nebo z něj přesunete ukazatel myši:

Možná se divíte, proč toto demo nepoužívá CSS animace namísto. Framer Motion má oproti CSS výhody, protože se integruje se stavem React a obecně vede k čistšímu kódu.

Dále zkuste něco složitějšího: animaci modalu. v Backdrop.jsx, importujte obslužný program pohybu a vytvořte funkční komponent s při kliknutí a děti rekvizity. Návrat a pohyb.div komponenta s třídou "pozadí" a při kliknutí posluchač v JSX.

vývoznívýchozífunkcePozadí() {
vrátit se (<>

 </motion.div>
 </>)
}

Poté přidejte tři rekvizity, a to: počáteční, animovat, a výstup. Tyto rekvizity představují původní stav komponenty, stav, do kterého by se měla komponenta animovat, a stav, ve kterém by se komponenta měla nacházet po animaci.

Přidat při kliknutí a děti rekvizity k pohyb.div a nastavte dobu trvání přechodu na 0,34 sekundy:

vývoznívýchozífunkcePozadí ({onClick, děti}){
vrátit se (<>
 onClick={onClick}
 className="pozadí"
 počáteční={{ neprůhlednost: 0, backdropFilter:"rozostření (0px)" }}
 animovat={{ neprůhlednost: 1, backdropFilter:"rozostření (3,4px)" }}
 exit={{ neprůhlednost: 0, backdropFilter:"rozostření (0px)"}}
 přechod={{
 doba trvání: 0.34,
 }}
 >
 {děti}
 </motion.div>
 </>)
}

The Pozadí komponenta je obal pro Modální komponent. Kliknutím na pozadí se modal zavře. v Modal.jsx, import pohyb a komponenta Kulisa. Výchozí funkční komponenta přijímá rekvizity: closeModal a text. Vytvořte variantní proměnnou jako objekt.

konst varianty = {
 iniciála: {
 y: "-200%",
 neprůhlednost: 1,
 },
 viditelné: {
 y: "50%",
 přechod: {
 doba trvání: 0.1,
 typ: "jaro",
 tlumení: 32,
 ztuhlost: 500
 }
 },
 výstup: {
 y: "200%",
 }
 }

Vrátí komponentu motion.div obalenou komponentou Backdrop s podpěrou "varianty" ukazující na objekt variant. Varianty jsou sada předdefinovaných stavů animace, ve kterých by se komponenta mohla nacházet.

 onClick={(e) => e.stopPropagation()}
 className="modální"
 varianty={variants}
 počáteční ='počáteční'
 animovat='viditelný'
 exit='výstup'
 >
 {text}
 </motion.div>
</Backdrop>

Dále je třeba přidat funkcionalitu pro zobrazení modalu, když uživatel klikne na tlačítko. Otevři App.jsx soubor a importujte useState Reagovat hák a Modální komponent.

import { useState } z"reagovat";
import Modální z"./components/Modal";

Poté vytvořte a modalOpen stavu s výchozí hodnotou nastavenou na Nepravdivé.

konst [modalOpen, setModalOpen] = useState(Nepravdivé);

Dále definujte funkci closeModal to nastavuje modalOpen na falešné.

funkcecloseModal() {
 setModalOpen(Nepravdivé)
}

V horní části fragmentu React podmíněně vykreslete a Modální komponentu a předat příslušnou text prop s closeModal prop.

{modalOpen && <Modálnítext=„Toto je modální animace s Framer Motion“}

Pak ve druhém sekce prvek, render a knoflík prvek s obslužnou rutinou události onClick, která nastavuje modalOpen na hodnotu false.

 setModalOpen(skutečný)}>Zobrazit modal</button>

Můžete si všimnout, že React odpojí komponentu Modal z DOM bez animace ukončení. Chcete-li to opravit, potřebujete AnimatePresence komponent. Importovat AnimatePresence z framer-motion.

import {AnimatePresence} z'framer-motion';

Nyní zabalte komponentu Modal do komponenty AnimatePresence a nastavte počáteční prop to false a režimu čekat".

Nepravdivé} režim="Počkejte">
 {modalOpen && <Modálnítext=„Toto je modální animace s Framer Motion“closeModal={closeModal} />}
</AnimatePresence>

Komponenta AnimatePresence umožňuje dokončení animací při ukončení, než ji React odpojí od DOM.

Framer Motion může animovat komponenty při posouvání pomocí zatímcoInView podpěra. Otevři ScrollElement.jsxa importovat pohyb utility. Změna div na pohyb.div s třídou "scroll-element".

 počáteční={{ neprůhlednost: 0, měřítko: 0, točit se: 14 }}
 whileInView={{ neprůhlednost: 1, měřítko: 1, točit se: 0 }}
 přechod={{ doba trvání: .8 }}
 viewport={{ jednou: skutečný }}
 className='scroll-element'
>
 Posunout prvek
</motion.div>

The výřez prop ukazuje na objekt, který nastavuje jednou na skutečný. Dále v App.jsx soubor, importujte soubor ScrollElement komponentu a definujte proměnnou scrollElementCount, která obsahuje celočíselnou hodnotu.

nechat scrollElementCount=14;

V posledním sekce element, vytvořte pole se specifickou délkou definovanou pomocí scrollElementCount který mapuje každý prvek pole a generuje komponentu s jedinečným klíčem na základě indexu i.

{[...Array (scrollElementCount)].map((x, i) =><ScrollElementklíč={i} />)}

Nyní, když se vrátíte do prohlížeče, prvky by se měly animovat, když je posunete do zobrazení.

Alternativy k Framer Motion

Framer Motion není jedinou knihovnou animací na trhu. Pokud se vám nelíbí způsob, jakým Framer Motion dělá věci, můžete vyzkoušet jiné knihovny jako Reagovat Spring.

Můžete také použít animace CSS, které všechny moderní prohlížeče nativně podporují, ale používané techniky může být obtížné se naučit a nastavit.

Zlepšení uživatelské zkušenosti s animacemi

Každý uživatel očekává při používání webové aplikace máslově hladký zážitek. Web nebo aplikace bez animací působí staticky a nereagují. Animace zlepšují uživatelský dojem, protože je můžete použít ke sdělování zpětné vazby uživateli, když provádí určitou akci.