Použití metody Animated.spring() pro dynamické animace v React Native

Knihovna React Native Animated API vám může pomoci vytvořit dynamické, plynulé animace s minimálním úsilím.

Naučte se vytvářet animace s efektem podobným pružině, pak zjistěte, jak ovládat jejich trvání a rychlost, a aplikovat je ve scénářích reálného světa.

Co jsou dynamické animace?

Dynamické animace jsou animace, kde pohyby animovaných objektů nejsou předem naprogramovány. Můžete je spustit v reakci na interakci uživatele nebo změny prostředí. Tato technika je nejoblíbenější v animace videoher, aplikace sociálních médií nebo jiné formy interaktivních médií.

Dynamické animace mohou uživatelům poskytnout působivější a poutavější zážitek, protože umožňují nepředvídatelné a citlivé pohyby, které se mohou měnit na základě několika faktorů.

Animace v mobilních aplikacích se v průběhu let stávají stále složitějšími. Výchozí animované API React Native bylo rozšířeno, aby vyhovovalo těmto složitostem. The Animated.spring()

metoda, kterou API poskytuje, může animovat objekty React Native a vytvořit tak dynamický efekt.

Ovládání animace

Při použití Animated.spring() budete muset mít kontrolu nad animací, abyste zajistili, že se bude chovat tak, jak si přejete. Animated poskytuje sadu metod pro ruční ovládání a manipulaci s animacemi React Native.

Jednou z těchto metod je stop(), což způsobí, že se animace zastaví na aktuální hodnotě. Tato metoda je užitečná, když potřebujete zrušit animaci nebo ji vrátit do původního stavu.

Například:

konst stopAnimace = () => {
 position.stop(hodnota => {
 position.setValue(0);
 });
};

Všimněte si, jak můžete použít setValue() způsob resetování hodnoty polohy do původního stavu 0.

Další metodou, kterou máte k dispozici, je reset(), který vrátí animaci do původního stavu. Tato metoda je užitečná, když potřebujete restartovat animaci.

Aplikace v reálném světě

Můžete prozkoumat praktické využití Animated.spring() metodou vytvořením jednoduché animace. Kulatý míč spadne na povrch, když s ním uživatel interaguje, a poté se odrazí zpět do vzduchu. Měli byste již mít nativní projekt reakce, se kterým můžete pracovat.

Nejprve vytvořte stavovou proměnnou pro sledování polohy míče:

import Reagovat, { useState } z'reagovat';
import { Animované } z'react-native';
konst Aplikace = () => {
konst [position, setPosition] = useState(Nový Animovaný. Hodnota(0));

vrátit se (
přeměnit: [{ přeložitY: pozice }] }}>
 {/* Složka koule zde */}
 </Animated.View>
 );
};

Použití Animovaný. Hodnota k vytvoření stavové proměnné tzv pozice který bude sledovat vertikální polohu míče. Zabalit Pohled komponenta v Animovaný. Pohled takže na něj můžete použít animace.

Dále vytvořte animační funkci, která způsobí, že míč spadne a odrazí se nahoru:

konst startAnimation = () => {
 Animated.spring (position, {
 toValue: 300,
 tření: 1,
 napětí: 10,
 useNativeDriver: skutečný,
 }).Start(() => {
 Animated.spring (position, {
 toValue: 0,
 tření: 1,
 napětí: 10,
 useNativeDriver: skutečný,
 }).Start();
 });
};

Použití Animated.spring() pro vytvoření animace, která přesune míč z jeho počáteční polohy 0 do konečné polohy 300. Upřesněte tření a napětí hodnoty pro ovládání odrazového efektu míčku při nastavení použijte NativeDriver na skutečný zlepšit výkon.

Poté můžete implementovat kód pro spuštění animace, když uživatel interaguje s míčem:

vrátit se (

přeměnit: [{ přeložitY: pozice }] }}>
 {/* Složka koule zde */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Tento kód obaluje Animovaný. Pohled komponenta v TouchableWithoutFeedback aby se animace spustila, když uživatel stiskne míč. Animaci můžete spustit také při připojení komponenty voláním startAnimation() funkce uvnitř React's useEffect() háček.

S tímto kódem byste měli mít vytvořenou animaci padající koule pomocí Animated.spring().

Dynamické animace v React Native

Viděli jste, jak implementovat animaci padající koule pomocí Animated.spring(), ale existuje mnoho dalších způsobů, jak ji použít k vytvoření dynamických animací.

Můžete například použít Animated.spring() k vytvoření animací, které simulují jiné pohyby založené na fyzice, jako je houpání nebo otáčení objektů.

Kombinací Animated.spring() s dalšími animačními funkcemi, jako je Animated.timing() nebo Animated.sequence(), můžete vytvářet složité a plynulé animace, které vylepšují uživatelský zážitek.