Kā izveidot saistošas ​​React vietējās lietotnes ar lietotāja iniciētām animācijām

Animācijām vajadzētu justies dzīvām. Varat izveidot saistošu lietotāja pieredzi React Native animācijām, liekot tām reaģēt uz lietotāja mijiedarbību. Šīs mijiedarbības var notikt tieši no lietotāja vai netieši, veicot noteiktas izmaiņas.

Izpratne par pieskāriena notikumiem un žestiem programmā React Native

React Native elementi spēj reaģēt uz lietotāja pieskārienu un žestiem. React Native Gesture Responder var noteikt šos pieskārienu notikumus un žestus.

Gesture Responder aprīko daudzus komponentus React Native bibliotēkā ar šo funkciju, piemēram, Poga un Pieskāriena necaurredzamība sastāvdaļas, kas reaģē uz nospiešanu vai pieskārienu.

Tomēr žestu atbildētājs aprīko tikai vienkāršus komponentus ar vienkāršiem žestiem. Lai apstrādātu un noteiktu sarežģītākus pieskāriena notikumus, React Native izmanto PanResponder API. Tas ļauj izveidot pielāgotus žestu atpazinējus, kas reaģē uz sarežģītākām pieskārienu mijiedarbībām, piemēram, saspiešanu, pagriešanu vai vilkšanu.

PanResponder API var definēt, kā jūsu lietotne reaģēs uz šiem žestiem pēc to saņemšanas, iestatot atzvanīšanu jebkuram no konkrētajiem pieskāriena notikumiem.

Animāciju aktivizēšana ar pieskāriena notikumiem

Pieskāriena notikumi ir visizplatītākais mijiedarbības veids, ko lietotājs var veikt ar mobilo lietotni. Varat izvēlēties aktivizēt noteiktas animācijas, reaģējot uz konkrētiem lietotāja pieskāriena notikumiem.

Ar React Native's Animated API dažādu komponentu animēšanai, varat noteikt pieskāriena notikumus un strādāt ar tiem, lai aktivizētu animācijas, pamatojoties uz lietotāja mijiedarbību.

Piemēram, varat izmantot animēto API, lai animētu a necaurredzamību Pieskāriena necaurredzamība nospiežot pogu, lai izveidotu izbalēšanas efektu:

imports Reaģēt, { useState, useRef } no'reaģēt';
imports { Skats, Touchable Opacity, Animated } no'react-native';
konst AnimatedButton = () => {
// Izmantojiet useRef, lai piekļūtu animācijai. Vērtības gadījums
konst opacityValue = useRef(jauns Animēts. Vērtība(1)).strāva;
konst rokturisNospiediet = () => {
 Animated.timing (opacityValue, {
 novērtēt: 0.5,
 ilgums: 500,
 useNativeDriver: taisnība,
 }).sākt();
 }
atgriezties (

necaurredzamība: opacityValue }}>

 {/* Jūsu pogas komponents */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
eksportētnoklusējuma AnimatedButton;

Šajā piemērā opacityValue ir piemērs Animēts. Vērtība kas atspoguļo pogas necaurredzamību. Nospiežot pogu, rokturisNospiediet darbojas funkcija, kas aktivizē animāciju, izmantojot Animated.timing() lai animētu pogas necaurredzamību.

Animāciju aktivizēšana ar stāvokļa izmaiņām

Vēl viena pieeja, ko varat izmantot, ir aktivizēt animācijas, pamatojoties uz noteiktām stāvokļa izmaiņām jūsu lietotnē. Varat izmantot animācijas API, lai aktivizētu animācijas, reaģējot uz daudzām stāvokļa izmaiņām, piemēram, komponenta pozīcijas, lieluma vai satura izmaiņām.

Piemēram, jūs varētu izmantot useState un useEffect āķi lai aktivizētu šādu animāciju:

imports Reaģēt, { useState, useEffect } no'reaģēt';
imports { Skats, animācija, poga, teksts } no'react-native';
konst MyComponent = () => {
konst [fadeAnim, setFadeAnim] = useState(jauns Animēts. Vērtība(0));
konst [teksts, setText] = useState('Sveika pasaule');
 useEffect(() => {
// Izmantojiet āķi useEffect, lai aktivizētu animāciju, ja stāvoklis ir “teksts”.
// izmaiņas
 startAnimation();
 }, [teksts]);
konst startAnimation = () => {
 Animated.timing(
 fadeAnim,
 {
 novērtēt: 1,
 ilgums: 1000,
 useNativeDriver: taisnība,
 }
 ).sākt();
 };
atgriezties (

necaurredzamība: fadeAnim }}>
{teksts}</Text>
 </Animated.View>
"Mainīt tekstu" onPress={() => setText("Jauns teksts")} />
 </View>
 );
};
eksportētnoklusējuma MyComponent;

Šajā piemērā useEffect āķis aktivizēs animāciju ikreiz, kad statusa vērtība tekstu izmaiņas. The useEffect hook kā savu pirmo argumentu izmanto atzvanīšanas funkciju, kas tiks izpildīta ikreiz, kad tiks konstatētas otrajā argumentā norādītās atkarības (šajā gadījumā [teksts]) izmaiņas. Iekšpusē useEffect āķis, startAnimation() palaiž un aktivizē izbalēšanas animāciju.

Dinamiskās animācijas atdzīvinās jūsu lietotni

Dinamisku animāciju iekļaušana savā React Native lietotnē ievērojami uzlabo lietotāja pieredzi un padarīs jūsu lietotni interaktīvāku. Izmantojot pieskāriena notikumus, žestus un žestu reaģēšanas sistēmu, varat izveidot plūstošas ​​un atsaucīgas animācijas.

Turklāt, izmantojot Animated API un pārvaldot animācijas stāvokļus ar tādiem āķiem kā useState un useEffect, varat viegli aktivizēt animācijas, pamatojoties uz izmaiņām jūsu lietotnes stāvoklī.