Jak tworzyć animacje wejścia i wyjścia dla komponentu React za pomocą Framer Motion

Animowanie komponentu React, gdy wchodzi lub wychodzi z ekranu, może być wyzwaniem. Dzieje się tak dlatego, że kiedy ukrywasz komponent, React usuwa go z DOM, co czyni go niedostępnym dla animacji. Kiedy ponownie pokazujesz komponent, React ponownie dodaje go do DOM, co może skutkować nagłym pojawieniem się bez animacji.

Możesz rozwiązać ten problem za pomocą biblioteki animacji, takiej jak Framer Motion.

Co to jest Framer Motion?

Framer Motion to gotowa do produkcji biblioteka animacji dla React. Zapewnia szereg komponentów, haków, klatek kluczowych i niestandardowych funkcji wygładzania do tworzenia i kontrolowania animacji.

Jedną z zalet Framer Motion jest to, że ułatwia tworzenie gładkich i płynnych animacji bez konieczności pisania dużej ilości kodu JavaScript lub wykonywania obliczeń dla każdego przejścia.

Posiada również system zdarzeń, za pomocą którego można uruchamiać animacje na podstawie danych wprowadzanych przez użytkownika, takich jak kliknięcia przycisków i gesty, tworząc interaktywne i dynamiczne interfejsy, które reagują.

Aby zademonstrować, jak używać Framer Motion w React, animujesz komponent, który pojawia się i opuszcza ekran po kliknięciu przycisku.

Tworzenie projektu React

Aby utworzyć projekt React, musisz zainstaluj Node.js i npm (Node Package Manager) na swoim komputerze jeśli nie.

Po zainstalowaniu tych zależności możesz utwórz nowy projekt React za pomocą Vite uruchamiając polecenie przędzy vite w swoim terminalu.

przędza wit

To polecenie utworzy nowy folder ze wszystkimi niezbędnymi plikami i wstępnie zainstalowanymi zależnościami. Przejdź do folderu i uruchom serwer deweloperski za pomocą polecenia Yarn Start.

początek przędzy

Instalowanie Framer Motion w React

Zainstaluj Framer Motion, uruchamiając to polecenie:

npm zainstaluj framer-motion

To polecenie doda Framer Motion jako zależność do twojego projektu.

Animowanie komponentu

Aby animować komponent wchodzący i wychodzący z ekranu w React przy użyciu Framer Motion, musisz owinąć go komponentem ruchu.

Komponent ruchu zapewnia zestaw właściwości służących do animowania wejścia i wyjścia komponentu. Możesz użyć rekwizytów początkowych, animowanych i wyjściowych, aby kontrolować jego widoczność i położenie.

Aby zobaczyć, jak to działa, dodaj następujący kod na górze App.jsx, aby zaimportować komponent ruchu z framer-motion.

import {ruch} z„Ruch ramy”;

Następnie utwórz komponent, który chcesz animować, owijając go komponentem ruchu. W tym przykładzie użyto elementu div, ale możesz użyć dowolnego innego elementu, takiego jak między innymi button, li i p.

import {ruch, AnimatePresence} z„Ruch ramy”
funkcjonowaćAplikacja() {
powrót (
 <>

 początkowy={{ X: -100, nieprzezroczystość: 0 }}
 animacja={{ X: 0, nieprzezroczystość: 1 }}
 wyjście={{ X: -100, nieprzezroczystość: 0 }}
 >
wysłane!</p>
 </motion.div>

 </>
 )
}

Komponent ruchu umożliwia animację elementu div zawierającego tekst „Wysłano!”.

The wstępny, animować, I Wyjście właściwości komponentu ruchu definiują animacje wejścia i wyjścia komponentu. Gdy komponent jest początkowo renderowany, zacznie się od pozycji x równej -100 (poza ekranem po lewej) i krycia równej 0, po czym stanie się niewidoczny.

Właściwość animate określa, w jaki sposób komponent powinien animować, gdy wchodzi na ekran, w tym przypadku poruszając się od x pozycji -100 do pozycji x 0 (wsuwając się od lewej strony) i stopniowo zanikając do krycia 1 i stając się w pełni widoczny.

Na koniec właściwość exit określa sposób animacji komponentu po usunięciu go z ekranu. W takim przypadku komponent zsunie się z ekranu w lewo z pozycją x wynoszącą -100 i stopniowo zaniknie do krycia równego 0.

Musisz także owinąć komponent motion komponentem AnimatePresence od framer-motion do animowanych komponentów, gdy usuniesz je z drzewa React DOM.

Po zdefiniowaniu animacji wejścia i wyjścia możesz dodać przycisk uruchamiający animację. Oto zmodyfikowany komponent z przyciskiem:

import { AnimujObecność, ruch } z„Ruch ramy”;
import { stan użycia } z"reagować";
funkcjonowaćAplikacja() {
konst [isVisible, setIsVisible] = useState (PRAWDA);
konst toggleWidoczność = () => {
 setIsVisible(!isVisible);
 };
powrót (
 <>

 {jest widoczny && ( <ruch.podział
 początkowy={{ X: -100, nieprzezroczystość: 0 }}
 animacja={{ X: 0, nieprzezroczystość: 1 }}
 wyjście={{ X: -100, nieprzezroczystość: 0 }}
 >
wysłane!</p>
 </motion.div>)}
 </AnimatePresence>

 Notyfikować
 </button>
 </>
 )
}

Ten zaktualizowany kod dodaje zmienną stanu o nazwie isVisible za pomocą haka useState. Ta zmienna śledzi, czy komponent powinien być widoczny. Funkcja toggleVisibility przełącza wartość isVisible między prawdą a fałszem po kliknięciu przycisku.

Jesteś teraz warunkowe renderowanie komponentu w zależności od wartości isVisible. Jeśli isVisible ma wartość true, komponent ruchu będzie renderowany wraz z animacją wejścia.

Na koniec dodaj moduł obsługi zdarzenia onClick do przycisku, który wywołuje funkcję toggleVisibility, aktualizuje stan isVisible i wyzwala animację wejścia lub wyjścia komponentu ruchu.

Dodanie funkcji wygładzania

Funkcja wygładzania kontroluje tempo zmian animacji w czasie. Definiuje czas animacji, określając, w jaki sposób animacja powinna przyspieszać lub zwalniać w miarę jej postępu. Bez funkcji wygładzania animacja może renderować się zbyt szybko.

Framer Motion zapewnia kilka funkcji wygładzania do wyboru, w tym easyInOut. Zaimportuj go na górze App.jsx z framer-motion, aby go użyć.

import { ruch, łatwość wejścia } z„Ruch ramy”;

Następnie dodaj go do obiektu przejścia w komponencie ruchu:

 początkowy={{ X: -100, nieprzezroczystość: 0 }}
 animacja={{ X: 0, nieprzezroczystość: 1, przemiana: { czas trwania: 0.5, łatwość: easyInOut } }}
 wyjście={{ X: -100, nieprzezroczystość: 0, przemiana: { czas trwania: 0.5, łatwość: easyInOut } }}
>
wysłane!</p>
</motion.div>

Właściwość Duration określa, jak długo ma trwać animacja.

Użyj zwykłego CSS do prostych animacji

Dzięki Framer Motion możesz zrobić o wiele więcej, w tym animację 3D. Jednak nie zawsze potrzebujesz biblioteki do tworzenia animacji. W przypadku prostych animacji, takich jak przejścia po najechaniu kursorem, zawsze możesz użyć zwykłego CSS.