Kaip sukurti nuolatinę animaciją „React Native“ naudojant Animated.loop()

Viena iš pagrindinių „React Native“ animacinės API funkcijų yra Animated.loop() metodas, kuriuo galite sukurti nuolatinę animaciją, kuri kartojasi neribotą laiką.

Išnagrinėsime, kaip naudoti Animated.loop() metodą kuriant nuolatinę animaciją programoje „React Native“, ir išmoksime tinkinti bei tobulinti šias animacijas.

Animated.loop() metodo supratimas

Norėdami naudoti Animated.loop() metodą, pirmiausia turite sukurti Animuoti. Vertė objektas. Ši vertė atnaujinama kiekviename animacijos ciklo kadre ir bus naudojama tikslinio komponento animavimui.

Kartą Animacinis. Vertės objektas buvo sukurtas, galite perduoti jį metodui Animated.loop() kartu su animacijos konfigūracijos objektu, kuris apibrėžia animacijos elgesį.

Šis konfigūracijos objektas gali apimti tokias savybes kaip trukmės, palengvėjimas, ir delsimas, kurie nustato, kaip animacija elgsis.

Animacijos ciklas

Pagal numatytuosius nustatymus metodas Animated.loop() sukuria begalinę animacijos kilpą, o tai reiškia, kad animacija kartosis tol, kol bus sustabdyta rankiniu būdu. Tačiau galite nurodyti animacijos ciklo trukmę nustatydami iteracijos ypatybę animacijos konfigūracijos objekte.

Toliau pateiktame pavyzdyje parodyta, kaip naudoti Animation.loop() kuriant kilpinio sukimosi animaciją:

importuoti Reaguoti, { useState, useEffect } iš'reaguoti';
importuoti { Stiliaus lapas, rodinys, animuotas, vaizdas } iš'react-native';
eksportuotinumatytasfunkcijaProgramėlė() {
konst [spinValue] = useState(naujas Animuoti. Reikšmė(0));
 useEffect (() => {
konst sukimas = spinValue.interpolate({
 inputRange: [0, 1],
 išvesties diapazonas: ["0 laipsnių", "360 laipsnių"],
 });
 Animated.loop(
 Animated.timing(
 spinValue,
 {
 vertinti: 1,
 trukmė: 2000,
 useNativeDriver: tiesa,
 }
 )
 ).start();
 }, []);
grąžinti (

 style={{ plotis: 200, aukščio: 200, transformuoti: [{ pasukti: spinValue }] }}
 šaltinis={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
konst styles = StyleSheet.create({
 konteineris: {
 lankstus: 1,
 lygiuoti elementus: 'centras',
 JustifyContent: 'centras',
 },
});

Šiame pavyzdyje sukuriame animuotą. Vertės objektas vadinamas spinValue ir nustatykite jo pradinę reikšmę į 0. Tada mes skambiname kilpa () metodas ant Animated.timing() objektą, kuris savo argumentu laiko būseną spinValue. Objektas Animated.timing() aprašo, kaip animacija vystysis laikui bėgant, ir šiuo atveju jis pasuka vaizdą 360 laipsnių kampu.

Norėdami nustatyti ciklo trukmę, praėjome a trukmės ypatybę į Animated.timing() objektą, kuris nustatys, kiek laiko veiks animacija prieš paleidžiant kilpą. Nustatėme trukmės ypatybę į 2000, o tai reiškia, 2 sekundės prieš paleidžiant iš naujo.

Taip pat galite nustatyti, kiek kartų animacija turi pasikartoti, perduodama iteracijos savybė į ciklo() metodą.

Pavyzdžiui, tarkime, kad norite, kad animacija pasikartotų penkis kartus prieš sustodama. Tokiu atveju galite iškviesti Animated.loop() su iteracijos: 5. Jei norite, kad animacija tęstųsi neribotą laiką, galite praleisti iteracijos nuosavybė visiškai.

Naudodami Animation.loop(), nustatydami jo trukmę ir tinkamai pritaikyti CSS stilių į grąžintą peržiūros objektą, galite sukurti sklandžią kilpinę animaciją „React Native“.

Darbas su sudėtinga animacija

Darbas su sudėtinga animacija nėra toks paprastas, kaip dirbti su viena animacija. Paprastai jiems reikia šiek tiek daugiau dirbti, kad jie elgtųsi taip, kaip tikimasi.

Pateikiame du patarimus, kurie padės kurti sudėtingas animacijas „React Native“:

1. Suskaidykite animaciją į mažesnes dalis

Sudėtingas animacijas galite suskaidyti į mažesnes, paprastesnes animacijas, kurias galima susieti atskirai. Pavyzdžiui, sudėtinga animacija, apimanti ir pasukimą, ir vertimą, gali būti suskirstyta į dvi atskiras animacijas, kurios bus sukurtos atskirai. Suskaidydami animaciją į mažesnes dalis galite supaprastinti kodą ir palengvinti jo valdymą.

2. Naudokite Animated.sequence() metodą

The Animuotas.sequence() metodas leidžia paleisti animacijų seką vieną po kitos. Šiuo metodu galima sukurti sudėtingas kilpines animacijas, sujungiant vienos kilpos animaciją. Naudodami Animated.sequence() galite sukurti animaciją, kuri pirmiausia išnyksta vaizde, pasukama, o paskui išnyksta, pakartodama visą seką.

Šie patarimai pateikiami kartu su bendri patarimai, kaip optimizuoti „React Native“ programas padės sukurti našią kilpinę animaciją.

Eksperimentuokite su savo animacija

„React Native“ ciklo animacija gali būti galingas įrankis kuriant patrauklesnę ir dinamiškesnę vartotojo patirtį. Turėtumėte eksperimentuoti su įvairiais ciklo animacijos kūrimo būdais, kad gautumėte ir vizualiai patrauklią, ir našią animaciją.