Hur man skapar engagerande React Native-appar med användarinitierade animationer

Animationer ska kännas levande. Du kan skapa en engagerande användarupplevelse för React Native-animationer genom att låta dem svara på en användares interaktion. Dessa interaktioner kan komma direkt från användaren eller sättas igång indirekt av vissa förändringar.

Förstå beröringshändelser och gester i React Native

React Native-element kan svara på beröring och gester från en användare. React Native Gesture Responder kan upptäcka dessa beröringshändelser och gester.

Gesture Responder utrustar många komponenter i React Native-biblioteket med den här funktionen, som Knapp och Berörbar opacitet komponenter som svarar på tryckningar eller tryckningar.

Gesture Responder utrustar dock bara enkla komponenter med enkla gester. För att hantera och upptäcka mer komplexa beröringshändelser använder React Native PanResponder API. Det låter dig skapa anpassade gestigenkännare som svarar på mer komplexa beröringsinteraktioner, som att nypa, rotera eller dra.

PanResponder API kan definiera hur din app kommer att reagera på dessa gester när den tar emot dem genom att ställa in återuppringningar för någon av de specifika beröringshändelserna.

Utlöser animationer med beröringshändelser

Touch-händelser är den vanligaste formen av interaktion en användare kan ha med en mobilapp. Du kan välja att utlösa vissa animationer som svar på specifika användarberöringshändelser.

Med React Natives animerade API för att animera olika komponenter, kan du upptäcka och arbeta med beröringshändelser för att utlösa animeringar baserat på användarinteraktioner.

Till exempel kan du använda Animated API för att animera opaciteten för en Berörbar opacitet knappen när den trycks ned för att skapa en toningseffekt:

importera Reagera, { useState, useRef } från'reagera';
importera { View, TouchableOpacity, Animated } från"reagera-native";
konst AnimatedButton = () => {
// Använd useRef för att komma åt den animerade. Värdeinstans
konst opacityValue = useRef(ny Animerad. Värde(1)).nuvarande;
konst handtagTryck = () => {
 Animated.timing (opacityValue, {
 att värdesätta: 0.5,
 varaktighet: 500,
 useNativeDriver: Sann,
 }).Start();
 }
lämna tillbaka (

opacitet: opacitetValue }}>

 {/* Din knappkomponent */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
exporterastandard AnimatedButton;

I det här exemplet är opacitetsvärde är ett exempel på Animerad. Värde som representerar knappens opacitet. När du trycker på knappen visas handtagTryck funktionen körs, vilket utlöser en animering med hjälp av Animated.timing() för att animera opaciteten för knappen.

Utlöser animationer med tillståndsändringar

Ett annat tillvägagångssätt du kan ta är att utlösa animationer baserat på vissa tillståndsändringar i din app. Du kan använda Animated API för att utlösa animeringar som svar på många tillståndsändringar, till exempel en ändring av en komponents position, storlek eller innehåll.

Till exempel kan du använda useState och useEffect krokar för att trigga en animation så här:

importera Reagera, { useState, useEffect } från'reagera';
importera { View, Animated, Button, Text } från"reagera-native";
konst MyComponent = () => {
konst [fadeAnim, setFadeAnim] = useState(ny Animerad. Värde(0));
konst [text, setText] = useState('Hej världen');
 useEffect(() => {
// Använd useEffect-kroken för att utlösa animeringen när "text" tillstånd
// ändringar
 startAnimation();
 }, [text]);
konst startAnimation = () => {
 Animated.timing(
 fadeAnim,
 {
 att värdesätta: 1,
 varaktighet: 1000,
 useNativeDriver: Sann,
 }
 ).Start();
 };
lämna tillbaka (

opacitet: fadeAnim }}>
{text}</Text>
 </Animated.View>
"Ändra text" onPress={() => setText("Ny text")} />
 </View>
 );
};
exporterastandard MyComponent;

I det här exemplet är useEffect hook kommer att utlösa animeringen närhelst tillståndsvärdet för text ändringar. De useEffect hook tar en callback-funktion som sitt första argument, som den kommer att köra när de beroenden som anges i det andra argumentet (i det här fallet, [text]) förändra. Inuti useEffect krok, startAnimation() körs och utlöser toningsanimeringen.

Dynamiska animationer livar upp din app

Att integrera dynamiska animationer i din React Native-app förbättrar användarupplevelsen avsevärt och kommer att göra din app mer interaktiv. Med kraften i beröringshändelser, gester och gestsvarssystemet kan du skapa flytande och responsiva animationer.

Genom att utnyttja det animerade API: t och hantera animeringstillstånd med krokar som useState och useEffect, kan du enkelt trigga animeringar baserat på ändringar i appens tillstånd.