Sådan opretter du engagerende React Native Apps med brugerinitierede animationer

Animationer skal føles levende. Du kan skabe en engagerende brugeroplevelse for React Native-animationer ved at få dem til at reagere på en brugers interaktion. Disse interaktioner kan være direkte fra brugeren eller sættes i gang indirekte ved visse ændringer.

Forstå berøringshændelser og bevægelser i React Native

React Native-elementer er i stand til at reagere på berøring og bevægelser fra en bruger. React Native Gesture Responder kan registrere disse berøringshændelser og -bevægelser.

Gesture Responderen udstyrer en masse komponenter i React Native-biblioteket med denne funktion, som f. Knap og Berørbar opacitet komponenter, der reagerer på tryk eller tryk.

Gesture Responderen klæder dog kun enkle komponenter på med simple bevægelser. Til at håndtere og detektere mere komplekse berøringshændelser, bruger React Native PanResponder API. Det giver dig mulighed for at oprette brugerdefinerede gestusgenkendere, der reagerer på mere komplekse berøringsinteraktioner, såsom at klemme, rotere eller trække.

PanResponder API kan definere, hvordan din app vil reagere på disse bevægelser, når den modtager dem, ved at konfigurere tilbagekald for enhver af de specifikke berøringshændelser.

Udløser animationer med berøringsbegivenheder

Berøringshændelser er den mest almindelige form for interaktion, en bruger kan have med en mobilapp. Du kan vælge at udløse bestemte animationer som svar på specifikke brugerberøringshændelser.

Med React Natives animerede API til at animere forskellige komponenter, kan du registrere og arbejde med berøringshændelser for at udløse animationer baseret på brugerinteraktioner.

For eksempel kan du bruge Animated API til at animere opaciteten af ​​en Berørbar opacitet knappen, når der trykkes på for at skabe en indtoningseffekt:

importere React, { useState, useRef } fra'reagere';
importere { View, TouchableOpacity, Animated } fra'reager-native';
konst Animeret knap = () => {
// Brug useRef for at få adgang til Animated. Værdiforekomst
konst opacityValue = brugRef(ny Animeret. Værdi(1)).nuværende;
konst håndtagTryk på = () => {
 Animated.timing (opacityValue, {
 At værdsætte: 0.5,
 varighed: 500,
 useNativeDriver: rigtigt,
 }).Start();
 }
Vend tilbage (

Gennemsigtighed: opacitetValue }}>

 {/* Din knapkomponent */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
eksportStandard Animeret knap;

I dette eksempel er opacitetsværdi er et eksempel på Animeret. Værdi der repræsenterer knappens opacitet. Når du trykker på knappen, vises håndtagTryk funktion kører, som udløser en animation vha Animated.timing() for at animere opaciteten af ​​knappen.

Udløser animationer med tilstandsændringer

En anden tilgang, du kan tage, er at udløse animationer baseret på visse tilstandsændringer i din app. Du kan bruge den animerede API til at udløse animationer som svar på mange tilstandsændringer, såsom en ændring i en komponents position, størrelse eller indhold.

For eksempel kan du bruge useState og useEffect kroge for at udløse en animation som denne:

importere Reager, { useState, useEffect } fra'reagere';
importere { View, Animated, Button, Text } fra'reager-native';
konst MyComponent = () => {
konst [fadeAnim, setFadeAnim] = useState(ny Animeret. Værdi(0));
konst [text, setText] = useState('Hej Verden');
 useEffect(() => {
// Brug useEffect-krogen til at udløse animationen, når 'tekst'-tilstanden
// ændringer
 startAnimation();
 }, [tekst]);
konst startAnimation = () => {
 Animated.timing(
 fadeAnim,
 {
 At værdsætte: 1,
 varighed: 1000,
 useNativeDriver: rigtigt,
 }
 ).Start();
 };
Vend tilbage (

Gennemsigtighed: fadeAnim }}>
{tekst}</Text>
 </Animated.View>
"Skift tekst" onPress={() => sætTekst('Ny tekst')} />
 </View>
 );
};
eksportStandard MyComponent;

I dette eksempel er useEffect hook vil udløse animationen, når statusværdien af tekst ændringer. Det useEffect hook tager en tilbagekaldsfunktion som sit første argument, som den vil køre hver gang de afhængigheder, der er angivet i det andet argument (i dette tilfælde, [tekst]) lave om. Inde i useEffect krog, startAnimation() kører og udløser fade-animationen.

Dynamiske animationer liver din app op

Inkorporering af dynamiske animationer i din React Native-app forbedrer brugeroplevelsen markant og vil gøre din app mere interaktiv. Med kraften fra berøringshændelser, bevægelser og gestusresponser-systemet kan du skabe flydende og responsive animationer.

Ved at udnytte den animerede API og administrere animationstilstande med hooks som useState og useEffect kan du også nemt udløse animationer baseret på ændringer i din apps tilstand.