Hvordan lage engasjerende React Native-apper med brukerinitierte animasjoner

Animasjoner skal føles levende. Du kan skape en engasjerende brukeropplevelse for React Native-animasjoner ved å la dem reagere på en brukers interaksjon. Disse interaksjonene kan være direkte fra brukeren eller settes i gang indirekte ved visse endringer.

Forstå berøringshendelser og bevegelser i React Native

React Native-elementer er i stand til å svare på berøring og bevegelser fra en bruker. React Native Gesture Responder kan oppdage disse berøringshendelsene og bevegelsene.

Gesture Responder utstyrer mange komponenter i React Native-biblioteket med denne funksjonen, som Knapp og TouchableOpacity komponenter som reagerer på trykk eller trykk.

Gesture Responder har imidlertid bare enkle komponenter med enkle bevegelser. For å håndtere og oppdage mer komplekse berøringshendelser, bruker React Native PanResponder API. Den lar deg lage tilpassede bevegelsesgjenkjennere som reagerer på mer komplekse berøringsinteraksjoner, som å knipe, rotere eller dra.

PanResponder API kan definere hvordan appen din vil reagere på disse bevegelsene ved å motta dem ved å sette opp tilbakeringinger for noen av de spesifikke berøringshendelsene.

Utløser animasjoner med berøringshendelser

Berøringshendelser er den vanligste formen for interaksjon en bruker kan ha med en mobilapp. Du kan velge å utløse visse animasjoner som svar på spesifikke brukerberøringshendelser.

Med React Natives animerte API for å animere forskjellige komponenter, kan du oppdage og arbeide med berøringshendelser for å utløse animasjoner basert på brukerinteraksjoner.

Du kan for eksempel bruke Animated API til å animere opasiteten til en TouchableOpacity -knappen når den trykkes for å lage en inntoningseffekt:

import Reager, { useState, useRef } fra'reagere';
import { View, TouchableOpacity, Animated } fra'reager-innfødt';
konst AnimatedButton = () => {
// Bruk useRef for å få tilgang til Animated. Verdiforekomst
konst opacityValue = brukRef(ny Animert. Verdi(1)).nåværende;
konst håndtakTrykk = () => {
 Animated.timing (opacityValue, {
 å verdsette: 0.5,
 varighet: 500,
 useNativeDriver: ekte,
 }).start();
 }
komme tilbake (

opasitet: opacityValue }}>

 {/* Knappekomponenten din */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
eksportmisligholde AnimatedButton;

I dette eksemplet er opasitet Verdi er et eksempel på Animert. Verdi som representerer opasiteten til knappen. Når du trykker på knappen, vises håndtakTrykk funksjonen kjører, som utløser en animasjon ved hjelp av Animated.timing() for å animere opasiteten til knappen.

Utløser animasjoner med tilstandsendringer

En annen tilnærming du kan ta er å utløse animasjoner basert på visse tilstandsendringer i appen din. Du kan bruke Animated API til å utløse animasjoner som svar på mange tilstandsendringer, for eksempel en endring i posisjon, størrelse eller innhold til en komponent.

Du kan for eksempel bruke useState og useEffect kroker for å utløse en animasjon som dette:

import Reager, { useState, useEffect } fra'reagere';
import { Vis, animert, knapp, tekst } fra'reager-innfødt';
konst MyComponent = () => {
konst [fadeAnim, setFadeAnim] = useState(ny Animert. Verdi(0));
konst [text, setText] = useState('Hei Verden');
 useEffect(() => {
// Bruk useEffect-kroken for å utløse animasjonen når "tekst"-tilstanden
// Endringer
 startAnimasjon();
 }, [tekst]);
konst startAnimasjon = () => {
 Animated.timing(
 fadeAnim,
 {
 å verdsette: 1,
 varighet: 1000,
 useNativeDriver: ekte,
 }
 ).start();
 };
komme tilbake (

opasitet: fadeAnim }}>
{tekst}</Text>
 </Animated.View>
"Endre tekst" onPress={() => settTekst("Ny tekst")} />
 </View>
 );
};
eksportmisligholde MyComponent;

I dette eksemplet er useEffect Hook vil utløse animasjonen når tilstandsverdien til tekst Endringer. De useEffect hook tar en tilbakeringingsfunksjon som sitt første argument, som den vil kjøre når avhengighetene spesifisert i det andre argumentet (i dette tilfellet, [tekst]) endring. Inne i useEffect krok, startAnimation() kjører og utløser fade-animasjonen.

Dynamiske animasjoner liver opp appen din

Å inkludere dynamiske animasjoner i React Native-appen din forbedrer brukeropplevelsen betraktelig og vil gjøre appen din mer interaktiv. Med kraften til berøringshendelser, bevegelser og bevegelsessvarsystemet kan du lage flytende og responsive animasjoner.

Ved å utnytte Animated API og administrere animasjonstilstander med kroker som useState og useEffect, kan du enkelt utløse animasjoner basert på endringer i appens tilstand.