Használjon folyamatos animációt, hogy javítsa a felhasználói élményt a React Native alkalmazásban, és tegye magával ragadóbbá és élénkebbé.

A React Native Animated API egyik kulcsfontosságú funkciója a Animated.loop() módszer, amellyel folyamatos animációt hozhat létre, amely végtelenségig ismétlődik.

Megvizsgáljuk, hogyan használhatjuk az Animated.loop() metódust folyamatos animáció létrehozására a React Native alkalmazásban, és megtanuljuk, hogyan lehet testreszabni és javítani ezeket az animációkat.

Az Animated.loop() módszer megértése

Az Animated.loop() metódus használatához először létre kell hozni egy Élénk. Érték tárgy. Ez az érték az animációs hurok minden egyes képkockáján frissül, és a célkomponens animálására szolgál.

Egyszer az Animált. Az értékobjektum létrejött, átadhatja az Animated.loop() metódusnak egy animációs konfigurációs objektummal együtt, amely meghatározza az animáció viselkedését.

Ez a konfigurációs objektum olyan tulajdonságokat tartalmazhat, mint pl időtartama, enyhülés, és késleltetés, amelyek meghatározzák az animáció viselkedését.

instagram viewer

Looping Your Animation

Alapértelmezés szerint az Animated.loop() metódus egy végtelen ciklust hoz létre az animációból, ami azt jelenti, hogy az animáció mindaddig ismétlődik, amíg manuálisan le nem állítják. Megadhatja azonban az animációs ciklus időtartamát a iterációk tulajdonság az animációs konfigurációs objektumban.

A következő példa bemutatja, hogyan lehet az Animation.loop() segítségével létrehozni hurkos forgatási animációt:

import React, { useState, useEffect } tól től'reagál';
import { Stíluslap, Nézet, Animált, Kép } tól től"react-native";

exportalapértelmezettfunkcióApp() {
const [spinValue] = useState(új Élénk. Érték(0));

 useEffect(() => {
const spin = spinValue.interpolate({
inputRange: [0, 1],
kimeneti tartomány: ['0 fok', "360 fok"],
});

Animated.loop(
Animated.timing(
spinValue,
{
értékel: 1,
időtartam: 2000,
useNativeDriver: igaz,
}
)
).Rajt();
 }, []);

Visszatérés (

style={{ szélesség: 200, magasság: 200, átalakítani: [{ forog: spinValue }] }}
forrás={{ uri: ' https://reactjs.org/logo-og.png' }}
/>
</View>
 );
}

const styles = StyleSheet.create({
 konténer: {
Flex: 1,
alignItems: 'központ',
justifyContent: 'központ',
 },
});

Ebben a példában létrehozunk egy animált. Érték objektum hívva spinValue és állítsa be a kezdeti értékét 0-ra. Ezután hívjuk a hurok() módszer a Animated.timing() objektum, amely argumentumaként a spinValue állapotot veszi fel. Az Animated.timing() objektum leírja, hogy az animáció hogyan fog haladni az idő múlásával, és ebben az esetben 360 fokkal elforgatja a képet.

A hurok időtartamának beállításához átmentünk a időtartama tulajdonságot az Animated.timing() objektumhoz, amely meghatározza, hogy mennyi ideig futjon az animáció a ciklus előtt. A időtartam tulajdonságot 2000-re állítottuk, ami 2 másodpercet jelent az újraindítás előtt.

Azt is beállíthatja, hogy az animáció hányszor forduljon elő, ha átadja a iterációk tulajdonság a loop() metódushoz.

Tegyük fel például, hogy azt szeretné, hogy az animáció ötször ismétlődjön, mielőtt leállna. Ebben az esetben meghívhatja az Animated.loop()-t a segítségével iterációk: 5. Ha azt szeretné, hogy az animáció a végtelenségig ismétlődjön, elhagyhatja a iterációk tulajdon teljesen.

Az Animation.loop() használatával az időtartamát, és a CSS stílus megfelelő alkalmazása a visszaadott nézetobjektumhoz sima hurkos animációkat hozhat létre a React Native alkalmazásban.

Komplex animációval való munka

Összetett animációval dolgozni nem olyan egyszerű, mint egyetlen animációval. Általában egy kicsit több munkát igényelnek, hogy az elvárásoknak megfelelően viselkedjenek.

Íme két tipp, amelyek segítenek összetett animációk hurkolásakor a React Native alkalmazásban:

1. Bontsa fel az animációt kisebb részekre

Az összetett animációkat kisebb, egyszerűbb animációkra bonthatja, amelyek egyenként hurkolhatók. Például egy összetett animáció, amely elforgatást és fordítást is tartalmaz, két különálló animációra bontható, amelyek egymástól függetlenül hurkolódnak. Az animáció kisebb részekre bontásával leegyszerűsítheti a kódot, és könnyebbé teheti a kezelését.

2. Használja az Animated.sequence() módszert

A Animált.sequence() A módszer lehetővé teszi animációk sorozatának egymás utáni futtatását. Ezzel a módszerrel összetett hurkos animációk hozhatók létre az egyhurkos animációk láncolásával. Az Animated.sequence() segítségével létrehozhat egy animációt, amely először elhalványul a képen, elforgatja, majd elhalványítja, megismétli a teljes sorozatot, miután elkészült.

Ezeket a tippeket a általános tippek a React Native alkalmazások optimalizálásához segít előadó hurkos animációk létrehozásában.

Kísérletezzen animációjával

A React Native hurkolt animációi hatékony eszközt jelenthetnek a vonzóbb és dinamikusabb felhasználói élmény megteremtésében. Kísérletezzen különböző technikákkal hurkos animációk létrehozására, hogy látványosan tetszetős és hatékony animációt érjen el.