Kaip sukurti patrauklias „React“ vietines programas naudojant vartotojo inicijuotą animaciją

Animacijos turėtų jaustis gyvos. Galite sukurti patrauklią naudotojo patirtį naudodami „React Native“ animacijas, reaguodami į vartotojo sąveiką. Šios sąveikos gali vykti tiesiogiai iš vartotojo arba netiesiogiai dėl tam tikrų pakeitimų.

Prisilietimo įvykių ir gestų supratimas programoje „React Native“.

„React Native“ elementai gali reaguoti į vartotojo prisilietimus ir gestus. „React Native Gesture Responder“ gali aptikti šiuos prisilietimo įvykius ir gestus.

„Gesture Responder“ su šia funkcija aprūpina daug „React Native“ bibliotekos komponentų, pvz. Mygtukas ir TouchableOpacity komponentai, reaguojantys į paspaudimus ar bakstelėjimus.

Tačiau „Gesture Responder“ paprastais gestais aprengia tik paprastus komponentus. Norėdami valdyti ir aptikti sudėtingesnius prisilietimo įvykius, „React Native“ naudoja „PanResponder“ API. Tai leidžia sukurti pasirinktinius gestų atpažintuvus, kurie reaguoja į sudėtingesnes lietimo sąveikas, tokias kaip suspaudimas, sukimas ar vilkimas.

„PanResponder“ API gali apibrėžti, kaip jūsų programa reaguos į šiuos gestus juos gavusi, nustatydama bet kurio iš konkrečių prisilietimo įvykių atgalinius skambučius.

Animacijų suaktyvinimas naudojant jutiklinius įvykius

Prisilietimo įvykiai yra labiausiai paplitusi sąveikos forma, kurią vartotojas gali turėti su programa mobiliesiems. Galite pasirinkti suaktyvinti tam tikras animacijas reaguojant į konkrečius vartotojo prisilietimo įvykius.

Su „React Native“ animuota API, skirta animuoti skirtingus komponentus, galite aptikti prisilietimo įvykius ir dirbti su jais, kad suaktyvintumėte animaciją, pagrįstą vartotojo sąveika.

Pavyzdžiui, galite naudoti animuotą API, kad suaktyvintumėte a neskaidrumą TouchableOpacity paspaudus mygtuką, kad sukurtumėte išblukimo efektą:

importuoti Reaguoti, { useState, useRef } iš'reaguoti';
importuoti { Rodinys, TouchableOpacity, animuotas } iš'react-native';
konst AnimatedButton = () => {
// Naudokite useRef, kad pasiektumėte animuotą. Vertės pavyzdys
konst opacityValue = useRef(naujas Animuoti. Reikšmė(1)).srovė;
konst rankenaPaspauskite = () => {
 Animated.timing (opacityValue, {
 vertinti: 0.5,
 trukmė: 500,
 useNativeDriver: tiesa,
 }).start();
 }
grąžinti (

neskaidrumas: opacityValue }}>

 {/* Jūsų mygtuko komponentas */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
eksportuotinumatytas AnimatedButton;

Šiame pavyzdyje opacityValue yra pavyzdys Animuoti. Vertė tai reiškia mygtuko neskaidrumą. Kai paspausite mygtuką, rankenaPaspauskite veikia funkcija, kuri suaktyvina animaciją naudojant Animated.timing() kad suaktyvintumėte mygtuko neskaidrumą.

Animacijų suaktyvinimas su būsenos pakeitimais

Kitas būdas, kurį galite naudoti, yra suaktyvinti animaciją pagal tam tikrus programos būsenos pakeitimus. Galite naudoti animuotą API, kad suaktyvintumėte animacijas, reaguojant į daugelį būsenų pakeitimų, pvz., pasikeitus komponento vietai, dydžiui ar turiniui.

Pavyzdžiui, galite naudoti useState ir naudojimoEfektas kabliukai Norėdami suaktyvinti tokią animaciją:

importuoti Reaguoti, { useState, useEffect } iš'reaguoti';
importuoti { Rodinys, animacija, mygtukas, tekstas } iš'react-native';
konst Mano komponentas = () => {
konst [fadeAnim, setFadeAnim] = useState(naujas Animuoti. Reikšmė(0));
konst [tekstas, setText] = useState('Labas pasauli');
 useEffect (() => {
// Naudokite kabliuką useEffect, kad suaktyvintumėte animaciją, kai būsena „tekstas“.
// pakeitimai
 startAnimation();
 }, [tekstas]);
konst startAnimation = () => {
 Animated.timing(
 fadeAnim,
 {
 vertinti: 1,
 trukmė: 1000,
 useNativeDriver: tiesa,
 }
 ).start();
 };
grąžinti (

neskaidrumas: fadeAnim }}>
{tekstas}</Text>
 </Animated.View>
"Keisti tekstą" onPress={() => setText("Naujas tekstas")} />
 </View>
 );
};
eksportuotinumatytas MyComponent;

Šiame pavyzdyje naudojimoEfektas kabliukas suaktyvins animaciją, kai būsenos reikšmė tekstą pokyčius. The naudojimoEfektas „hook“ kaip pirmąjį argumentą naudoja atgalinio skambučio funkciją, kuri bus paleista, kai atsiras antrajame argumente nurodytos priklausomybės (šiuo atveju, [tekstas]) pakeisti. Viduje naudojimoEfektas kabliukas, startAnimation() paleidžia ir suaktyvina išnykimo animaciją.

Dinaminės animacijos pagyvins jūsų programą

Dinaminės animacijos įtraukimas į „React Native“ programą labai pagerina vartotojo patirtį ir padarys programą interaktyvesnę. Naudodami lietimo įvykių, gestų ir gestų atsakiklio sistemą galite sukurti sklandžią ir reaguojančią animaciją.

Be to, išnaudodami animuotą API ir tvarkydami animacijos būsenas su kabliukais, pvz., „useState“ ir „useEffect“, galite lengvai suaktyvinti animacijas pagal programos būsenos pokyčius.