Komma igång med animationer i React Native

Animationer kan blåsa liv i en app, vilket gör den mer engagerande och intuitiv för användaren. Men om du är ny med React Native-animationer kan det vara lite skrämmande att komma igång.

Utforska React Native-animationer och ta reda på hur du kan börja skapa vackra, smidiga animationer.

Hur fungerar Basic React Native Animationer?

Animationer kan skapa mjuka övergångar mellan olika skärmar eller element. De kan lyfta fram information eller ge feedback om användaråtgärder. Animationer kan vara enkla eller komplexa och kan använda en mängd olika tekniker, såsom 2D eller 3D rörlig grafik.

React Natives portabilitet gör det väl värt att använda om du riktar in dig på flera plattformar. En av dess starkaste egenskaper är möjligheten att skapa vackra animationer för mobilappar.

Du kan animera ett React Native-objekt genom att helt enkelt ändra positionstillståndet för den önskade komponenten.

Till exempel:

importera Reagera, { useState, useEffect } från'reagera';
importera { Visa, StyleSheet } från"reagera-native";
konst App = () => {
// Initiera tillstånd för att spåra boxens position
konst [boxPosition, setBoxPosition] = useState(0);
// Använd useEffect-kroken för att uppdatera boxpositionen var 1:e sekund
 useEffect(() => {
konst intervall = setInterval(() => {
// Uppdatera boxpositionen genom att lägga till 10 till den aktuella positionen
 setBoxPosition(prevPosition => prevPosition + 10);
 }, 1000);
// Returnera en rensningsfunktion för att rensa intervallet när komponenten
// avmonteras
lämna tillbaka() => clearInterval (intervall);
 }, []);
// Ställ in boxpositionen med hjälp av tillståndsvariabeln i inline-stilen
konst boxStyle = {
 transformera: [{ översättY: boxPosition }]
 };
lämna tillbaka (


 </View>
 );
};
konst styles = StyleSheet.create({
 behållare: {
 böja: 1,
 alignItems: 'Centrum',
 justifyContent: 'Centrum',
 },
 låda: {
 bredd: 100,
 höjd: 100,
 bakgrundsfärg: 'blå',
 },
});
exporterastandard App;

Denna kod återger en blå ruta som rör sig nedåt varje sekund. Animationen fungerar genom att använda useEffect krok för att skapa en timer som uppdaterar boxPosition tillståndsvariabel var 1:e sekund.

Även om detta kan fungera i vissa situationer, är detta inte det bästa alternativet att gå med. Tillståndsuppdateringar i React Native fungerar asynkront, men animationer förlitar sig på synkrona tillståndsuppdateringar för att fungera korrekt. Om du implementerar din animation asynkront kommer tillståndsuppdateringar inte att omedelbart återspeglas i komponentens renderade utdata, vilket förstör timingen för dina animationer.

De är flera animationsbibliotek som Animerad bibliotek, reagera-native-reanimated, och reagera-infödd-animerbar för att bygga presterande animationer i React Native. Vart och ett av dessa animationsbibliotek slår ut frågan om asynkrona tillståndsuppdateringar och är perfekta.

React Native Animated API

Animated är ett API som React Native tillhandahåller. Du kan använda den för att skapa smidiga animationer som svarar på användarinteraktioner eller tillståndsändringar.

Animated API låter dig skapa animerade värden som du kan interpolera och mappa till olika stilegenskaper för dina komponenter. Du kan sedan uppdatera dessa värden över tiden med hjälp av olika animeringsmetoder. Dina komponenters stilar kommer sedan att uppdateras när de animerade värdena ändras, vilket resulterar i jämna animationer.

Animerad fungerar riktigt bra med React Natives layoutsystem. På grund av detta kommer dina animationer att integreras ordentligt med resten av ditt användargränssnitt för ett ännu bättre utseende.

För att komma igång med att använda Animated i ditt React Native-projekt måste du importera Animerad modul från 'reagera-native' i din kod:

importera { Animerad } från"reagera-native";

Med Animerad importerad kan du börja skapa animationer. För att göra detta, skapa först ett animerat värde som du kommer att manipulera genom hela animeringen:

konst animerat värde = ny Animerad. Värde(0);

De Animerad. Värde är en klass i React Native Animated API som representerar ett föränderligt värde. Du kan initiera det med ett initialt värde och sedan uppdatera det över tid med olika animeringsmetoder som tillhandahålls av Animated API, som .timing(), .vår(), och .förfall(), genom att ange animationens varaktighet, övergångsfunktion och andra parametrar.

Det animerade värdet liknar ett tillståndsvärde i en React-komponent.

Du kan initiera en Animerad. Värde med det initiala tillståndsvärdet för en komponent och uppdatera det sedan med tiden med hjälp av setState metod.

Till exempel har du en komponent som har ett tillståndsvärde räkna, som representerar antalet gånger användaren har klickat på den knappen.

Du kan skapa en Animerad. Värde och initiera den med det initiala tillståndsvärdet på räkna:

konst App = () => {
konst [count, setCount] = useState(0);
konst animerat värde = ny Animerad. Värde (antal);
};

Sedan, närhelst räkna state värde uppdateringar, kan du uppdatera animerat värde för:

konst handlebuttonClick = () => {
 setCounter (räkna + 1);
 Animated.timing (animatedValue, {
 toValue: räkna + 1,
 varaktighet: 500,
 useNativeDriver: Sann
 }).Start();
};

Det här exemplet uppdateras animerat värde använda Animated.timing() metod när en användare klickar på knappen. De animerat värde driver animeringen och den ändrar värde över 500 millisekunder.

Genom att relatera Animerad. Värde till ett tillståndsvärde på detta sätt kan du skapa animationer som svarar på ändringar i din komponents tillstånd.

Nu förstår du hur du manipulerar ett animerat värde, du kan sedan gå vidare med att interpolera det animerade värdet och mappa det till en stilegenskap för din komponent med hjälp av Animated.interpolate() metod.

Till exempel:

konst opacitet = animatedValue.interpolate({
 input Range: [0, 1],
 output Range: [0, 1]
});
lämna tillbaka (

 {/* ditt komponentinnehåll */}
 </View>
);

Detta kommer att skapa en animation som gradvis bleknar i Se komponent när det animerade värdet ändras från 0 till 1.

Förstå animationstyper

Att förstå animationstyperna och hur de fungerar är viktigt för att skapa bra animationer.

Använda använd NativeDriver alternativet med Animerad förbättrar prestandan. Det här alternativet låter dig ladda ner animationer till den inbyggda UI-tråden. Det kan förbättra prestandan avsevärt genom att minska mängden JavaScript-bearbetning som krävs.

Men inte alla animationstyper stöder den inbyggda drivrutinen. Att försöka använda den inbyggda drivrutinen med animeringar som involverar färg- eller layoutändringar kan orsaka oväntat beteende.

Dessutom kan animationer som involverar komplexa sekvenser orsaka betydande prestandaproblem på enheter med begränsad processorkraft eller minne. Dessa prestandabrister kan också vara anmärkningsvärda om ditt React Native-projekt kör en lägre version som inte gör det stödja Hermes-motorn.

Att förstå styrkorna och begränsningarna hos olika animationstyper kan hjälpa dig att välja rätt tillvägagångssätt för ditt användningsfall.

Bli bekväm med React Native-animationer

Animationer är ett kraftfullt verktyg för att skapa engagerande och dynamiska användargränssnitt i React Native-appar. Animated API ger ett flexibelt och prestandafullt sätt att skapa både enkla och komplexa sekvensanimationer.

Ändå är det viktigt att överväga prestandaeffekten av animationer och välja rätt tillvägagångssätt och bibliotek att använda för din situation.