Použitie metódy Animated.spring() pre dynamické animácie v React Native

Animovaná API knižnica React Native vám môže pomôcť vytvárať dynamické, plynulé animácie s malým úsilím.

Naučte sa vytvárať animácie s efektom podobným pružine, potom zistite, ako ovládať ich trvanie a rýchlosť, a použiť ich v reálnych scenároch.

Čo sú dynamické animácie?

Dynamické animácie sú animácie, kde pohyby animovaných objektov nie sú vopred naprogramované. Môžete ich spustiť v reakcii na interakciu používateľa alebo zmeny prostredia. Táto technika je najobľúbenejšia v animácie videohier, aplikácie sociálnych médií alebo iné formy interaktívnych médií.

Dynamické animácie môžu používateľom poskytnúť pohlcujúcejší a pútavejší zážitok, pretože umožňujú nepredvídateľné a citlivé pohyby, ktoré sa môžu meniť na základe viacerých faktorov.

Animácie v mobilných aplikáciách sú v priebehu rokov čoraz zložitejšie. Predvolené animované API React Native sa zlepšilo, aby vyhovovalo týmto zložitostiam. The Animated.spring()

Metóda, ktorú poskytuje API, dokáže animovať objekty React Native, čím vytvára dynamický efekt.

Ovládanie animácie

Pri použití Animated.spring() budete musieť mať kontrolu nad animáciou, aby ste sa uistili, že sa bude správať podľa vašich predstáv. Animated poskytuje súbor metód na manuálne ovládanie a manipuláciu s vašimi React Native animáciami.

Jednou z týchto metód je stop(), čo spôsobí zastavenie animácie na aktuálnej hodnote. Táto metóda je užitočná, keď potrebujete zrušiť animáciu alebo ju vrátiť do pôvodného stavu.

Napríklad:

konšt stopAnimácia = () => {
 position.stop(hodnotu => {
 position.setValue(0);
 });
};

Všimnite si, ako môžete použiť setValue() spôsob resetovania hodnoty polohy do pôvodného stavu 0.

Ďalšia metóda, ktorú máte k dispozícii, je reset(), ktorý vráti animáciu do pôvodného stavu. Táto metóda je užitočná, keď potrebujete reštartovať animáciu.

Aplikácie v reálnom svete

Môžete preskúmať praktické využitie Animated.spring() metóda vytvorením jednoduchej animácie. Guľatá lopta spadne na povrch, keď s ňou používateľ interaguje, a potom sa odrazí späť do vzduchu. Už by ste mali mať natívny projekt reakcie, s ktorým môžete pracovať.

Najprv vytvorte stavovú premennú na sledovanie polohy lopty:

importovať Reagovať, { useState } od'reagovať';
importovať { Animované } od„react-native“;
konšt Aplikácia = () => {
konšt [position, setPosition] = useState(Nový Animované. Hodnota(0));

vrátiť (
transformovať: [{ preložiťY: poloha }] }}>
 {/* Komponent loptičky tu */}
 </Animated.View>
 );
};

Použite Animované. Hodnota na vytvorenie stavovej premennej tzv pozíciu ktorý bude sledovať vertikálnu polohu lopty. Zabaliť vyhliadka komponent v Animované. vyhliadka takže naň môžete použiť animácie.

Ďalej vytvorte funkciu animácie, ktorá spôsobí, že lopta spadne a odrazí sa hore:

konšt začaťAnimácia = () => {
 Animated.spring (position, {
 ohodnotiť: 300,
 trenie: 1,
 napätie: 10,
 useNativeDriver: pravda,
 }).začať(() => {
 Animated.spring (position, {
 ohodnotiť: 0,
 trenie: 1,
 napätie: 10,
 useNativeDriver: pravda,
 }).start();
 });
};

Použite Animated.spring() na vytvorenie animácie, ktorá posunie loptičku z jej počiatočnej polohy 0 do konečnej polohy 300. Uveďte trenie a napätie hodnoty na ovládanie odrazového efektu lopty pri nastavovaní použite NativeDriver do pravda na zlepšenie výkonu.

Potom môžete implementovať kód na spustenie animácie, keď používateľ interaguje s loptou:

vrátiť (

transformovať: [{ preložiťY: poloha }] }}>
 {/* Komponent loptičky tu */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Tento kód obalí Animované. vyhliadka komponent v Dotykové bez spätnej väzby aby sa animácia spustila, keď používateľ stlačí loptičku. Animáciu môžete spustiť aj pri pripájaní komponentu volaním startAnimation() funkciu vnútri React's useEffect() háčik.

S týmto kódom by ste mali mať vytvorenú animáciu padajúcej gule pomocou Animated.spring().

Dynamické animácie v React Native

Videli ste, ako implementovať animáciu padajúcej gule pomocou Animated.spring(), ale existuje mnoho ďalších spôsobov, ako ju môžete použiť na vytvorenie dynamických animácií.

Môžete napríklad použiť Animated.spring() na vytvorenie animácií, ktoré simulujú iné pohyby založené na fyzike, ako sú hojdanie alebo otáčanie objektov.

Kombináciou funkcie Animated.spring() s ďalšími funkciami animácie, ako napríklad Animated.timing() alebo Animated.sequence(), môžete vytvárať komplexné a plynulé animácie, ktoré zlepšujú používateľský zážitok.