Cum să creați aplicații native React captivante cu animații inițiate de utilizator

Animațiile ar trebui să pară vii. Puteți crea o experiență de utilizator captivantă pentru animațiile React Native, punându-le să răspundă la interacțiunea unui utilizator. Aceste interacțiuni pot fi direct de la utilizator sau pot fi puse în mișcare indirect prin anumite modificări.

Înțelegerea evenimentelor și gesturilor tactile în React Native

Elementele React Native sunt capabile să răspundă la atingere și la gesturi ale unui utilizator. React Native Gesture Responder poate detecta aceste evenimente și gesturi de atingere.

Gesture Responder echipează o mulțime de componente din biblioteca React Native cu această caracteristică, cum ar fi Buton și Opacitate Atingabilă componente care răspund la apăsări sau atingeri.

Gesture Responder, totuși, echipa doar componente simple cu gesturi simple. Pentru a gestiona și detecta evenimente tactile mai complexe, React Native utilizează API-ul PanResponder. Vă permite să creați dispozitive de recunoaștere a gesturilor personalizate care răspund la interacțiunile tactile mai complexe, cum ar fi ciupirea, rotirea sau tragerea.

API-ul PanResponder poate defini modul în care aplicația dvs. va răspunde la aceste gesturi la primirea lor, prin configurarea apelurilor pentru oricare dintre evenimentele tactile specifice.

Declanșarea animațiilor cu evenimente tactile

Evenimentele tactile sunt cea mai comună formă de interacțiune pe care o poate avea un utilizator cu o aplicație mobilă. Puteți alege să declanșați anumite animații ca răspuns la anumite evenimente de atingere ale utilizatorului.

Cu API-ul animat React Native pentru animarea diferitelor componente, puteți detecta și lucra cu evenimente tactile pentru a declanșa animații bazate pe interacțiunile utilizatorului.

De exemplu, puteți utiliza API-ul animat pentru a anima opacitatea unui Opacitate Atingabilă butonul când este apăsat pentru a crea un efect de fade-in:

import Reacționează, { useState, useRef } din'reacţiona';
import { View, TouchableOpacity, Animated } din„reacționează-nativ”;
const AnimatedButton = () => {
// Folosiți useRef pentru a accesa animația. Instanță de valoare
const opacitateValoare = useRef(nou Animat. Valoare(1)).actual;
const handlePress = () => {
 Animated.timing (opacityValue, {
 a valorifica: 0.5,
 durată: 500,
 useNativeDriver: Adevărat,
 }).start();
 }
întoarcere (

opacitate: opacityValue }}>

 {/* Componenta ta butonului */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
exportMod implicit Buton animat;

În acest exemplu, opacitateValoare este un exemplu de Animat. Valoare care reprezintă opacitatea butonului. Când apăsați butonul, mânerApăsați funcția rulează, care declanșează o animație folosind Animated.timing() pentru a anima opacitatea butonului.

Declanșarea animațiilor cu modificări de stare

O altă abordare pe care o puteți lua este să declanșați animații bazate pe anumite schimbări de stare din aplicația dvs. Puteți utiliza API-ul animat pentru a declanșa animații ca răspuns la multe schimbări de stare, cum ar fi o modificare a poziției, dimensiunii sau conținutului unei componente.

De exemplu, ai putea folosi useState și useEffect cârlige pentru a declanșa o animație ca aceasta:

import Reacționează, { useState, useEffect } din'reacţiona';
import { Vizualizare, Animat, Buton, Text } din„reacționează-nativ”;
const MyComponent = () => {
const [fadeAnim, setFadeAnim] = useState(nou Animat. Valoare(0));
const [text, setText] = useState('Salut Lume');
 useEffect(() => {
// Folosiți cârligul useEffect pentru a declanșa animația când starea „text”.
// schimbări
 startAnimation();
 }, [text]);
const startAnimation = () => {
 Timing.animat(
 fadeAnim,
 {
 a valorifica: 1,
 durată: 1000,
 useNativeDriver: Adevărat,
 }
 ).start();
 };
întoarcere (

opacitate: fadeAnim }}>
{text}</Text>
 </Animated.View>
„Schimbați textul” onPress={() => setText(„Text nou”)} />
 </View>
 );
};
exportMod implicit MyComponent;

În acest exemplu, useEffect hook va declanșa animația ori de câte ori valoarea de stare a text schimbări. The useEffect hook ia o funcție de apel invers ca prim argument, pe care o va rula ori de câte ori dependențele specificate în al doilea argument (în acest caz, [text]) Schimbare. În interiorul useEffect cârlig, startAnimation() rulează și declanșează animația de estompare.

Animațiile dinamice îți vor anima aplicația

Încorporarea animațiilor dinamice în aplicația dvs. React Native îmbunătățește considerabil experiența utilizatorului și va face aplicația mai interactivă. Cu puterea evenimentelor tactile, a gesturilor și a sistemului de răspuns prin gesturi, puteți crea animații fluide și receptive.

De asemenea, utilizând API-ul animat și gestionând stările de animație cu cârlige precum useState și useEffect, puteți declanșa cu ușurință animații bazate pe modificările stării aplicației dvs.