Kako stvoriti zanimljive React izvorne aplikacije s animacijama koje pokreće korisnik

Animacije bi trebale djelovati živo. Možete stvoriti privlačno korisničko iskustvo za React Native animacije tako da odgovaraju na interakciju korisnika. Te interakcije mogu biti izravno od korisnika ili se mogu pokrenuti neizravno određenim promjenama.

Razumijevanje događaja dodira i pokreta u React Native

React Native elementi sposobni su reagirati na dodir i geste korisnika. React Native Gesture Responder može detektirati ove dodirne događaje i geste.

Gesture Responder ovom značajkom oprema mnoge komponente unutar React Native biblioteke, poput Dugme i Neprozirnost na dodir komponente koje reagiraju na pritiske ili kuckanje.

Gesture Responder, međutim, samo oprema jednostavne komponente jednostavnim gestama. Za rukovanje i otkrivanje složenijih dodirnih događaja, React Native koristi PanResponder API. Omogućuje vam stvaranje prilagođenih prepoznavača pokreta koji reagiraju na složenije dodirne interakcije, poput stiskanja prstiju, rotacije ili povlačenja.

PanResponder API može definirati kako će vaša aplikacija reagirati na ove geste nakon što ih primi postavljanjem povratnih poziva za bilo koji od specifičnih događaja dodira.

Pokretanje animacija s događajima dodira

Događaji dodira najčešći su oblik interakcije koju korisnik može imati s mobilnom aplikacijom. Možete odabrati pokretanje određenih animacija kao odgovor na određene događaje dodira korisnika.

S React Native Animated API za animiranje različitih komponenti, možete otkriti i raditi s događajima dodira kako biste pokrenuli animacije na temelju interakcija korisnika.

Na primjer, možete koristiti Animated API za animaciju neprozirnosti a Neprozirnost na dodir gumb kada se pritisne za stvaranje efekta zatamnjenja:

uvoz Reagiraj, {useState, useRef} iz'reagirati';
uvoz { View, TouchableOpacity, Animated } iz'react-native';
konst Animirani gumb = () => {
// Koristite useRef za pristup animiranom. Instanca vrijednosti
konst opacityValue = useRef(novi Animirani. Vrijednost(1)).Trenutno;
konst ručkaPritisnite = () => {
 Animated.timing (opacityValue, {
 cijeniti: 0.5,
 trajanje: 500,
 useNativeDriver: pravi,
 }).početak();
 }
povratak (

neprozirnost: opacityValue }}>

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

U ovom primjeru, opacityValue je primjerak Animirani. Vrijednost koji predstavlja neprozirnost gumba. Kada pritisnete gumb, ručkaPress pokreće se funkcija koja pokreće animaciju pomoću Animated.timing() za animaciju neprozirnosti gumba.

Pokretanje animacija s promjenama stanja

Drugi pristup koji možete poduzeti je pokretanje animacija na temelju određenih promjena stanja unutar vaše aplikacije. Animirani API možete koristiti za pokretanje animacija kao odgovor na mnoge promjene stanja, kao što je promjena položaja, veličine ili sadržaja komponente.

Na primjer, možete koristiti useState i useEffect udice za pokretanje ovakve animacije:

uvoz Reagiraj, {useState, useEffect} iz'reagirati';
uvoz { Prikaz, Animirani, Gumb, Tekst } iz'react-native';
konst Moja komponenta = () => {
konst [fadeAnim, setFadeAnim] = useState(novi Animirani. Vrijednost(0));
konst [tekst, setText] = useState('Pozdrav svijete');
 useEffect(() => {
// Koristite kuku useEffect za pokretanje animacije u stanju 'tekst'
// promjene
 početakAnimacija();
 }, [tekst]);
konst startAnimation = () => {
 Animated.timing(
 fadeAnim,
 {
 cijeniti: 1,
 trajanje: 1000,
 useNativeDriver: pravi,
 }
 ).početak();
 };
povratak (

neprozirnost: fadeAnim }}>
{tekst}</Text>
 </Animated.View>
"Promijeni tekst" onPress={() => setText('Novi tekst')} />
 </View>
 );
};
izvozzadano MyComponent;

U ovom primjeru, useEffect kuka će pokrenuti animaciju kad god je vrijednost stanja tekst promjene. The useEffect kuka uzima funkciju povratnog poziva kao svoj prvi argument, koju će pokrenuti kad god se ovisnosti navedene u drugom argumentu (u ovom slučaju, [tekst]) promijeniti. Unutar useEffect kuka, startAnimation() pokreće i pokreće fade animaciju.

Dinamične animacije oživjet će vašu aplikaciju

Uključivanje dinamičkih animacija u vašu aplikaciju React Native uvelike poboljšava korisničko iskustvo i učinit će vašu aplikaciju interaktivnijom. Sa snagom dodirnih događaja, gesti i sustava odgovora na geste, možete stvoriti fluidne i responzivne animacije.

Također, korištenjem Animated API-ja i upravljanjem stanjima animacije pomoću kuka kao što su useState i useEffect, možete jednostavno pokrenuti animacije na temelju promjena u stanju vaše aplikacije.