Ako vytvoriť súvislú animáciu v React Native pomocou Animated.loop()

Jednou z kľúčových funkcií animovaného API React Native je Animated.loop() metóda, pomocou ktorej môžete vytvárať nepretržitú animáciu, ktorá sa opakuje donekonečna.

Preskúmame, ako použiť metódu Animated.loop() na vytvorenie súvislej animácie v React Native, a naučíme sa, ako tieto animácie prispôsobiť a vylepšiť.

Pochopenie metódy Animated.loop().

Ak chcete použiť metódu Animated.loop(), musíte najprv vytvoriť súbor Animované. Hodnota objekt. Táto hodnota sa aktualizuje pri každom snímku slučky animácie a použije sa na animáciu cieľového komponentu.

Raz animovaný. Objekt Value bol vytvorený, môžete ho odovzdať metóde Animated.loop() spolu s objektom konfigurácie animácie, ktorý definuje správanie animácie.

Tento konfiguračný objekt môže obsahovať vlastnosti ako napr trvanie, zmiernenie, a meškanie, ktoré určujú, ako sa bude animácia správať.

Slučovanie vašej animácie

Metóda Animated.loop() štandardne vytvára nekonečnú slučku animácie, čo znamená, že animácia sa bude opakovať, kým sa manuálne nezastaví. Môžete však určiť trvanie slučky animácie nastavením iterácií vlastnosť v objekte konfigurácie animácie.

Nasledujúci príklad ukazuje, ako použiť Animation.loop() na vytvorenie animácie otáčania v slučke:

importovať Reaguj, { useState, useEffect } od'reagovať';
importovať { StyleSheet, View, Animated, Image } od„react-native“;
exportpredvolenáfunkciuApp() {
konšt [spinValue] = useState(Nový Animované. Hodnota(0));
 useEffect(() => {
konšt spin = spinValue.interpolate({
 vstupný rozsah: [0, 1],
 výstupný rozsah: ['0deg', "360 stupňov"],
 });
 Animated.loop(
 Animated.timing(
 spinValue,
 {
 ohodnotiť: 1,
 trvanie: 2000,
 useNativeDriver: pravda,
 }
 )
 ).start();
 }, []);
vrátiť (

 štýl={{ šírka: 200, výška: 200, transformovať: [{ točiť sa: spinValue }] }}
 zdroj={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
konšt styles = StyleSheet.create({
 kontajner: {
 flex: 1,
 alignItems: 'centrum',
 justifyContent: 'centrum',
 },
});

V tomto príklade vytvoríme animáciu. Volaný objekt hodnoty spinValue a nastavte jeho počiatočnú hodnotu na 0. Potom zavoláme slučka() metóda na Animated.timing() objekt, ktorý berie ako argument stav spinValue. Objekt Animated.timing() popisuje, ako bude animácia postupovať v priebehu času, a v tomto prípade otočí obrázok o 360 stupňov.

Na nastavenie trvania slučky sme prešli a trvanie vlastnosť na objekt Animated.timing(), ktorá určí, ako dlho bude animácia bežať pred zacyklením. Vlastnosť trvania sme nastavili na 2000, čo znamená 2 sekundy pred reštartom.

Môžete tiež nastaviť, koľkokrát sa má animácia zacykliť prejdením iterácií vlastnosť na metódu loop().

Predpokladajme napríklad, že chcete, aby sa animácia pred zastavením päťkrát zacyklila. V takom prípade môžete zavolať funkciu Animated.loop() s iterácie: 5. Ak chcete, aby sa animácia opakovala donekonečna, môžete vynechať iterácií majetok úplne.

Pomocou funkcie Animation.loop(), nastavením jej trvania a správne použiť štýl CSS na vrátený objekt zobrazenia môžete v React Native vytvárať plynulé animácie v slučke.

Práca s komplexnou animáciou

Práca s komplexnou animáciou nie je taká jednoduchá ako práca s jednou animáciou. Zvyčajne vyžadujú trochu viac práce, aby zabezpečili, že sa budú správať podľa očakávania.

Tu sú dva tipy, ktoré vám pomôžu pri opakovaní zložitých animácií v React Native:

1. Rozdeľte animáciu na menšie časti

Zložité animácie môžete rozdeliť na menšie, jednoduchšie animácie, ktoré možno jednotlivo opakovať. Napríklad komplexnú animáciu, ktorá zahŕňa otáčanie aj posúvanie, možno rozdeliť na dve samostatné animácie, ktoré sa budú opakovať nezávisle. Rozdelením animácie na menšie časti môžete zjednodušiť kód a uľahčiť manipuláciu.

2. Použite metódu Animated.sequence().

The Animated.sequence() metóda umožňuje spustiť sekvenciu animácií jednu po druhej. Táto metóda môže vytvoriť zložité animácie v slučke reťazením animácií s jednou slučkou. Pomocou Animated.sequence() môžete vytvoriť animáciu, ktorá najprv v obrázku zoslabne, otočí ho a potom zhasne, pričom po dokončení zopakuje celú sekvenciu.

Tieto tipy poskytnuté spolu s všeobecné tipy na optimalizáciu aplikácií React Native vám pomôže vytvoriť výkonné cyklické animácie.

Experimentujte so svojou animáciou

Slučkové animácie v React Native môžu byť výkonným nástrojom na vytvorenie pútavejšieho a dynamickejšieho používateľského zážitku. Mali by ste experimentovať s rôznymi technikami vytvárania slučkových animácií, aby ste dosiahli vizuálne príťažlivú a výkonnú animáciu.