Jak tworzyć angażujące, reagujące aplikacje natywne z animacjami inicjowanymi przez użytkowników

Animacje powinny sprawiać wrażenie żywych. Możesz stworzyć angażujące doświadczenie użytkownika dla animacji React Native, zmuszając je do reagowania na interakcję użytkownika. Te interakcje mogą pochodzić bezpośrednio od użytkownika lub być uruchamiane pośrednio przez pewne zmiany.

Zrozumienie zdarzeń dotykowych i gestów w React Native

Elementy React Native potrafią reagować na dotyk i gesty użytkownika. React Native Gesture Responder może wykrywać te zdarzenia dotykowe i gesty.

Gesture Responder wyposaża w tę funkcję wiele komponentów w bibliotece React Native, takich jak Przycisk I Dotykowy Nieprzezroczystość elementy reagujące na naciśnięcia lub stuknięcia.

Jednak Gesture Responder wyposaża tylko proste komponenty w proste gesty. Aby obsługiwać i wykrywać bardziej złożone zdarzenia dotykowe, React Native wykorzystuje API PanResponder. Umożliwia tworzenie niestandardowych urządzeń do rozpoznawania gestów, które reagują na bardziej złożone interakcje dotykowe, takie jak szczypanie, obracanie lub przeciąganie.

Interfejs API PanResponder może określić, w jaki sposób Twoja aplikacja zareaguje na te gesty po ich otrzymaniu, konfigurując wywołania zwrotne dla dowolnego określonego zdarzenia dotykowego.

Wyzwalanie animacji za pomocą zdarzeń dotykowych

Zdarzenia dotykowe to najczęstsza forma interakcji użytkownika z aplikacją mobilną. Możesz wybrać wyzwalanie określonych animacji w odpowiedzi na określone zdarzenia związane z dotknięciem przez użytkownika.

Z Animowane API React Native do animowania różnych komponentów, możesz wykrywać zdarzenia dotykowe i pracować z nimi, aby uruchamiać animacje na podstawie interakcji użytkownika.

Na przykład możesz użyć animowanego interfejsu API do animowania krycia pliku Dotykowy Nieprzezroczystość przycisk po naciśnięciu, aby uzyskać efekt pojawiania się:

import Zareaguj, { useState, useRef } z'reagować';
import { Widok, dotykowa nieprzezroczystość, animacja } z„reaguj natywnie”;
konst animowany przycisk = () => {
// Użyj useRef, aby uzyskać dostęp do pliku Animated. Instancja wartości
konst OpacityValue = useRef(nowy Ożywiony. Wartość(1)).aktualny;
konst uchwytNaciśnij = () => {
 Animated.timing (opacityValue, {
 cenić: 0.5,
 czas trwania: 500,
 użyjNativeDriver: PRAWDA,
 }).początek();
 }
powrót (

nieprzezroczystość: Wartośćprzezroczystości }}>

 {/* Twój komponent przycisku */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
eksportdomyślny Animowany Przycisk;

W tym przykładzie wartość krycia jest przykładem Ożywiony. Wartość który reprezentuje krycie przycisku. Po naciśnięciu przycisku, uchwytNaciśnij działa funkcja, która uruchamia animację za pomocą Animated.timing() aby animować krycie przycisku.

Wyzwalanie animacji ze zmianami stanu

Innym podejściem, które możesz zastosować, jest wyzwalanie animacji na podstawie pewnych zmian stanu w aplikacji. Możesz użyć animowanego interfejsu API do wyzwalania animacji w odpowiedzi na wiele zmian stanu, takich jak zmiana położenia, rozmiaru lub zawartości komponentu.

Na przykład możesz użyć stan użycia I UżyjEfekt haki aby wywołać animację taką jak ta:

import Reaguj, { useState, useEffect } z'reagować';
import { Zobacz, animowany, przycisk, tekst } z„reaguj natywnie”;
konst Mój składnik = () => {
konst [fadeAnim, setFadeAnim] = useState(nowy Ożywiony. Wartość(0));
konst [tekst, ustawTekst] = użyjStan('Witaj świecie');
 użyjEfekt(() => {
// Użyj haka useEffect, aby uruchomić animację, gdy stan 'text'
// zmiany
 startAnimacja();
 }, [tekst]);
konst startAnimacja = () => {
 animowany.czas(
 zniknąćAnim,
 {
 cenić: 1,
 czas trwania: 1000,
 użyjNativeDriver: PRAWDA,
 }
 ).początek();
 };
powrót (

nieprzezroczystość: zanikAnim }}>
{tekst}</Text>
 </Animated.View>
„Zmień tekst” onPress={() => setText(„Nowy tekst”)} />
 </View>
 );
};
eksportdomyślny Mój składnik;

W tym przykładzie UżyjEfekt hook uruchomi animację za każdym razem, gdy wartość stanu tekst zmiany. The UżyjEfekt hook przyjmuje jako pierwszy argument funkcję wywołania zwrotnego, którą będzie uruchamiał zawsze, gdy zostaną spełnione zależności określone w drugim argumencie (w tym przypadku [tekst]) zmiana. W środku UżyjEfekt hak, startAnimacja() działa i uruchamia animację zanikania.

Dynamiczne animacje ożywią Twoją aplikację

Włączenie dynamicznych animacji do aplikacji React Native znacznie poprawia wrażenia użytkownika i sprawi, że aplikacja będzie bardziej interaktywna. Dzięki potędze zdarzeń dotykowych, gestów i systemu reagującego na gesty możesz tworzyć płynne i responsywne animacje.

Ponadto, wykorzystując Animated API i zarządzając stanami animacji za pomocą haków, takich jak useState i useEffect, możesz łatwo uruchamiać animacje na podstawie zmian w stanie aplikacji.