Continue animatie maken in React Native met behulp van Animated.loop()

Een van de belangrijkste kenmerken van de geanimeerde API van React Native is de Geanimeerde.loop() methode waarmee u een doorlopende animatie kunt maken die voor onbepaalde tijd wordt herhaald.

We zullen onderzoeken hoe u de methode Animated.loop() kunt gebruiken om doorlopende animaties te maken in React Native en leren hoe u deze animaties kunt aanpassen en verbeteren.

De methode Animated.loop() begrijpen

Om de methode Animated.loop() te gebruiken, moet u eerst een Geanimeerd. Waarde voorwerp. Deze waarde wordt bij elk frame van de animatielus bijgewerkt en wordt gebruikt om de doelcomponent te animeren.

Zodra de geanimeerde. Value-object is gemaakt, kunt u dit doorgeven aan de methode Animated.loop() samen met een animatieconfiguratieobject dat het animatiegedrag definieert.

Dit configuratieobject kan eigenschappen bevatten zoals duur, versoepeling, En vertraging, die bepalen hoe de animatie zich zal gedragen.

Looping van uw animatie

De methode Animated.loop() maakt standaard een oneindige lus van de animatie, wat betekent dat de animatie wordt herhaald totdat deze handmatig wordt gestopt. U kunt echter een duur voor de animatielus specificeren door de iteraties eigenschap in het animatieconfiguratieobject.

In het volgende voorbeeld wordt getoond hoe u Animation.loop() kunt gebruiken om een ​​lusvormige rotatie-animatie te maken:

importeren Reageren, { useState, useEffect } van'Reageer';
importeren { StyleSheet, weergave, animatie, afbeelding } van'reageren-native';
exporterenstandaardfunctieapp() {
const [spinValue] = useState(nieuw Geanimeerd. Waarde(0));
 gebruikEffect(() => {
const spin = spinValue.interpoleren({
 Invoerbereik: [0, 1],
 uitvoerBereik: ['0 graden', '360 graden'],
 });
 Geanimeerde.loop(
 Geanimeerde.timing(
 spinwaarde,
 {
 waarderen: 1,
 duur: 2000,
 gebruik NativeDriver: WAAR,
 }
 )
 ).begin();
 }, []);
opbrengst (

 stijl={{ breedte: 200, hoogte: 200, transformeren: [{ draaien: spinValue }] }}
 bron={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
const stijlen = StyleSheet.create({
 houder: {
 buigen: 1,
 uitlijnenItems: 'centrum',
 rechtvaardigenInhoud: 'centrum',
 },
});

In dit voorbeeld maken we een Animated. Waardeobject aangeroepen spinWaarde en stel de beginwaarde in op 0. Wij bellen dan de lus() methode op de Geanimeerde.timing() object, dat de status spinValue als argument heeft. Het object Animated.timing() beschrijft hoe de animatie in de loop van de tijd zal verlopen, en in dit geval wordt een afbeelding 360 graden gedraaid.

Om de duur van de lus in te stellen, hebben we a duur eigenschap aan het object Animated.timing() toe, waarmee wordt bepaald hoe lang de animatie wordt uitgevoerd voordat deze wordt herhaald. We hebben de eigenschap duration ingesteld op 2000, wat 2 seconden betekent voordat opnieuw wordt opgestart.

U kunt ook het aantal keren instellen dat de animatie herhaald moet worden door de iteraties eigenschap aan de methode loop() toe.

Stel dat u wilt dat de animatie vijf keer wordt herhaald voordat hij stopt. In dat geval kunt u Animated.loop() aanroepen met herhalingen: 5. Als u wilt dat de animatie voor onbepaalde tijd wordt herhaald, kunt u de iteraties eigendom volledig.

Door Animation.loop() te gebruiken, de duur ervan in te stellen, en CSS-stijl correct toepassen naar het geretourneerde weergaveobject, kunt u animaties met vloeiende loops maken in React Native.

Werken met complexe animatie

Werken met complexe animatie is niet zo eenvoudig als werken met een enkele animatie. Ze hebben meestal wat meer werk nodig om ervoor te zorgen dat ze zich gedragen zoals verwacht.

Hier zijn twee tips die u zullen helpen bij het herhalen van complexe animaties in React Native:

1. Breek de animatie in kleinere delen

U kunt complexe animaties opsplitsen in kleinere, eenvoudigere animaties die afzonderlijk kunnen worden herhaald. Een complexe animatie die zowel rotatie als vertaling omvat, kan bijvoorbeeld worden opgesplitst in twee afzonderlijke animaties, die onafhankelijk van elkaar worden herhaald. Door de animatie in kleinere delen op te splitsen, kunt u de code vereenvoudigen en gemakkelijker te hanteren maken.

2. Gebruik de Animated.sequence()-methode

De Geanimeerde.reeks() Met de methode kunt u een reeks animaties achter elkaar uitvoeren. Deze methode kan complexe animaties met een lus maken door animaties met een enkele lus aan elkaar te koppelen. U kunt Animated.sequence() gebruiken om een ​​animatie te maken die eerst een afbeelding infaden, roteren en vervolgens uitfaden, waarbij de hele reeks wordt herhaald als deze eenmaal is voltooid.

Deze tips verstrekt samen met de algemene tips voor het optimaliseren van uw React Native-applicaties zou u helpen bij het maken van performante animaties met een lus.

Experimenteer met je animatie

Loop-animaties in React Native kunnen een krachtige tool zijn voor het creëren van een meer boeiende en dynamische gebruikerservaring. U moet experimenteren met verschillende technieken voor het maken van loop-animaties om zowel visueel aantrekkelijke als performante animaties te bereiken.