Verwenden der Animated.spring()-Methode für dynamische Animationen in React Native

Die animierte API-Bibliothek von React Native kann Ihnen dabei helfen, mit wenig Aufwand dynamische, flüssige Animationen zu erstellen.

Erfahren Sie, wie Sie Animationen mit einem frühlingshaften Effekt erstellen, dann finden Sie heraus, wie Sie ihre Dauer und Geschwindigkeit steuern und sie in realen Szenarien anwenden können.

Was sind dynamische Animationen?

Dynamische Animationen sind Animationen, bei denen die Bewegungen von animierten Objekten nicht vorprogrammiert sind. Sie können sie als Reaktion auf Benutzerinteraktionen oder Änderungen an der Umgebung starten. Die Technik ist am beliebtesten in Videospiel-Animation, Social-Media-Anwendungen oder andere Formen interaktiver Medien.

Dynamische Animationen können Benutzern ein immersiveres und ansprechenderes Erlebnis bieten, da sie unvorhersehbare und reaktionsschnelle Bewegungen ermöglichen, die sich aufgrund verschiedener Faktoren ändern können.

Animationen in mobilen Apps sind im Laufe der Jahre immer komplexer geworden. Die standardmäßige animierte API von React Native wurde weiterentwickelt, um diese Komplexitäten zu bewältigen. Der Animated.spring() Die von der API bereitgestellte Methode kann React Native-Objekte animieren und so einen dynamischen Effekt erzeugen.

Steuerung der Animation

Bei Verwendung der Animated.spring() -Methode müssen Sie die Kontrolle über die Animation haben, um sicherzustellen, dass sie sich wie gewünscht verhält. Animated bietet eine Reihe von Methoden zur manuellen Steuerung und Bearbeitung Ihrer React Native-Animationen.

Eine dieser Methoden ist stoppen(), wodurch die Animation bei ihrem aktuellen Wert angehalten wird. Diese Methode ist nützlich, wenn Sie eine Animation abbrechen oder auf ihren Anfangszustand zurücksetzen müssen.

Zum Beispiel:

konst StopAnimation = () => {
 position.stop(Wert => {
 position.setValue(0);
 });
};

Beachten Sie, wie Sie die verwenden können setValue() Methode, um den Positionswert auf seinen Anfangszustand zurückzusetzen 0.

Eine andere Methode, die Ihnen zur Verfügung steht, ist zurücksetzen(), wodurch die Animation in ihren ursprünglichen Zustand zurückversetzt wird. Diese Methode ist nützlich, wenn Sie eine Animation neu starten müssen.

Anwendungen aus der realen Welt

Sie können eine praktische Verwendung von erkunden Animated.spring() Methode durch Erstellen einer einfachen Animation. Ein runder Ball fällt auf eine Oberfläche, wenn ein Benutzer damit interagiert, und springt danach direkt wieder in die Luft. Sie sollten bereits ein React Native-Projekt haben, mit dem Sie arbeiten können.

Erstellen Sie zunächst eine Zustandsvariable, um die Position des Balls zu verfolgen:

importieren Reagieren, { useState } aus'reagieren';
importieren {Animiert} aus'reaktionsnativ';
konst Anwendung = () => {
konst [position, setPosition] = useState(neu Animiert. Wert(0));

zurückkehren (
verwandeln: [{ übersetzenY: Position }] }}>
 {/* Kugelkomponente hier */}
 </Animated.View>
 );
};

Verwenden Animiert. Wert um eine Zustandsvariable namens zu erstellen Position die die vertikale Position des Balls verfolgt. Wickeln Sie die Sicht Komponente hinein Animiert. Sicht damit Sie Animationen darauf anwenden können.

Erstellen Sie als Nächstes die Animationsfunktion, die den Ball fallen und hochspringen lässt:

konst startAnimation = () => {
 Animated.spring (Position, {
 schätzen: 300,
 Reibung: 1,
 Spannung: 10,
 useNativeDriver: WAHR,
 }).Start(() => {
 Animated.spring (Position, {
 schätzen: 0,
 Reibung: 1,
 Spannung: 10,
 useNativeDriver: WAHR,
 }).Start();
 });
};

Verwenden Animated.spring() um eine Animation zu erstellen, die den Ball von seiner Anfangsposition 0 zu einer Endposition 300 bewegt. Angeben Reibung Und Spannung Werte, um den Sprungeffekt des Balls während der Einstellung zu steuern Verwenden Sie NativeDriver Zu WAHR Leistung zu verbessern.

Sie können dann den Code implementieren, um die Animation auszulösen, wenn ein Benutzer mit dem Ball interagiert:

zurückkehren (

verwandeln: [{ übersetzenY: Position }] }}>
 {/* Kugelkomponente hier */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Dieser Code umschließt die Animiert. Sicht Komponente hinein AnfassbarOhneFeedback sodass die Animation ausgelöst wird, wenn der Benutzer auf den Ball drückt. Sie können die Animation auch auslösen, wenn die Komponente bereitgestellt wird, indem Sie die aufrufen startAnimation() Funktion innerhalb von React useEffect() Haken.

Mit diesem Code sollten Sie eine fallende Ballanimation erstellen Animated.spring().

Dynamische Animationen in React Native

Sie haben gesehen, wie Sie eine Animation eines fallenden Balls mit Animated.spring() implementieren, aber es gibt viele andere Möglichkeiten, wie Sie damit dynamische Animationen erstellen können.

Beispielsweise können Sie Animated.spring() verwenden, um Animationen zu erstellen, die andere physikbasierte Bewegungen simulieren, z. B. schwingende oder rotierende Objekte.

Durch die Kombination von Animated.spring() mit anderen Animationsfunktionen wie Animated.timing() oder Animated.sequence() können Sie komplexe und nahtlose Animationen erstellen, die das Benutzererlebnis verbessern.