Kom godt i gang med animationer i React Native

Animationer kan puste liv i en app, hvilket gør den mere engagerende og intuitiv for brugeren. Men hvis du er ny til React Native-animationer, kan det være lidt skræmmende at komme i gang.

Udforsk React Native-animationer og find ud af, hvordan du kan begynde at skabe smukke, glatte animationer.

Hvordan fungerer Basic React Native-animationer?

Animationer kan skabe jævne overgange mellem forskellige skærme eller elementer. De kan fremhæve information eller give feedback på brugerhandlinger. Animationer kan være enkle eller komplekse og kan bruge en række forskellige teknikker, såsom 2D- eller 3D-bevægelsesgrafik.

React Natives portabilitet gør det værd at bruge hvis du målretter mod flere platforme. En af dens stærkeste funktioner er evnen til at skabe smukke animationer til mobilapps.

Du kan animere et React Native-objekt blot ved at ændre positionstilstanden for den ønskede komponent.

For eksempel:

importere Reager, { useState, useEffect } fra'reagere';
importere { View, StyleSheet } fra'reager-native';
konst App = () => {
// Initialiser tilstand for at spore boksens position
konst [boxPosition, setBoxPosition] = useState(0);
// Brug useEffect-krogen til at opdatere boksens position hvert 1. sekund
 useEffect(() => {
konst interval = sætInterval(() => {
// Opdater boksens position ved at tilføje 10 til den aktuelle position
 setBoxPosition(prevPosition => prevPosition + 10);
 }, 1000);
// Returner en oprydningsfunktion for at rydde intervallet, når komponenten
// afmonteres
Vend tilbage() => clearInterval (interval);
 }, []);
// Indstil boksens position ved hjælp af tilstandsvariablen i den indbyggede stil
konst boxStyle = {
 transformer: [{ oversætY: boxPosition }]
 };
Vend tilbage (


 </View>
 );
};
konst styles = StyleSheet.create({
 beholder: {
 flex: 1,
 alignItems: 'centrum',
 justifyContent: 'centrum',
 },
 boks: {
 bredde: 100,
 højde: 100,
 baggrundsfarve: 'blå',
 },
});
eksportStandard App;

Denne kode gengiver en blå boks, der bevæger sig nedad hvert sekund. Animationen fungerer ved at bruge useEffect krog for at oprette en timer, der opdaterer boksposition tilstandsvariabel hvert 1. sekund.

Selvom dette kan fungere i nogle situationer, er dette ikke den bedste mulighed at gå med. Statusopdateringer i React Native fungerer asynkront, men animationer er afhængige af synkrone tilstandsopdateringer for at fungere korrekt. Implementering af din animation asynkront vil medføre, at tilstandsopdateringer ikke umiddelbart afspejles i komponentens gengivne output, hvilket ødelægger timingen af ​​dine animationer.

De er flere animationsbiblioteker som Animeret bibliotek, reagere-indfødt-reanimeret, og reagere-native-animerbar til at bygge effektive animationer i React Native. Hvert af disse animationsbiblioteker knuser spørgsmålet om asynkrone tilstandsopdateringer og er helt ideel.

React Native Animated API

Animated er en API, som React Native leverer. Du kan bruge det til at skabe jævne animationer, der reagerer på brugerinteraktioner eller tilstandsændringer.

Den animerede API giver dig mulighed for at oprette animerede værdier, som du kan interpolere og knytte til forskellige stilegenskaber for dine komponenter. Du kan derefter opdatere disse værdier over tid ved hjælp af forskellige animationsmetoder. Dine komponenters stilarter opdateres derefter, efterhånden som de animerede værdier ændres, hvilket resulterer i jævne animationer.

Animeret fungerer rigtig godt med React Natives layoutsystem. På grund af dette vil dine animationer blive korrekt integreret med resten af ​​din brugergrænseflade for et endnu bedre udseende.

For at komme i gang med at bruge Animated i dit React Native-projekt skal du importere Animeret modul fra 'reagere indfødt' ind i din kode:

importere { Animeret } fra'reager-native';

Med Animeret importeret kan du begynde at oprette animationer. For at gøre dette skal du først oprette en animeret værdi, som du vil manipulere gennem hele animationen:

konst animeret værdi = ny Animeret. Værdi(0);

Det Animeret. Værdi er en klasse i React Native Animated API, der repræsenterer en værdi, der kan ændres. Du kan initialisere den med en startværdi og derefter opdatere den over tid ved hjælp af forskellige animationsmetoder leveret af Animated API, som f.eks.timing(), .forår(), og .henfald(), ved at angive animationens varighed, lette funktion og andre parametre.

Den animerede værdi ligner en tilstandsværdi i en React-komponent.

Du kan initialisere en Animeret. Værdi med den oprindelige tilstandsværdi for en komponent, og opdater den derefter over tid ved hjælp af sætState metode.

For eksempel har du en komponent, der har en tilstandsværdi tælle, som repræsenterer antallet af gange, brugeren har klikket på knappen.

Du kan oprette en Animeret. Værdi og initialiser den med den oprindelige tilstandsværdi på tælle:

konst App = () => {
konst [count, setCount] = useState(0);
konst animeret værdi = ny Animeret. Værdi (antal);
};

Derefter, når som helst tælle tilstandsværdiopdateringer, kan du opdatere animeret værdi også:

konst handleknapKlik = () => {
 setCounter (tæller + 1);
 Animated.timing (animatedValue, {
 tilVærdi: tæl + 1,
 varighed: 500,
 useNativeDriver: rigtigt
 }).Start();
};

Dette eksempel opdateres animeret værdi bruger Animated.timing() metode, hver gang en bruger klikker på knappen. Det animeret værdi driver animationen, og den ændrer værdi over 500 millisekunder.

Ved at forholde sig Animeret. Værdi til en tilstandsværdi på denne måde, kan du oprette animationer, der reagerer på ændringer i din komponents tilstand.

Nu du forstår, hvordan du manipulerer en animeret værdi, kan du derefter gå videre til at interpolere den animerede værdi og tilknytte den til en stilegenskab for din komponent ved hjælp af Animated.interpolate() metode.

For eksempel:

konst opacitet = animatedValue.interpolate({
 inputområde: [0, 1],
 outputområde: [0, 1]
});
Vend tilbage (

 {/* dit komponentindhold */}
 </View>
);

Dette vil skabe en animation, der gradvist falmer ind Udsigt komponent, når den animerede værdi ændres fra 0 til 1.

Forstå animationstyper

At forstå animationstyperne og hvordan de fungerer er vigtigt for at skabe gode animationer.

Bruger brug NativeDriver mulighed med Animeret forbedrer ydeevnen. Denne mulighed lader dig overføre animationer til den oprindelige UI-tråd. Det kan forbedre ydeevnen betydeligt ved at reducere mængden af ​​JavaScript-behandling, der kræves.

Det er dog ikke alle animationstyper, der understøtter den oprindelige driver. Forsøger du at bruge den oprindelige driver med animationer, der involverer farve- eller layoutændringer, kan det forårsage uventet adfærd.

Derudover kan animationer, der involverer komplekse sekvenser, forårsage betydelige ydeevneproblemer på enheder med begrænset processorkraft eller hukommelse. Disse præstationsunderskud kan også være bemærkelsesværdige, hvis dit React Native-projekt kører en lavere version, der ikke gør det understøtter Hermes-motoren.

At forstå styrkerne og begrænsningerne ved forskellige animationstyper kan hjælpe dig med at vælge den rigtige tilgang til din brugssituation.

Bliv komfortabel med React Native-animationer

Animationer er et kraftfuldt værktøj til at skabe engagerende og dynamiske brugergrænseflader i React Native-apps. Den animerede API giver en fleksibel og effektiv måde at skabe både enkle og komplekse sekvensanimationer.

Alligevel er det vigtigt at overveje virkningen af ​​animationers ydeevne og vælge den passende tilgang og det passende bibliotek til din situation.