Kako ustvariti privlačne izvorne aplikacije React z animacijami, ki jih sproži uporabnik

Animacije se morajo počutiti žive. Ustvarite lahko privlačno uporabniško izkušnjo za animacije React Native tako, da se odzovejo na uporabnikovo interakcijo. Te interakcije so lahko neposredno od uporabnika ali pa se sprožijo posredno z določenimi spremembami.

Razumevanje dogodkov in potez na dotik v React Native

Elementi React Native se lahko odzovejo na dotik in kretnje uporabnika. React Native Gesture Responder lahko zazna te dogodke in poteze na dotik.

Gesture Responder s to funkcijo opremi veliko komponent v knjižnici React Native, kot je Gumb in Motnost na dotik komponente, ki se odzivajo na pritiske ali udarce.

Gesture Responder pa samo opremi preproste komponente s preprostimi potezami. Za obravnavanje in zaznavanje kompleksnejših dogodkov dotika React Native uporablja API PanResponder. Omogoča vam, da ustvarite prepoznavalnike potez po meri, ki se odzivajo na bolj zapletene interakcije z dotikom, kot so stiskanje prstov, vrtenje ali vlečenje.

PanResponder API lahko določi, kako se bo vaša aplikacija odzvala na te poteze, ko jih prejme, tako da nastavi povratne klice za kateri koli od posebnih dogodkov dotika.

Sprožitev animacij z dogodki na dotik

Dogodki na dotik so najpogostejša oblika interakcije, ki jo lahko uporabnik ima z mobilno aplikacijo. Izberete lahko sprožitev določenih animacij kot odgovor na določene dogodke dotika uporabnika.

z React Native Animated API za animiranje različnih komponent, lahko zaznate dogodke dotika in delate z njimi, da sprožite animacije na podlagi uporabniških interakcij.

Uporabite lahko na primer animirani API za animacijo motnosti a Motnost na dotik gumb, ko ga pritisnete, da ustvarite učinek zatemnitve:

uvoz Reagiraj, {useState, useRef} od'reagirati';
uvoz {Pogled, motnost na dotik, animirano} od'react-native';
konst AnimatedButton = () => {
// Uporabite useRef za dostop do Animiranega. Primerek vrednosti
konst opacityValue = useRef(novo Animirano. Vrednost (1)).trenutno;
konst HandPress = () => {
 Animated.timing (opacityValue, {
 ceniti: 0.5,
 trajanje: 500,
 useNativeDriver: prav,
 }).start();
 }
vrnitev (

nepreglednost: opacityValue }}>

 {/* Vaša komponenta gumba */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
izvozprivzeto AnimatedButton;

V tem primeru je opacityValue je primer Animirano. Vrednost ki predstavlja motnost gumba. Ko pritisnete gumb, se handlePress se zažene funkcija, ki sproži animacijo z uporabo Animated.timing() za animacijo motnosti gumba.

Sprožitev animacij s spremembami stanja

Drug pristop, ki ga lahko uporabite, je sprožitev animacij na podlagi določenih sprememb stanja v vaši aplikaciji. Animirani API lahko uporabite za sprožitev animacij kot odgovor na številne spremembe stanja, kot je sprememba položaja, velikosti ali vsebine komponente.

Na primer, lahko uporabite useState in useEffect kavlji da sproži takšno animacijo:

uvoz Odziv, {useState, useEffect} od'reagirati';
uvoz { Pogled, animirano, gumb, besedilo } od'react-native';
konst Moja komponenta = () => {
konst [fadeAnim, setFadeAnim] = useState(novo Animirano. Vrednost (0));
konst [besedilo, setText] = useState('Pozdravljen, svet');
 useEffect(() => {
// Uporabite kljuko useEffect za sprožitev animacije v stanju 'besedilo'
// spremembe
 startAnimation();
 }, [besedilo]);
konst startAnimation = () => {
 Animated.timing(
 fadeAnim,
 {
 ceniti: 1,
 trajanje: 1000,
 useNativeDriver: prav,
 }
 ).start();
 };
vrnitev (

nepreglednost: fadeAnim }}>
{text}</Text>
 </Animated.View>
"Spremeni besedilo" onPress={() => setText('Novo besedilo')} />
 </View>
 );
};
izvozprivzeto MyComponent;

V tem primeru je useEffect hook bo sprožil animacijo vsakič, ko je vrednost stanja besedilo spremembe. The useEffect hook vzame funkcijo povratnega klica kot svoj prvi argument, ki jo bo zagnal vsakič, ko bodo odvisnosti, podane v drugem argumentu (v tem primeru [besedilo]) spremeniti. Znotraj useEffect kavelj, startAnimation() zažene in sproži bledečo animacijo.

Dinamične animacije bodo poživile vašo aplikacijo

Vključitev dinamičnih animacij v vašo aplikacijo React Native močno izboljša uporabniško izkušnjo in bo vašo aplikacijo naredila bolj interaktivno. Z močjo dogodkov na dotik, kretenj in sistema za odziv na poteze lahko ustvarite tekoče in odzivne animacije.

Poleg tega lahko z uporabo animiranega API-ja in upravljanjem stanj animacije s kljukicami, kot sta useState in useEffect, preprosto sprožite animacije na podlagi sprememb v stanju vaše aplikacije.