Dowiedz się, jak dodawać proste animacje do aplikacji React przy minimalnym nakładzie pracy związanej z kodowaniem.

Animacja jest kluczowym elementem niemal każdej nowoczesnej aplikacji internetowej. Jest to również jedna z najtrudniejszych części do prawidłowego wykonania.

Framer Motion to biblioteka zbudowana dla React, która ułatwia animowanie komponentów.

Jak działa Framer Motion

Framer Motion używa składnika ruchu do animacji. Każdy element HTML/SVG ma równoważny komponent ruchu, który ma rekwizyty dla gestów i animacji. Na przykład zwykły div HTML wygląda tak:

<dz>dz>

Podczas gdy odpowiednik Framer Motion wygląda tak:

<ruch.podział>ruch.podział>

Komponenty ruchu obsługują animować prop, który uruchamia animacje, gdy zmieniają się jego wartości. W przypadku złożonych animacji użyj użyj Animacji hak z lunetą ref.

Animacja w Framer Motion

Przed użyciem Framer Motion w swoim projekcie musisz mieć Środowisko uruchomieniowe Node.js oraz menedżera pakietów Yarn zainstalowanego na komputerze i zrozumieć, czym jest React i jak go używać.

instagram viewer

Możesz przeglądać i pobierać kod źródłowy tego projektu z jego strony Repozytorium GitHub. Użyj pliki startowe branch jako szablon startowy do naśladowania wraz z tym samouczkiem lub pliki końcowe branch dla pełnego demo. Możesz również zobaczyć projekt w akcji za pośrednictwem tego demo na żywo.

Otwórz swój terminal i uruchom:

git clone [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-aplikacja
przędza
rozwinięcie przędzy

Kiedy otwierasz lokalny host: 5173 w przeglądarce zobaczysz to:

Możesz teraz stworzyć swoją pierwszą prostą animację, przycisk, który rośnie po najechaniu myszką i kurczy się, gdy kursor opuszcza.

Otworzyć src/Aplikacja.jsx plik w edytorze kodu. Ten plik zawiera komponent funkcjonalny, który zwraca fragment React. Importuj Przycisk komponent, a następnie wyrenderuj go, przekazując plik a tekst rekwizyt:


Animowany przycisk</h4>
Najedź kursorem myszy na przycisk, aby zobaczyć efekt</div>

Następnie edytuj Przycisk.jsx zarchiwizuj i zaimportuj plik ruch użyteczność od ruch ramki:

import {ruch} z„Ruch ramki”

Teraz wymień zwykłe przycisk element z ruch.[element] część. W takim przypadku użyj tzw przycisk.ruchu część.

Następnie dodaj A podczas gdyHover gest i przekaż obiekt wartości, do których Framer Motion powinien animować, gdy użytkownik najedzie kursorem na przycisk.

skala: 1.1 }}>
{tekst}
</motion.button>

Przycisk będzie teraz animowany, gdy przesuniesz nad niego lub poza niego wskaźnik myszy:

Być może zastanawiasz się, dlaczego to demo nie działa Animacje CSS Zamiast. Framer Motion ma przewagę nad CSS, ponieważ integruje się ze stanem React i generalnie skutkuje czystszym kodem.

Następnie spróbuj czegoś bardziej złożonego: animuj modal. W Tło.jsx, zaimportuj narzędzie ruchu i utwórz komponent funkcjonalny za pomocą na kliknięcie I dzieci rekwizyty. powrót ruch.podział komponent z klasą „tło” i na kliknięcie słuchacz w JSX.

eksportdomyślnyfunkcjonowaćZasłona() {
powrót (<>

 </motion.div>
 </>)
}

Następnie dodaj trzy rekwizyty, a mianowicie: wstępny, animować, I Wyjście. Te rekwizyty reprezentują odpowiednio oryginalny stan komponentu, stan, do którego komponent powinien być animowany, oraz stan, w jakim komponent powinien się znajdować po animacji.

Dodać na kliknięcie I dzieci rekwizyty do ruch.podział i ustaw czas trwania przejścia na 0,34 sekundy:

eksportdomyślnyfunkcjonowaćZasłona ({onClick, dzieci}){
powrót (<>
 onClick={onClick}
 nazwa klasy="zasłona"
 początkowy={{ nieprzezroczystość: 0, filtr tła:„rozmycie (0px)” }}
 animacja={{ nieprzezroczystość: 1, filtr tła:„rozmycie (3,4 piks.)” }}
 wyjście={{ nieprzezroczystość: 0, filtr tła:„rozmycie (0px)”}}
 przejście={{
 czas trwania: 0.34,
 }}
 >
 {dzieci}
 </motion.div>
 </>)
}

The Zasłona komponent jest opakowaniem dla Modalny część. Kliknięcie tła powoduje odrzucenie modalu. W Modal.jsx, import ruch i komponent Tło. Domyślny komponent funkcjonalny akceptuje rekwizyty: zamknijModalne I tekst. Utwórz zmienną wariantu jako obiekt.

konst warianty = {
 wstępny: {
 y: "-200%",
 nieprzezroczystość: 1,
 },
 widoczny: {
 y: "50%",
 przemiana: {
 czas trwania: 0.1,
 typ: "wiosna",
 tłumienie: 32,
 sztywność: 500
 }
 },
 Wyjście: {
 y: "200%",
 }
 }

Zwróć komponent motion.div opakowany w komponent Backdrop z właściwością „variants” wskazującą na obiekt wariantów. Warianty to zestaw predefiniowanych stanów animacji, w których może znajdować się komponent.


 onClick={(e) => e.stopPropagation()}
 nazwa klasy="modalny"
 warianty={warianty}
 inicjał='wstępny'
 animować='widoczny'
 wyjście='Wyjście'
 >
 {tekst}
 </motion.div>
</Backdrop>

Następnie musisz dodać funkcjonalność wyświetlającą modal, gdy użytkownik kliknie przycisk. Otworzyć Aplikacja.jsx zarchiwizuj i zaimportuj plik stan użycia Zareaguj hak i Modalny część.

import { stan użycia } z"reagować";
import Modalny z„./komponenty/Modalne”;

Następnie utwórz modalneOtwarte stan z wartością domyślną ustawioną na FAŁSZ.

konst [modalOpen, setModalOpen] = useState(FAŁSZ);

Następnie zdefiniuj funkcję zamknijModalne to ustawia modalneOtwarte za fałszywe.

funkcjonowaćzamknijModalne() {
 setModalOpen(FAŁSZ)
}

U góry fragmentu React warunkowo wyrenderuj a Modalny komponent i przekazać odpowiedni tekst prop z właściwością closeModal.

{modalneOtwórz && <Modalnytekst=„To jest modal animowany za pomocą Framer Motion”}

Następnie w drugim Sekcja element, renderuj a przycisk element z procedurą obsługi zdarzeń onClick, która ustawia wartość modalOpen na false.

Możesz zauważyć, że React odmontowuje komponent Modal z DOM bez animacji wyjścia. Aby to naprawić, potrzebujesz AnimujObecność część. Importuj AnimatePresence z ruch ramki.

import {Animowana obecność} z„Ruch ramy”;

Teraz zawiń komponent Modal w komponencie AnimatePresence i ustaw wstępny prop na false i tryb czekać".

FAŁSZ} tryb ="Czekać">
 {modalneOtwórz && <Modalnytekst=„To jest modal animowany za pomocą Framer Motion”zamknijModalne={closeModal} />}
</AnimatePresence>

Komponent AnimatePresence umożliwia ukończenie animacji wyjścia, zanim React odmontuje go z DOM.

Framer Motion może animować komponenty podczas przewijania za pomocą podczas gdyInView rekwizyt. Otworzyć ScrollElement.jsxi zaimportuj plik ruch pożytek. Zmiana dz Do ruch.podział z klasą „element przewijania”.

 początkowy={{ nieprzezroczystość: 0, skala: 0, obracać się: 14 }}
 whileInView={{ nieprzezroczystość: 1, skala: 1, obracać się: 0 }}
 przejście={{ czas trwania: .8 }}
 rzutnia = {{ raz: PRAWDA }}
 nazwa klasy=„element przewijania”
>
 Element przewijania
</motion.div>

The rzutnia prop wskazuje na obiekt, który ustawia raz Do PRAWDA. Dalej, w Aplikacja.jsx plik, zaimportuj plik Element przewijania komponent i zdefiniuj zmienną scrollElementCount, która przechowuje wartość całkowitą.

pozwalać przewińLiczbęElementów=14;

W ostatnim Sekcja element, utwórz tablicę o określonej długości zdefiniowanej przez przewińLiczbęElementów który odwzorowuje każdy element tablicy i generuje komponent z unikalnym kluczem na podstawie indeksu I.

{[...Tablica (scrollElementCount)].map((x, ja) =><Element przewijaniaklucz={I} />)}

Teraz, wracając do przeglądarki, elementy powinny animować, gdy przewijasz je do widoku.

Alternatywy dla Framer Motion

Framer Motion nie jest jedyną biblioteką animacji na rynku. Jeśli nie podoba ci się sposób, w jaki Framer Motion robi rzeczy, możesz wypróbować inne biblioteki, takie jak Reaguj na wiosnę.

Możesz także użyć animacji CSS, które wszystkie nowoczesne przeglądarki obsługują natywnie, ale stosowane techniki mogą być trudne do nauczenia się i skonfigurowania.

Poprawa doświadczenia użytkownika dzięki animacjom

Każdy użytkownik oczekuje płynnego korzystania z aplikacji internetowej. Witryna lub aplikacja bez animacji wydaje się statyczna i nie reaguje. Animacje poprawiają wrażenia użytkownika, ponieważ można ich używać do przekazywania informacji zwrotnej użytkownikowi, gdy wykonuje on określone działanie.