Ako vytvoriť pútavé natívne aplikácie React s animáciami iniciovanými používateľom

Animácie by mali byť živé. Pre animácie React Native môžete vytvoriť pútavú používateľskú skúsenosť tak, že bude reagovať na interakciu používateľa. Tieto interakcie môžu byť priamo od používateľa alebo môžu byť uvedené do pohybu nepriamo určitými zmenami.

Pochopenie dotykových udalostí a gest v React Native

Prvky React Native sú schopné reagovať na dotyky a gestá používateľa. React Native Gesture Responder dokáže rozpoznať tieto dotykové udalosti a gestá.

Gesture Responder vybavuje veľa komponentov v rámci knižnice React Native touto funkciou, ako napr Tlačidlo a Dotyková nepriehľadnosť komponenty, ktoré reagujú na stlačenie alebo poklepanie.

Gesture Responder však vybavuje iba jednoduché komponenty jednoduchými gestami. Na spracovanie a detekciu zložitejších dotykových udalostí používa React Native rozhranie PanResponder API. Umožňuje vám vytvárať vlastné rozpoznávače gest, ktoré reagujú na zložitejšie dotykové interakcie, ako je sťahovanie, otáčanie alebo ťahanie.

Rozhranie API PanResponder môže definovať, ako bude vaša aplikácia reagovať na tieto gestá po ich prijatí, nastavením spätných volaní pre ktorúkoľvek z konkrétnych dotykových udalostí.

Spúšťanie animácií pomocou dotykových udalostí

Dotykové udalosti sú najbežnejšou formou interakcie používateľa s mobilnou aplikáciou. Môžete si vybrať spúšťanie určitých animácií v reakcii na konkrétne udalosti dotyku používateľa.

s Animované API React Native na animáciu rôznych komponentov, môžete zisťovať dotykové udalosti a pracovať s nimi na spúšťanie animácií na základe interakcií používateľa.

Môžete napríklad použiť Animated API na animáciu nepriehľadnosti a Dotyková nepriehľadnosť pri stlačení tlačidla vytvoríte efekt zoslabenia:

importovať Reagovať, { useState, useRef } od'reagovať';
importovať { View, TouchableOpacity, Animated } od„react-native“;
konšt Animované tlačidlo = () => {
// Použite useRef na prístup k Animovanému. Inštancia hodnoty
konšt opacityValue = useRef(Nový Animované. Hodnota(1)).aktuálne;
konšt rukoväťStlačte = () => {
 Animated.timing (opacityValue, {
 ohodnotiť: 0.5,
 trvanie: 500,
 useNativeDriver: pravda,
 }).start();
 }
vrátiť (

nepriehľadnosť: opacityValue }}>

 {/* Komponent vášho tlačidla */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
exportpredvolená Animované tlačidlo;

V tomto príklade opacityValue je príkladom Animované. Hodnota ktorý predstavuje nepriehľadnosť tlačidla. Keď stlačíte tlačidlo, rukoväťPress spustí sa funkcia, ktorá spustí animáciu pomocou Animated.timing() animovať nepriehľadnosť tlačidla.

Spúšťanie animácií so zmenami stavu

Ďalším prístupom, ktorý môžete použiť, je spúšťanie animácií na základe určitých zmien stavu vo vašej aplikácii. Animované API môžete použiť na spustenie animácií v reakcii na mnohé zmeny stavu, ako je napríklad zmena polohy, veľkosti alebo obsahu komponentu.

Môžete napríklad použiť useState a useEffect háčiky na spustenie takejto animácie:

importovať Reaguj, { useState, useEffect } od'reagovať';
importovať { Zobraziť, Animované, Tlačidlo, Text } od„react-native“;
konšt MyComponent = () => {
konšt [fadeAnim, setFadeAnim] = useState(Nový Animované. Hodnota(0));
konšt [text, setText] = useState('Ahoj svet');
 useEffect(() => {
// Použite háčik useEffect na spustenie animácie v stave „text“.
// zmeny
 startAnimation();
 }, [text]);
konšt začaťAnimácia = () => {
 Animated.timing(
 fadeAnim,
 {
 ohodnotiť: 1,
 trvanie: 1000,
 useNativeDriver: pravda,
 }
 ).start();
 };
vrátiť (

nepriehľadnosť: fadeAnim }}>
{text}</Text>
 </Animated.View>
"Zmeniť text" onPress={() => setText('Nový text')} />
 </View>
 );
};
exportpredvolená MyComponent;

V tomto príklade useEffect hák spustí animáciu vždy, keď je hodnota stavu text zmeny. The useEffect hook berie funkciu spätného volania ako svoj prvý argument, ktorý sa spustí vždy, keď sú závislosti špecifikované v druhom argumente (v tomto prípade [text]) zmeniť. Vnútri useEffect háčik, startAnimation() spustí a spustí animáciu slabnutia.

Dynamické animácie oživia vašu aplikáciu

Začlenenie dynamických animácií do vašej aplikácie React Native výrazne zlepší používateľský zážitok a vaša aplikácia bude interaktívnejšia. Vďaka sile dotykových udalostí, gest a systému odpovede na gestá môžete vytvárať plynulé a citlivé animácie.

Využitím rozhrania Animated API a spravovaním stavov animácie pomocou háčikov, ako sú useState a useEffect, môžete tiež jednoducho spúšťať animácie na základe zmien stavu vašej aplikácie.