Komme i gang med animasjoner i React Native

Animasjoner kan blåse liv i en app, noe som gjør den mer engasjerende og intuitiv for brukeren. Men hvis du er ny med React Native-animasjoner, kan det være litt skremmende å komme i gang.

Utforsk React Native-animasjoner og finn ut hvordan du kan begynne å lage vakre, jevne animasjoner.

Hvordan fungerer Basic React Native-animasjoner?

Animasjoner kan skape jevne overganger mellom ulike skjermer eller elementer. De kan fremheve informasjon eller gi tilbakemelding på brukerhandlinger. Animasjoner kan være enkle eller komplekse og kan bruke en rekke teknikker, for eksempel 2D- eller 3D-bevegelsesgrafikk.

React Natives portabilitet gjør det vel verdt å bruke hvis du målretter mot flere plattformer. En av de sterkeste egenskapene er muligheten til å lage vakre animasjoner for mobilapper.

Du kan animere et React Native-objekt ganske enkelt ved å endre posisjonstilstanden til den ønskede komponenten.

For eksempel:

import Reager, { useState, useEffect } fra'reagere';
import { View, StyleSheet } fra'reager-innfødt';
konst App = () => {
// Initialiser tilstand for å spore boksposisjonen
konst [boxPosition, setBoxPosition] = useState(0);
// Bruk useEffect-kroken til å oppdatere boksposisjonen hvert 1. sekund
 useEffect(() => {
konst intervall = setInterval(() => {
// Oppdater boksposisjonen ved å legge til 10 til gjeldende posisjon
 setBoxPosition(prevPosition => prevPosition + 10);
 }, 1000);
// Returner en oppryddingsfunksjon for å fjerne intervallet når komponenten
// demonteres
komme tilbake() => clearInterval (intervall);
 }, []);
// Sett boksposisjonen ved å bruke tilstandsvariabelen i den innebygde stilen
konst boxStyle = {
 forvandle: [{ oversettY: boxPosition }]
 };
komme tilbake (


 </View>
 );
};
konst styles = StyleSheet.create({
 beholder: {
 flex: 1,
 alignItems: 'senter',
 justifyContent: 'senter',
 },
 boks: {
 bredde: 100,
 høyde: 100,
 bakgrunnsfarge: 'blå',
 },
});
eksportmisligholde App;

Denne koden gjengir en blå boks som beveger seg nedover hvert sekund. Animasjonen fungerer ved å bruke useEffect krok for å lage en tidtaker som oppdaterer boksposisjon tilstandsvariabel hvert 1. sekund.

Selv om dette kan fungere i noen situasjoner, er dette ikke det beste alternativet å gå med. Tilstandsoppdateringer i React Native fungerer asynkront, men animasjoner er avhengige av synkrone tilstandsoppdateringer for å fungere riktig. Å implementere animasjonen din asynkront vil føre til at tilstandsoppdateringer ikke umiddelbart gjenspeiles i komponentens gjengitte utdata, noe som ødelegger timingen for animasjonene dine.

De er flere animasjonsbiblioteker som Animert bibliotek, reagere-innfødt-reanimert, og reagere-innfødt-animerbar for å bygge performante animasjoner i React Native. Hvert av disse animasjonsbibliotekene knuser problemet med asynkrone tilstandsoppdateringer og er helt ideelle.

React Native Animated API

Animated er et API som React Native tilbyr. Du kan bruke den til å lage jevne animasjoner som reagerer på brukerinteraksjoner eller tilstandsendringer.

Animated API lar deg lage animerte verdier som du kan interpolere og kartlegge til ulike stilegenskaper for komponentene dine. Du kan deretter oppdatere disse verdiene over tid ved å bruke ulike animasjonsmetoder. Stilene til komponentene dine vil deretter oppdateres etter hvert som de animerte verdiene endres, noe som resulterer i jevne animasjoner.

Animert fungerer veldig bra med React Natives layoutsystem. På grunn av dette vil animasjonene dine bli ordentlig integrert med resten av brukergrensesnittet for et enda bedre utseende.

For å komme i gang med å bruke Animated i ditt React Native-prosjekt, må du importere Animert modul fra 'reagere innfødt' inn i koden din:

import { Animert } fra'reager-innfødt';

Med animert importert kan du begynne å lage animasjoner. For å gjøre dette må du først lage en animert verdi som du vil manipulere gjennom hele animasjonen:

konst animert Verdi = ny Animert. Verdi(0);

De Animert. Verdi er en klasse i React Native Animated API som representerer en mutbar verdi. Du kan initialisere den med en startverdi, og deretter oppdatere den over tid ved å bruke ulike animasjonsmetoder levert av Animated API, som .timing(), .vår(), og .forfall(), ved å spesifisere animasjonens varighet, lettelsesfunksjon og andre parametere.

Den animerte verdien ligner på en tilstandsverdi i en React-komponent.

Du kan initialisere en Animert. Verdi med den opprinnelige tilstandsverdien til en komponent, og oppdater den deretter over tid ved å bruke setState metode.

For eksempel har du en komponent som har en tilstandsverdi telle, som representerer antall ganger brukeren har klikket på den knappen.

Du kan opprette en Animert. Verdi og initialiser den med starttilstandsverdien på telle:

konst App = () => {
konst [count, setCount] = useState(0);
konst animert Verdi = ny Animert. Verdi (antall);
};

Deretter, når som helst telle state verdioppdateringer, kan du oppdatere animert Verdi også:

konst handlebuttonClick = () => {
 setCounter (tell + 1);
 Animated.timing (animatedValue, {
 toValue: telle + 1,
 varighet: 500,
 useNativeDriver: ekte
 }).start();
};

Dette eksemplet oppdateres animert Verdi bruker Animated.timing() metode når en bruker klikker på knappen. De animert Verdi driver animasjonen, og den endrer verdi over 500 millisekunder.

Ved å forholde seg Animert. Verdi til en tilstandsverdi på denne måten, kan du lage animasjoner som reagerer på endringer i komponentens tilstand.

Nå forstår du hvordan du manipulerer en animert verdi, kan du gå videre til å interpolere den animerte verdien og tilordne den til en stilegenskap for komponenten din ved å bruke Animated.interpolate() metode.

For eksempel:

konst opacity = animatedValue.interpolate({
 input Range: [0, 1],
 output Range: [0, 1]
});
komme tilbake (

 {/* komponentinnholdet ditt */}
 </View>
);

Dette vil skape en animasjon som gradvis toner inn Utsikt komponent når den animerte verdien endres fra 0 til 1.

Forstå animasjonstyper

Å forstå animasjonstypene og hvordan de fungerer er viktig for å lage gode animasjoner.

Bruker bruk NativeDriver alternativet med Animert forbedrer ytelsen. Dette alternativet lar deg laste ned animasjoner til den opprinnelige UI-tråden. Det kan forbedre ytelsen betydelig ved å redusere mengden JavaScript-behandling som kreves.

Imidlertid støtter ikke alle animasjonstyper den opprinnelige driveren. Å prøve å bruke den opprinnelige driveren med animasjoner som involverer farge- eller layoutendringer, kan føre til uventet oppførsel.

I tillegg kan animasjoner som involverer komplekse sekvenser forårsake betydelige ytelsesproblemer på enheter med begrenset prosessorkraft eller minne. Disse ytelsessviktene kan også være merkbare hvis React Native-prosjektet ditt kjører en lavere versjon som ikke gjør det støtte Hermes-motoren.

Å forstå styrken og begrensningene til forskjellige animasjonstyper kan hjelpe deg med å velge riktig tilnærming for ditt bruksområde.

Bli komfortabel med React Native-animasjoner

Animasjoner er et kraftig verktøy for å lage engasjerende og dynamiske brukergrensesnitt i React Native-apper. Animated API gir en fleksibel og effektiv måte å lage både enkle og komplekse sekvensanimasjoner.

Likevel er det viktig å vurdere ytelseseffekten av animasjoner og velge riktig tilnærming og bibliotek for din situasjon.