Jak vytvořit kontinuální animaci v React Native pomocí Animated.loop()

Jednou z klíčových funkcí animovaného API React Native je Animated.loop() metoda, pomocí které můžete vytvářet souvislou animaci, která se neomezeně opakuje.

Prozkoumáme, jak používat metodu Animated.loop() k vytvoření souvislé animace v React Native, a naučíme se, jak tyto animace přizpůsobit a vylepšit.

Pochopení metody Animated.loop()

Chcete-li použít metodu Animated.loop(), musíte nejprve vytvořit soubor Animovaný. Hodnota objekt. Tato hodnota se aktualizuje na každém snímku smyčky animace a bude použita k animaci cílové komponenty.

Jednou animovaný. Objekt Value byl vytvořen, můžete jej předat metodě Animated.loop() spolu s konfiguračním objektem animace, který definuje chování animace.

Tento konfigurační objekt může obsahovat vlastnosti jako např doba trvání, uvolnění, a zpoždění, které určují, jak se bude animace chovat.

Opakování vaší animace

Ve výchozím nastavení metoda Animated.loop() vytváří nekonečnou smyčku animace, což znamená, že animace se bude opakovat, dokud nebude ručně zastavena. Dobu trvání smyčky animace však můžete určit nastavením

iterací vlastnost v objektu konfigurace animace.

Následující příklad ukazuje, jak použít Animation.loop() k vytvoření animace otáčení ve smyčce:

import Reagovat, { useState, useEffect } z'reagovat';
import { StyleSheet, View, Animated, Image } z'react-native';
vývoznívýchozífunkceAplikace() {
konst [spinValue] = useState(Nový Animovaný. Hodnota(0));
 useEffect(() => {
konst spin = spinValue.interpolate({
 vstupní rozsah: [0, 1],
 výstupní rozsah: ['0deg', '360deg'],
 });
 Animated.loop(
 Animated.timing(
 spinValue,
 {
 toValue: 1,
 doba trvání: 2000,
 useNativeDriver: skutečný,
 }
 )
 ).Start();
 }, []);
vrátit se (

 styl={{ šířka: 200, výška: 200, přeměnit: [{ točit se: spinValue }] }}
 zdroj={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
konst styly = StyleSheet.create({
 kontejner: {
 flex: 1,
 alignItems: 'centrum',
 justifyContent: 'centrum',
 },
});

V tomto příkladu vytvoříme animovaný. Volaný objekt hodnoty spinValue a nastavte jeho počáteční hodnotu na 0. Poté zavoláme smyčka() metoda na Animated.timing() objekt, který jako argument přebírá stav spinValue. Objekt Animated.timing() popisuje, jak bude animace postupovat v průběhu času, a v tomto případě otočí obrázek o 360 stupňů.

Pro nastavení doby trvání smyčky jsme prošli a doba trvání vlastnost k objektu Animated.timing(), která určí, jak dlouho bude animace běžet, než se bude opakovat. Vlastnost trvání nastavíme na 2000, což znamená 2 sekundy před restartem.

Můžete také nastavit počet opakování animace předáním iterací vlastnost k metodě loop().

Předpokládejme například, že chcete, aby se animace před zastavením pětkrát opakovala. V takovém případě můžete zavolat Animated.loop() with iterace: 5. Pokud chcete, aby se animace opakovala donekonečna, můžete vynechat iterací majetek úplně.

Pomocí Animation.loop(), nastavením jeho trvání a správně použít styl CSS k vrácenému objektu pohledu můžete v React Native vytvářet plynulé smyčkové animace.

Práce s komplexní animací

Práce se složitou animací není tak přímočará jako práce s jedinou animací. Obvykle vyžadují trochu více práce, aby zajistili, že se budou chovat podle očekávání.

Zde jsou dva tipy, které vám pomohou při opakování složitých animací v React Native:

1. Rozdělte animaci na menší části

Složité animace můžete rozdělit na menší, jednodušší animace, které lze jednotlivě opakovat. Například složitou animaci, která zahrnuje rotaci i posun, lze rozdělit na dvě samostatné animace, které se budou opakovat nezávisle. Rozdělením animace na menší části můžete kód zjednodušit a usnadnit manipulaci.

2. Použijte metodu Animated.sequence().

The Animated.sequence() metoda umožňuje spustit sekvenci animací jednu po druhé. Tato metoda může vytvářet složité animace ve smyčce zřetězením animací s jednou smyčkou. Pomocí Animated.sequence() můžete vytvořit animaci, která nejprve v obrázku zeslabuje, otáčí jej a poté slábne, přičemž po dokončení celou sekvenci opakuje.

Tyto tipy poskytované spolu s obecné tipy pro optimalizaci aplikací React Native vám pomůže vytvořit výkonné smyčkové animace.

Experimentujte se svou animací

Smyčkové animace v React Native mohou být mocným nástrojem pro vytvoření poutavějšího a dynamičtějšího uživatelského zážitku. Měli byste experimentovat s různými technikami vytváření smyčkových animací, abyste dosáhli jak vizuálně přitažlivé, tak výkonné animace.