Aan de slag met animaties in React Native

Animaties kunnen een app tot leven brengen, waardoor deze aantrekkelijker en intuïtiever wordt voor de gebruiker. Maar als React Native-animaties nieuw voor je zijn, kan het een beetje ontmoedigend zijn om aan de slag te gaan.

Verken React Native-animaties en ontdek hoe u kunt beginnen met het maken van prachtige, vloeiende animaties.

Hoe werken Basic React Native-animaties?

Animaties kunnen vloeiende overgangen tussen verschillende schermen of elementen creëren. Ze kunnen informatie markeren of feedback geven over gebruikersacties. Animaties kunnen eenvoudig of complex zijn en kunnen verschillende technieken gebruiken, zoals bewegende beelden in 2D of 3D.

De draagbaarheid van React Native maakt het de moeite waard om te gebruiken als u zich op meerdere platforms richt. Een van de sterkste functies is de mogelijkheid om prachtige animaties voor mobiele apps te maken.

U kunt een React Native-object animeren door simpelweg de positiestatus van het gewenste onderdeel te wijzigen.

Bijvoorbeeld:

importeren Reageren, { useState, useEffect } van'Reageer';
importeren { Weergeven, StyleSheet } van'reageren-native';
const App= () => {
// Initialiseer de status om de positie van de box te volgen
const [boxPosition, setBoxPosition] = useState(0);
// Gebruik de useEffect hook om de boxpositie elke seconde bij te werken
 gebruikEffect(() => {
const interval = setInterval(() => {
// Werk de boxpositie bij door 10 toe te voegen aan de huidige positie
 setBoxPositie(vorigePositie => vorigePositie + 10);
 }, 1000);
// Retourneer een opschoonfunctie om het interval te wissen wanneer de component
// ontkoppelt
opbrengst() => clearInterval (interval);
 }, []);
// Stel de boxpositie in met behulp van de state-variabele in de inline-stijl
const boxStijl = {
 transformeren: [{ vertalenY: boxPositie }]
 };
opbrengst (


 </View>
 );
};
const stijlen = StyleSheet.create({
 houder: {
 buigen: 1,
 uitlijnenItems: 'centrum',
 rechtvaardigenInhoud: 'centrum',
 },
 doos: {
 breedte: 100,
 hoogte: 100,
 Achtergrond kleur: 'blauw',
 },
});
exporterenstandaard App;

Deze code geeft een blauw vak weer dat elke seconde naar beneden beweegt. De animatie werkt met behulp van de gebruikEffect hook om een ​​timer te maken die de boxPositie toestandsvariabele elke 1 seconde.

Hoewel dit in sommige situaties kan werken, is dit niet de beste optie. Statusupdates in React Native werken asynchroon, maar animaties zijn afhankelijk van synchrone statusupdates om correct te werken. Als u uw animatie asynchroon implementeert, worden statusupdates niet onmiddellijk weerspiegeld in de weergegeven uitvoer van de component, waardoor de timing van uw animaties in de war raakt.

Het zijn verschillende animatiebibliotheken zoals de Geanimeerd bibliotheek, reactie-native-gereanimeerd, En reactie-native-animatable voor het bouwen van performante animaties in React Native. Elk van deze animatiebibliotheken lost het probleem van asynchrone statusupdates op en is perfect ideaal.

De React Native geanimeerde API

Animated is een API die React Native biedt. U kunt het gebruiken om vloeiende animaties te maken die reageren op gebruikersinteracties of statusveranderingen.

Met de geanimeerde API kunt u geanimeerde waarden maken die u kunt interpoleren en toewijzen aan verschillende stijleigenschappen van uw componenten. U kunt deze waarden vervolgens in de loop van de tijd bijwerken met behulp van verschillende animatiemethoden. De stijlen van uw componenten worden vervolgens bijgewerkt naarmate de geanimeerde waarden veranderen, wat resulteert in vloeiende animaties.

Animated werkt heel goed met het lay-outsysteem van React Native. Hierdoor worden uw animaties goed geïntegreerd met de rest van uw gebruikersinterface voor een nog betere uitstraling.

Om aan de slag te gaan met Animated in uw React Native-project, moet u het Geanimeerd module van ‘reageren-native' in je code:

importeren { Geanimeerd } van'reageren-native';

Met Animated geïmporteerd, kunt u beginnen met het maken van animaties. Om dit te doen, maakt u eerst een geanimeerde waarde die u gedurende de hele animatie zult manipuleren:

const geanimeerde waarde = nieuw Geanimeerd. Waarde(0);

De Geanimeerd. Waarde is een klasse in de React Native Animated API die een veranderlijke waarde vertegenwoordigt. U kunt het initialiseren met een beginwaarde en het vervolgens in de loop van de tijd bijwerken met behulp van verschillende animatiemethoden die door de geanimeerde API worden geboden, zoals .timing(), .lente(), En .verval(), door de duur van de animatie, de versnellingsfunctie en andere parameters op te geven.

De geanimeerde waarde is vergelijkbaar met een statuswaarde in een React-component.

U kunt een Geanimeerd. Waarde met de initiële statuswaarde van een component en deze vervolgens na verloop van tijd bijwerken met behulp van de setState methode.

U hebt bijvoorbeeld een component met een statuswaarde graaf, wat staat voor het aantal keren dat de gebruiker op die knop heeft geklikt.

U kunt een Geanimeerd. Waarde en initialiseer het met de initiële statuswaarde van graaf:

const App= () => {
const [telling, setCount] = useState(0);
const geanimeerde waarde = nieuw Geanimeerd. Waarde (aantal);
};

Dan, wanneer de graaf statuswaarde-updates, u kunt updaten geanimeerde waarde te:

const handlebuttonKlik = () => {
 setCounter (tel + 1);
 Animated.timing (animatedValue, {
 toValue: tel + 1,
 duur: 500,
 gebruik NativeDriver: WAAR
 }).begin();
};

Dit voorbeeld wordt bijgewerkt geanimeerde waarde de... gebruiken Geanimeerde.timing() methode wanneer een gebruiker op de knop klikt. De geanimeerde waarde stuurt de animatie aan en deze verandert van waarde gedurende 500 milliseconden.

Door te relateren Geanimeerd. Waarde op deze manier naar een statuswaarde kunt u animaties maken die reageren op veranderingen in de status van uw component.

Nu u begrijpt hoe u een geanimeerde waarde kunt manipuleren, kunt u doorgaan met Interpoleren van de geanimeerde waarde en deze toewijzen aan een stijleigenschap van uw component met behulp van de Geanimeerd.interpoleren() methode.

Bijvoorbeeld:

const dekking = geanimeerdeWaarde.interpoleren({
 Invoerbereik: [0, 1],
 uitvoerBereik: [0, 1]
});
opbrengst (

 {/* uw componentinhoud */}
 </View>
);

Hierdoor wordt een animatie gemaakt die geleidelijk vervaagt in het Weergave component als de geanimeerde waarde verandert van 0 in 1.

Animatietypen begrijpen

Het begrijpen van de soorten animaties en hoe ze werken is belangrijk voor het maken van goede animaties.

De... gebruiken gebruik NativeDriver optie met Animated verbetert de prestaties. Met deze optie kunt u animaties overbrengen naar de native UI-thread. Het kan de prestaties aanzienlijk verbeteren door de benodigde hoeveelheid JavaScript-verwerking te verminderen.

Niet alle animatietypen ondersteunen echter de native driver. Proberen om de native driver te gebruiken met animaties die kleur- of lay-outveranderingen bevatten, kunnen onverwacht gedrag veroorzaken.

Bovendien kunnen animaties met complexe reeksen aanzienlijke prestatieproblemen veroorzaken op apparaten met beperkte verwerkingskracht of geheugen. Deze prestatietekorten kunnen ook merkbaar zijn als uw React Native-project een lagere versie draait die dat niet doet ondersteuning van de Hermes-motor.

Als u de sterke punten en beperkingen van verschillende soorten animaties begrijpt, kunt u de juiste aanpak kiezen voor uw use-case.

Voel je op je gemak met React Native Animations

Animaties zijn een krachtige tool voor het creëren van boeiende en dynamische gebruikersinterfaces in React Native-apps. De geanimeerde API biedt een flexibele en krachtige manier om zowel eenvoudige als complexe reeksanimaties te maken.

Toch is het belangrijk om rekening te houden met de prestatie-impact van animaties en de juiste aanpak en bibliotheek te kiezen voor uw situatie.