So erstellen Sie eine kontinuierliche Animation in React Native mit Animated.loop()

Eine der Hauptfunktionen der animierten API von React Native ist die Animierte.Schleife() Methode, mit der Sie kontinuierliche Animationen erstellen können, die sich endlos wiederholen.

Wir werden untersuchen, wie Sie die Methode Animated.loop() verwenden, um kontinuierliche Animationen in React Native zu erstellen, und lernen, wie Sie diese Animationen anpassen und verbessern können.

Die Methode Animated.loop() verstehen

Um die Methode Animated.loop() zu verwenden, müssen Sie zuerst eine erstellen Animiert. Wert Objekt. Dieser Wert wird bei jedem Frame der Animationsschleife aktualisiert und zum Animieren der Zielkomponente verwendet.

Einmal die Animierte. Value-Objekt erstellt wurde, können Sie es zusammen mit einem Animationskonfigurationsobjekt, das das Animationsverhalten definiert, an die Animated.loop()-Methode übergeben.

Dieses Konfigurationsobjekt kann Eigenschaften wie z

Dauer, Lockerung, Und Verzögerung, die bestimmen, wie sich die Animation verhalten wird.

Schleifen Sie Ihre Animation

Standardmäßig erstellt die Animated.loop()-Methode eine Endlosschleife der Animation, was bedeutet, dass die Animation so lange wiederholt wird, bis sie manuell gestoppt wird. Sie können jedoch eine Dauer für die Animationsschleife festlegen, indem Sie die festlegen Iterationen -Eigenschaft im Animationskonfigurationsobjekt.

Das folgende Beispiel zeigt, wie Animation.loop() verwendet wird, um eine Rotationsschleifenanimation zu erstellen:

importieren Reagieren, { useState, useEffect } aus'reagieren';
importieren { StyleSheet, Ansicht, Animiert, Bild } aus'reaktionsnativ';
ExportStandardFunktionApp() {
konst [spinValue] = useState(neu Animiert. Wert(0));
 useEffect(() => {
konst Spin = spinValue.interpolate ({
 Eingabebereich: [0, 1],
 Ausgabebereich: ['0 Grad', '360 Grad'],
 });
 Animierte Schleife (
 Animiertes.timing(
 SpinWert,
 {
 schätzen: 1,
 Dauer: 2000,
 useNativeDriver: WAHR,
 }
 )
 ).Start();
 }, []);
zurückkehren (

 Stil={{ Breite: 200, Höhe: 200, verwandeln: [{ drehen: spinValue }] }}
 Quelle={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
konst Stile = StyleSheet.create({
 Behälter: {
 biegen: 1,
 ausrichtenItems: 'Center',
 begründenInhalt: 'Center',
 },
});

In diesem Beispiel erstellen wir eine Animated. Wertobjekt aufgerufen SpinWert und setze seinen Anfangswert auf 0. Wir rufen dann an Schleife() Methode auf der Animated.timing() -Objekt, das den Zustand spinValue als Argument verwendet. Das Objekt Animated.timing() beschreibt, wie die Animation im Laufe der Zeit fortschreitet, und in diesem Fall dreht es ein Bild um 360 Grad.

Um die Schleifendauer einzustellen, haben wir a übergeben Dauer -Eigenschaft an das Animated.timing()-Objekt, das bestimmt, wie lange die Animation vor der Schleife ausgeführt wird. Wir setzen die Eigenschaft duration auf 2000, was 2 Sekunden vor dem Neustart bedeutet.

Sie können auch festlegen, wie oft die Animation wiederholt werden soll, indem Sie die übergeben Iterationen -Eigenschaft an die Methode loop().

Angenommen, Sie möchten, dass die Animation fünfmal wiederholt wird, bevor sie anhält. In diesem Fall können Sie Animated.loop() mit aufrufen Iterationen: 5. Wenn Sie möchten, dass die Animation endlos wiederholt wird, können Sie das weglassen Iterationen Eigentum vollständig.

Indem Sie Animation.loop() verwenden, seine Dauer festlegen und CSS-Stil richtig anwenden zum zurückgegebenen Ansichtsobjekt können Sie in React Native glatte Schleifenanimationen erstellen.

Arbeiten mit komplexer Animation

Das Arbeiten mit komplexen Animationen ist nicht so einfach wie das Arbeiten mit einzelnen Animationen. Sie erfordern normalerweise etwas mehr Arbeit, um sicherzustellen, dass sie sich wie erwartet verhalten.

Hier sind zwei Tipps, die Ihnen beim Wiederholen komplexer Animationen in React Native helfen:

1. Unterteilen Sie die Animation in kleinere Teile

Sie können komplexe Animationen in kleinere, einfachere Animationen zerlegen, die einzeln wiederholt werden können. Beispielsweise kann eine komplexe Animation, die sowohl Rotation als auch Translation umfasst, in zwei separate Animationen zerlegt werden, die unabhängig voneinander wiederholt werden. Indem Sie die Animation in kleinere Teile aufteilen, können Sie den Code vereinfachen und leichter handhaben.

2. Verwenden Sie die Animated.sequence()-Methode

Der Animierte.Sequenz() -Methode können Sie eine Sequenz von Animationen nacheinander ausführen. Mit dieser Methode können komplexe Schleifenanimationen erstellt werden, indem Einzelschleifenanimationen verkettet werden. Sie können Animated.sequence() verwenden, um eine Animation zu erstellen, die ein Bild zuerst einblendet, es dreht und dann ausblendet, wobei die gesamte Sequenz wiederholt wird, sobald sie fertig ist.

Diese Tipps werden zusammen mit dem bereitgestellt Allgemeine Tipps zur Optimierung Ihrer React Native-Anwendungen würde Ihnen helfen, performante Schleifenanimationen zu erstellen.

Experimentieren Sie mit Ihrer Animation

Schleifenanimationen in React Native können ein leistungsstarkes Werkzeug sein, um eine ansprechendere und dynamischere Benutzererfahrung zu schaffen. Sie sollten mit verschiedenen Techniken zum Erstellen von Animationsschleifen experimentieren, um sowohl optisch ansprechende als auch leistungsstarke Animationen zu erzielen.