Kuidas luua kaasahaaravaid reageerivaid kohalikke rakendusi kasutaja algatatud animatsioonidega

Animatsioonid peaksid tunduma elavana. Saate luua React Native animatsioonide jaoks kaasahaarava kasutuskogemuse, lastes neil reageerida kasutaja suhtlusele. Need interaktsioonid võivad pärineda otse kasutajalt või teatud muudatuste tõttu kaudselt.

React Native'i puutesündmuste ja žestide mõistmine

React Native elemendid on võimelised reageerima kasutaja puudutusele ja žestidele. React Native Gesture Responder suudab need puutesündmused ja žestid tuvastada.

Gesture Responder varustab selle funktsiooniga paljusid React Native teegi komponente, näiteks Nupp ja Puutetundlik läbipaistmatus komponendid, mis reageerivad vajutamisele või koputamisele.

Žestivastaja varustab aga lihtsate liigutustega ainult lihtsaid komponente. Keerulisemate puutesündmuste käsitlemiseks ja tuvastamiseks kasutab React Native PanResponder API-t. See võimaldab teil luua kohandatud liigutuste tuvastajaid, mis reageerivad keerukamatele puutetoimingutele, nagu pigistamine, pööramine või lohistamine.

PanResponder API saab määrata, kuidas teie rakendus nendele žestidele nende vastuvõtmisel reageerib, seadistades mis tahes konkreetse puutesündmuse jaoks tagasihelistamise.

Animatsioonide käivitamine puutesündmustega

Puutesündmused on kõige levinum suhtlusvorm, mida kasutaja mobiilirakendusega saab kasutada. Saate valida teatud animatsioonide käivitamise vastuseks konkreetsetele kasutaja puudutamissündmustele.

Koos React Native'i animeeritud API erinevate komponentide animeerimiseks, saate puutesündmusi tuvastada ja nendega töötada, et käivitada kasutaja interaktsioonidel põhinevaid animatsioone.

Näiteks saate animeeritud API-d kasutada a läbipaistmatuse animeerimiseks Puutetundlik läbipaistmatus nuppu, kui seda vajutada, et luua pimendusefekt:

importida Reageerida, { useState, useRef } alates'reageeri';
importida { Vaade, TouchableOpacity, Animeeritud } alates'react-native';
konst AnimatedButton = () => {
// Kasutage animeeritud juurdepääsu saamiseks useRef. Väärtuse eksemplar
konst opacityValue = useRef(uus Animeeritud. Väärtus(1)).vool;
konst käepideVajutage = () => {
 Animated.timing (oacityValue, {
 hindama: 0.5,
 kestus: 500,
 useNativeDriver: tõsi,
 }).start();
 }
tagasi (

läbipaistmatus: opacityValue }}>

 {/* Teie nupu komponent */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
eksportidavaikimisi AnimatedButton;

Selles näites on opacityValue on näide Animeeritud. Väärtus mis tähistab nupu läbipaistmatust. Kui vajutate nuppu, kuvatakse käepideVajutage funktsioon käivitub, mis käivitab kasutades animatsiooni Animated.timing() nupu läbipaistmatuse animeerimiseks.

Animatsioonide käivitamine olekumuutustega

Teine võimalus on käivitada animatsioonid, mis põhinevad teie rakenduse teatud olekumuudatustel. Animeeritud API-d saate kasutada animatsioonide käivitamiseks vastuseks paljudele olekumuutustele, näiteks komponendi asukoha, suuruse või sisu muutustele.

Näiteks võite kasutada useState ja useEffect konksud sellise animatsiooni käivitamiseks:

importida Reageerida, { useState, useEffect } alates'reageeri';
importida { Vaade, Animeeritud, Nupp, Tekst } alates'react-native';
konst Minu komponent = () => {
konst [fadeAnim, setFadeAnim] = useState(uus Animeeritud. Väärtus(0));
konst [tekst, setText] = useState('Tere, Maailm');
 useEffect(() => {
// Kasutage konksu useEffect, et käivitada animatsioon, kui olek on "tekst".
// muudatused
 startAnimation();
 }, [tekst]);
konst startAnimatsioon = () => {
 Animated.timing(
 fadeAnim,
 {
 hindama: 1,
 kestus: 1000,
 useNativeDriver: tõsi,
 }
 ).start();
 };
tagasi (

läbipaistmatus: fadeAnim }}>
{tekst}</Text>
 </Animated.View>
"Muuda teksti" onPress={() => setText("Uus tekst")} />
 </View>
 );
};
eksportidavaikimisi MyComponent;

Selles näites on useEffect hook käivitab animatsiooni alati, kui oleku väärtus tekst muudatusi. The useEffect hook võtab oma esimese argumendina tagasihelistamisfunktsiooni, mida see käivitab alati, kui teises argumendis määratud sõltuvused (antud juhul [tekst]) muuta. Sees useEffect konks, startAnimation() käivitab ja käivitab tuhmumisanimatsiooni.

Dünaamilised animatsioonid elavdavad teie rakendust

Dünaamiliste animatsioonide lisamine oma rakendusse React Native parandab oluliselt kasutajakogemust ja muudab teie rakenduse interaktiivsemaks. Puutesündmuste, žestide ja žestidele reageerimise süsteemi abil saate luua sujuvaid ja reageerivaid animatsioone.

Animeeritud API-d võimendades ja animatsiooniolekuid haldades konksudega, nagu useState ja useEffect, saate hõlpsalt käivitada animatsioone, mis põhinevad rakenduse oleku muutustel.