Kako stvoriti kontinuiranu animaciju u React Native pomoću Animated.loop()

Jedna od ključnih značajki React Native Animated API-ja je Animated.loop() metoda pomoću koje možete stvoriti kontinuiranu animaciju koja se ponavlja unedogled.

Istražit ćemo kako koristiti metodu Animated.loop() za stvaranje kontinuirane animacije u React Nativeu i naučiti kako prilagoditi i poboljšati te animacije.

Razumijevanje metode Animated.loop().

Da biste koristili metodu Animated.loop(), prvo morate stvoriti Animirani. Vrijednost objekt. Ova se vrijednost ažurira na svakom okviru petlje animacije i koristit će se za animiranje ciljne komponente.

Nakon što je Animirani. Objekt vrijednosti je stvoren, možete ga proslijediti metodi Animated.loop() zajedno s objektom konfiguracije animacije koji definira ponašanje animacije.

Ovaj konfiguracijski objekt može uključivati ​​svojstva kao što su trajanje, popuštanje, i odgoditi, koji određuju kako će se animacija ponašati.

Ponovno ponavljanje vaše animacije

Metoda Animated.loop() prema zadanim postavkama stvara beskonačnu petlju animacije, što znači da će se animacija nastaviti ponavljati dok se ručno ne zaustavi. Međutim, možete odrediti trajanje petlje animacije postavljanjem ponavljanja svojstvo u objektu konfiguracije animacije.

Sljedeći primjer koji pokazuje kako koristiti Animation.loop() za stvaranje rotacijske animacije u petlji:

uvoz Reagiraj, {useState, useEffect} iz'reagirati';
uvoz {Stilski list, prikaz, animirani, slika} iz'react-native';
izvozzadanofunkcijaaplikacija() {
konst [spinValue] = useState(novi Animirani. Vrijednost(0));
 useEffect(() => {
konst spin = spinValue.interpolate({
 inputRange: [0, 1],
 outputRange: ['0 stupnjeva', '360 stupnjeva'],
 });
 Animated.loop(
 Animated.timing(
 spinValue,
 {
 cijeniti: 1,
 trajanje: 2000,
 useNativeDriver: pravi,
 }
 )
 ).početak();
 }, []);
povratak (

 stil={{ širina: 200, visina: 200, transformirati: [{ rotirati: spinValue }] }}
 izvor={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
konst stilovi = StyleSheet.create({
 spremnik: {
 savijati: 1,
 poravnati stavke: 'centar',
 justifyContent: 'centar',
 },
});

U ovom primjeru stvaramo animirani. Pozvan objekt vrijednosti spinValue i postavite početnu vrijednost na 0. Zatim pozivamo petlja() metoda na Animated.timing() objekt, koji uzima stanje spinValue kao argument. Objekt Animated.timing() opisuje kako će animacija napredovati tijekom vremena, au ovom slučaju rotira sliku za 360 stupnjeva.

Da bismo postavili trajanje petlje, prošli smo a trajanje svojstvo za objekt Animated.timing(), koji će odrediti koliko dugo će se animacija izvoditi prije petlje. Postavili smo svojstvo trajanja na 2000, što znači 2 sekunde prije ponovnog pokretanja.

Također možete postaviti broj ponavljanja animacije dodavanjem ponavljanja svojstvo metode loop().

Na primjer, pretpostavimo da želite da se animacija ponovi pet puta prije zaustavljanja. U tom slučaju možete pozvati Animated.loop() s ponavljanja: 5. Ako želite da se animacija ponavlja beskonačno, možete izostaviti ponavljanja vlasništvo potpuno.

Korištenjem Animation.loop(), postavljanjem njenog trajanja i pravilnom primjenom CSS stila na vraćeni objekt prikaza, možete stvoriti glatke animacije s petljama u React Native.

Rad sa složenom animacijom

Rad sa složenom animacijom nije tako jednostavan kao rad s jednom animacijom. Obično im je potrebno malo više rada kako bi se osiguralo da se ponašaju prema očekivanjima.

Evo dva savjeta koji će vam pomoći pri ponavljanju složenih animacija u React Native:

1. Razdvojite animaciju na manje dijelove

Složene animacije možete rastaviti na manje, jednostavnije animacije koje se mogu pojedinačno ponavljati. Na primjer, složena animacija koja uključuje i rotaciju i prijevod može se rastaviti na dvije odvojene animacije koje će se neovisno vrtjeti u petlji. Razbijanjem animacije na manje dijelove možete pojednostaviti kod i učiniti ga lakšim za rukovanje.

2. Koristite metodu Animated.sequence().

The Animated.sequence() metoda vam omogućuje pokretanje niza animacija jednu za drugom. Ova metoda može stvoriti složene animacije s petljom lančanim animacijama s jednom petljom. Možete koristiti Animated.sequence() za stvaranje animacije koja najprije blijedi u slici, rotira je, a zatim je blijedi, ponavljajući cijelu sekvencu nakon završetka.

Ovi savjeti navedeni zajedno s opći savjeti za optimizaciju vaših React Native aplikacija pomoći će vam da stvorite učinkovite animacije u petlji.

Eksperimentirajte sa svojom animacijom

Animacije s petljama u React Nativeu mogu biti moćan alat za stvaranje privlačnijeg i dinamičnijeg korisničkog iskustva. Trebali biste eksperimentirati s različitim tehnikama za stvaranje animacija s petljama kako biste postigli vizualno privlačnu i učinkovitu animaciju.