Kako ustvariti neprekinjeno animacijo v React Native z uporabo Animated.loop()

Ena od ključnih značilnosti animiranega API-ja React Native je Animated.loop() metoda, s katero lahko ustvarite neprekinjeno animacijo, ki se ponavlja v nedogled.

Raziskali bomo, kako uporabiti metodo Animated.loop() za ustvarjanje neprekinjene animacije v React Native in se naučili, kako prilagoditi in izboljšati te animacije.

Razumevanje metode Animated.loop().

Če želite uporabiti metodo Animated.loop(), morate najprej ustvariti Animirano. Vrednost predmet. Ta vrednost se posodobi za vsak okvir animacijske zanke in bo uporabljena za animiranje ciljne komponente.

Enkrat Animirani. Vrednostni objekt je bil ustvarjen, lahko ga posredujete metodi Animated.loop() skupaj s konfiguracijskim objektom animacije, ki definira vedenje animacije.

Ta konfiguracijski objekt lahko vključuje lastnosti, kot so trajanje, lajšanje, in zamuda, ki določajo, kako se bo animacija obnašala.

Zanka vaše animacije

Metoda Animated.loop() privzeto ustvari neskončno zanko animacije, kar pomeni, da se bo animacija ponavljala, dokler ni ročno ustavljena. Vendar pa lahko določite trajanje zanke animacije tako, da nastavite ponovitve lastnost v objektu konfiguracije animacije.

Naslednji primer prikazuje, kako uporabiti Animation.loop() za ustvarjanje rotacijske animacije z zanko:

uvoz Odziv, {useState, useEffect} od'reagirati';
uvoz {Slogovni list, pogled, animirani, slika} od'react-native';
izvozprivzetofunkcijoaplikacija() {
konst [spinValue] = useState(novo Animirano. Vrednost (0));
 useEffect(() => {
konst spin = spinValue.interpolate({
 inputRange: [0, 1],
 outputRange: ['0deg', '360deg'],
 });
 Animated.loop(
 Animated.timing(
 spinValue,
 {
 ceniti: 1,
 trajanje: 2000,
 useNativeDriver: prav,
 }
 )
 ).start();
 }, []);
vrnitev (

 style={{ premer: 200, višina: 200, transformirati: [{ vrteti: spinValue }] }}
 vir={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
konst styles = StyleSheet.create({
 vsebnik: {
 upogib: 1,
 alignItems: 'center',
 justifyContent: 'center',
 },
});

V tem primeru ustvarimo Animated. Klican vrednostni objekt spinValue in nastavite njegovo začetno vrednost na 0. Nato pokličemo zanka() metoda na Animated.timing() objekt, ki kot svoj argument vzame spinValue stanja. Objekt Animated.timing() opisuje, kako bo animacija napredovala skozi čas, in v tem primeru obrne sliko za 360 stopinj.

Za nastavitev trajanja zanke smo podali a trajanje lastnosti objekta Animated.timing(), ki bo določil, kako dolgo se bo animacija izvajala pred zanko. Lastnost trajanja nastavimo na 2000, kar pomeni 2 sekundi pred ponovnim zagonom.

Nastavite lahko tudi, kolikokrat naj se animacija ponovi, tako da podate ponovitve lastnost metode loop().

Recimo, da želite, da se animacija petkrat ponovi, preden se ustavi. V tem primeru lahko pokličete Animated.loop() z ponovitve: 5. Če želite, da se animacija ponavlja v nedogled, lahko izpustite ponovitve premoženje v celoti.

Z uporabo Animation.loop(), nastavitvijo njenega trajanja in pravilna uporaba sloga CSS na vrnjeni objekt pogleda, lahko v React Native ustvarite animacije z gladko zanko.

Delo s kompleksno animacijo

Delo s kompleksno animacijo ni tako preprosto kot delo z eno samo animacijo. Običajno potrebujejo nekaj več dela, da zagotovijo, da se obnašajo po pričakovanjih.

Tukaj sta dva nasveta, ki vam bosta v pomoč pri ponavljanju zapletenih animacij v React Native:

1. Animacijo razdelite na manjše dele

Kompleksne animacije lahko razdelite na manjše, enostavnejše animacije, ki jih je mogoče zankati posamično. Na primer, kompleksno animacijo, ki vključuje vrtenje in prevajanje, je mogoče razdeliti na dve ločeni animaciji, ki se bosta neodvisno vrteli v zanki. Če animacijo razdelite na manjše dele, lahko kodo poenostavite in olajšate rokovanje.

2. Uporabite metodo Animated.sequence().

The Animated.sequence() vam omogoča zagon zaporedja animacij eno za drugo. S to metodo lahko ustvarite zapletene zanke z veriženjem animacij z eno zanko. Uporabite lahko Animated.sequence(), da ustvarite animacijo, ki najprej zbledi v sliki, jo obrne in nato zbledi, tako da se celotno zaporedje ponovi, ko je končano.

Ti nasveti so na voljo skupaj z splošni nasveti za optimizacijo vaših aplikacij React Native bi vam pomagal ustvariti zmogljive animacije z zankami.

Eksperimentirajte s svojo animacijo

Zanke v React Native so lahko močno orodje za ustvarjanje bolj privlačne in dinamične uporabniške izkušnje. Eksperimentirajte z različnimi tehnikami ustvarjanja zankastih animacij, da dosežete vizualno privlačno in učinkovito animacijo.