Animacje mogą być świetnym sposobem na poprawę doświadczenia użytkownika w aplikacji React. Mogą sprawić, że interakcje będą bardziej płynne, a także mogą zapewnić wizualną informację zwrotną lub zwrócić uwagę na określony element.

Istnieje wiele sposobów pracy z animacjami CSS za pomocą React, od rozwiązania natywnego po biblioteki innych firm.

Dlaczego warto używać animacji w React?

Istnieje wiele powodów, dla których warto używać animacji w aplikacji React. Niektóre z najczęstszych powodów to:

  • Sprawienie, by interakcje były bardziej naturalne. Animacje mogą sprawić, że interakcje użytkowników będą bardziej naturalne i płynne. Na przykład, jeśli używasz komponentu przełączania, możesz animować przycisk przełączania między stanami „włączony” i „wyłączony”. Innym przykładem są paski postępu, możesz utwórz animowany pasek postępu dla stron Twojej aplikacji reagującej.
  • Dostarczanie wizualnej informacji zwrotnej. Animacje mogą dostarczać użytkownikowi wizualnej informacji zwrotnej. Na przykład, jeśli użytkownik kliknie przycisk, możesz chcieć animować przycisk, aby wskazać, że aplikacja zarejestrowała to działanie.
    instagram viewer
  • Kierowanie uwagą użytkownika. Animacje mogą skierować uwagę użytkownika na określony element. Na przykład, jeśli masz modalne okno dialogowe, które pojawia się na ekranie, możesz użyć animacji, aby zwrócić na nie uwagę użytkownika.
  • Tworzenie poczucia pilności.Animacje mogą stworzyć poczucie pilności lub ważności. Na przykład, jeśli masz komponent czasomierza, który odlicza czas, możesz użyć animacji, aby odzwierciedlić pilność w miarę zbliżania się terminu.

Istnieje kilka sposobów dodawania animacji do komponentów React. Trzy, o których dowiesz się tutaj, to animacje w stylu wbudowanym, biblioteka reakcji-animacji i biblioteka reakcji-prostych-animacji.

Zacznij od tworzenie podstawowej aplikacji reagującej, a następnie postępuj zgodnie z wybraną metodą.

Metoda 1: Korzystanie z animacji stylów wbudowanych

Załóżmy na przykład, że chcesz animować komponent w taki sposób, aby pojawiał się po kliknięciu przycisku. Możesz to zrobić za pomocą następującego kodu:

import Reaguj, { Komponent } z 'reagować';
klasaZanikanierozciąga sięCzęść{
konstruktor(rekwizyty) {
Super(rekwizyty);


Tenstan = {
 jest widoczny: FAŁSZ
 };
 }


renderowanie() {
konst style = {
nieprzezroczystość: Ten.państwo.jest widoczny? 1: 0,
 przemiana: 'krycie 2s'
 };


powrót (
<dz>
<div style={style}>
 Witaj świecie!
</div>
<button onClick={this.toggleVisibility}>
 Przełącznik
</button>
</div>
 );
 }


toggleWidoczność = () => {
Ten.setState (prevState => ({
jest widoczny: !poprzedni stan.jest widoczny
 }));
 }
}
eksportdomyślny Zanikanie;

W tym przykładzie obiekt stylu ma właściwości krycia i przejścia. Krycie wynosi 0, gdy składnik nie jest widoczny, i 1, gdy jest. Właściwość przejścia to „nieprzezroczystość 2s”, co spowoduje zmianę krycia w ciągu dwóch sekund, gdy się zmieni.

Przycisk przełącza widoczność komponentu. Gdy ktoś kliknie przycisk, zmienna stanu isVisible aktualizuje się, a komponent będzie się pojawiał lub znikał w zależności od jego bieżącego stanu.

Metoda 2: Korzystanie z biblioteki reakcji-animacji

Innym sposobem dodawania animacji do komponentów Reacta jest użycie biblioteki, takiej jak react-animations. Ta biblioteka zawiera zestaw predefiniowanych animacji, których możesz użyć w swoich komponentach React.

Aby użyć animacji reakcji, musisz najpierw zainstalować bibliotekę:

np zainstalować reaguj-animacje --ratować

Musisz także zainstalować aphrodite, która jest zależna od animacji reakcji:

np zainstalować afrodyta --ratować

Po zainstalowaniu bibliotek możesz zaimportować animacje, których chcesz użyć:

import { pojawiać się i znikać } z „reaguj na animacje”;

Następnie możesz użyć animacji w swoich komponentach:

import Reaguj, { Komponent } z 'reagować';
import { Arkusz stylów, css} z „afrodyta”;
import { pojawiać się i znikać } z „reaguj na animacje”;
konst style = StyleSheet.create({
 zanikanie: {
 animacjaNazwa: zanikanie,
 animacjaCzas trwania: '2s'
 },
 zanikanie: {
 animacjaNazwa: zanikanie,
 animacjaCzas trwania: '2s'
 }
});


klasaZanikanierozciąga sięCzęść{
konstruktor(rekwizyty) {
Super(rekwizyty);


Tenstan = {
 jest widoczny: FAŁSZ
 };
 }


renderowanie() {
konst nazwa klasy = Ten.state.isVisible? css (style.fadeIn): css (style.fadeOut);


powrót (
<dz>
<div nazwa klasy={nazwa klasy}>
 Witaj świecie!
</div>
<button onClick={this.toggleVisibility}>
 Przełącznik
</button>
</div>
 );
 }


toggleWidoczność = () => {
Ten.setState (prevState => ({
jest widoczny: !poprzedni stan.jest widoczny
 }));
 }
}
eksportdomyślny Zanikanie;

Ten przykład zaczyna się od zaimportowania animacji fadeIn i fadeOut z biblioteki react-animations. Następnie definiuje obiekt stylów z animacjami fadeIn i fadeOut, a także animacjąDuration ustawioną na dwie sekundy.

Przycisk przełącza widoczność komponentu. Gdy ktoś go kliknie, zmienna stanu isVisible zostanie zaktualizowana, a komponent pojawi się lub zniknie w zależności od jego bieżącego stanu.

Metoda 3: Korzystanie z biblioteki react-simple-animate

Biblioteka react-simple-animate zapewnia prosty sposób dodawania animacji do komponentów React. Oferuje deklaratywne API, które ułatwia definiowanie złożonych animacji.

Aby korzystać z biblioteki, musisz ją najpierw zainstalować:

np zainstalować Reaguj-prosto-ożywiaj --ratować

Następnie możesz użyć go w swoich komponentach:

import Reaguj, { Komponent } z 'reagować';
import { Animuj, Animuj klatki kluczowe} z „reaguj — proste — animuj”;
klasaAplikacjarozciąga sięCzęść{
 renderowanie() {
powrót (
<dz>
<Animować
 grać
początek={{
 krycie: 0
 }}
koniec={{
 nieprzezroczystość: 1
 }}
>
<dz>
 Witaj świecie!
</div>
</Animate>
<Animuj klatki kluczowe
 grać
 czas trwania={2}
 klatki kluczowe={[
 { przezroczystość: 0, transformacja: 'przetłumaczX(-100px)' },
 { przezroczystość: 1, transformacja: 'przetłumaczX(0px)' }
 ]}
>
<dz>
 Witaj świecie!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
eksportdomyślny Aplikacja;

The Animować komponent zanika w elemencie div. Zaczyna się od przezroczystości 0, a kończy przez krycie 1. Właściwość play jest ustawiona na true, co spowoduje, że animacja będzie odtwarzana automatycznie po zamontowaniu komponentu.

The Animuj klatki kluczowe komponent animuje element div przez dwie sekundy. Tablica klatek kluczowych określa stan początkowy i końcowy animacji. Pierwsza klatka kluczowa ma przezroczystość równą 0 i wartość translateX -100 pikseli. Druga klatka kluczowa ma przezroczystość równą 1 i wartość translateX równą 0 pikseli.

Zwiększ zaangażowanie użytkowników dzięki animacjom

Teraz znasz już kilka sposobów wykorzystania animacji w aplikacji React. Możesz użyć animacji, aby zwiększyć zaangażowanie użytkowników w swoją aplikację.

Możesz na przykład użyć animacji, aby nagrodzić użytkownika za wykonanie zadania. Może to być coś tak prostego, jak krótka animacja „pokrętła” lub bardziej złożona animacja odtwarzana, gdy użytkownik ukończy poziom w grze.

Możesz również wdrożyć swoją aplikację React w Internecie za darmo za pomocą usług takich jak strony Github lub Heroku.