Hogyan készítsünk vonzó React natív alkalmazásokat felhasználó által kezdeményezett animációkkal

Az animációknak élőnek kell lenniük. Lebilincselő felhasználói élményt teremthet a React Native animációkhoz, ha reagálnak a felhasználó interakciójára. Ezek az interakciók közvetlenül a felhasználótól származhatnak, vagy bizonyos változtatások révén közvetett módon is beindulhatnak.

Az érintési események és gesztusok megértése a React Native alkalmazásban

A React Native elemek képesek reagálni a felhasználó érintésére és gesztusaira. A React Native Gesture Responder képes észlelni ezeket az érintési eseményeket és gesztusokat.

A Gesture Responder a React Native könyvtáron belül sok összetevőt felszerel ezzel a funkcióval, például Gomb és Touchable Opacity nyomásra vagy koppintásra reagáló alkatrészek.

A Gesture Responder azonban csak az egyszerű alkatrészeket szereli fel egyszerű gesztusokkal. Az összetettebb érintési események kezelésére és észlelésére a React Native a PanResponder API-t használja. Lehetővé teszi egyéni gesztusfelismerőek létrehozását, amelyek reagálnak az összetettebb érintési interakciókra, például a csípésre, elforgatásra vagy húzásra.

A PanResponder API meg tudja határozni, hogy az alkalmazás hogyan reagáljon ezekre a gesztusokra, amikor megkapja azokat, azáltal, hogy visszahívásokat állít be bármely konkrét érintési eseményhez.

Animációk kiváltása érintési eseményekkel

Az érintéses események a felhasználók mobilalkalmazással való interakciójának leggyakoribb formája. Dönthet úgy, hogy bizonyos animációkat indít el adott felhasználói érintési események hatására.

Val vel A React Native Animated API a különböző összetevők animálásához, érzékelheti és kezelheti az érintési eseményeket, hogy a felhasználói interakciókon alapuló animációkat indítson el.

Használhatja például az Animált API-t az a. átlátszatlanságának animálására Touchable Opacity gombot, ha megnyomja, hogy beszürkülési effektust hozzon létre:

import React, { useState, useRef } tól től'reagál';
import { Nézet, TouchableOpacity, Animált } tól től"react-native";
const AnimatedButton = () => {
// Használja a useRef-et az Animált eléréséhez. Értékpéldány
const opacityValue = useRef(új Élénk. Érték(1)).jelenlegi;
const fogantyúNyomja meg az = () => {
 Animated.timing (opacityValue, {
 értékel: 0.5,
 időtartam: 500,
 useNativeDriver: igaz,
 }).Rajt();
 }
Visszatérés (

átlátszatlanság: opacityValue }}>

 {/* A gomb összetevője */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
exportalapértelmezett AnimatedButton;

Ebben a példában a opacityValue példája Élénk. Érték amely a gomb átlátszatlanságát jelzi. Ha megnyomja a gombot, a fogantyúNyomja meg funkció fut, amely animációt indít el Animated.timing() a gomb átlátszatlanságának animálásához.

Animációk kiváltása állapotváltozással

Egy másik lehetőség, hogy animációkat indítson el az alkalmazáson belüli bizonyos állapotváltozások alapján. Az Animált API segítségével animációkat indíthat el, válaszul számos állapotváltozásra, például egy összetevő pozíciójának, méretének vagy tartalmának változására.

Például használhatja a useState és useEffect horgok az ehhez hasonló animáció elindításához:

import React, { useState, useEffect } tól től'reagál';
import { Nézet, animált, gomb, szöveg } tól től"react-native";
const MyComponent = () => {
const [fadeAnim, setFadeAnim] = useState(új Élénk. Érték(0));
const [szöveg, setText] = useState('Helló Világ');
 useEffect(() => {
// A useEffect hook segítségével indítsa el az animációt, amikor „szöveg” állapotban van
// változtatások
 startAnimation();
 }, [szöveg]);
const startAnimation = () => {
 Animated.timing(
 fadeAnim,
 {
 értékel: 1,
 időtartam: 1000,
 useNativeDriver: igaz,
 }
 ).Rajt();
 };
Visszatérés (

átlátszatlanság: fadeAnim }}>
{szöveg}</Text>
 </Animated.View>
"Szöveg módosítása" onPress={() => setText("Új szöveg")} />
 </View>
 );
};
exportalapértelmezett MyComponent;

Ebben a példában a useEffect hook indítja el az animációt, amikor az állapot értéke szöveg változtatások. A useEffect A hook egy visszahívási függvényt vesz fel első argumentumként, amelyet akkor fut le, amikor a második argumentumban megadott függőségek (ebben az esetben, [szöveg]) változás. Benne useEffect horog, startAnimation() lefuttatja és elindítja a fade animációt.

A dinamikus animációk felfrissítik az alkalmazást

Dinamikus animációk beépítése a React Native alkalmazásba nagyban javítja a felhasználói élményt, és interaktívabbá teszi az alkalmazást. Az érintési események, gesztusok és a kézmozdulatokra reagáló rendszer segítségével gördülékeny és érzékeny animációkat hozhat létre.

Ezenkívül az Animated API kihasználásával és az animációs állapotok olyan hookkal való kezelésével, mint a useState és a useEffect, könnyedén indíthat animációkat az alkalmazás állapotában bekövetkezett változások alapján.