Kā izveidot nepārtrauktu animāciju programmā React Native, izmantojot Animated.loop()

Viena no galvenajām React Native animētās API iezīmēm ir Animated.loop() metode, ar kuras palīdzību jūs varat izveidot nepārtrauktu animāciju, kas atkārtojas bezgalīgi.

Mēs izpētīsim, kā izmantot Animated.loop() metodi, lai programmā React Native izveidotu nepārtrauktu animāciju, un uzzināsim, kā pielāgot un uzlabot šīs animācijas.

Animated.loop() metodes izpratne

Lai izmantotu Animated.loop() metodi, vispirms ir jāizveido Animēts. Vērtība objektu. Šī vērtība tiek atjaunināta katrā animācijas cilpas kadrā un tiks izmantota mērķa komponenta animācijai.

Reiz animācija. Vērtības objekts ir izveidots, varat to nodot Animated.loop() metodei kopā ar animācijas konfigurācijas objektu, kas nosaka animācijas darbību.

Šis konfigurācijas objekts var ietvert tādas īpašības kā ilgums, atvieglošana, un kavēšanās, kas nosaka, kā animācija darbosies.

Animācijas atkārtošana

Pēc noklusējuma metode Animated.loop() izveido bezgalīgu animācijas cilpu, kas nozīmē, ka animācija turpinās atkārtot, līdz tā tiks manuāli apturēta. Tomēr jūs varat norādīt animācijas cilpas ilgumu, iestatot iterācijas rekvizītu animācijas konfigurācijas objektā.

Šis piemērs parāda, kā izmantot Animation.loop(), lai izveidotu cilpas rotācijas animāciju:

imports Reaģēt, { useState, useEffect } no'reaģēt';
imports { Style Sheet, View, Animated, Image } no'react-native';
eksportētnoklusējumafunkcijuApp() {
konst [spinValue] = useState(jauns Animēts. Vērtība(0));
 useEffect(() => {
konst spin = spinValue.interpolate({
 inputRange: [0, 1],
 izvades diapazons: ['0deg', "360 grādi"],
 });
 Animated.loop(
 Animated.timing(
 spinValue,
 {
 novērtēt: 1,
 ilgums: 2000,
 useNativeDriver: taisnība,
 }
 )
 ).sākt();
 }, []);
atgriezties (

 style={{ platums: 200, augstums: 200, pārveidot: [{ pagriezt: spinValue }] }}
 avots={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
konst stili = StyleSheet.create({
 konteiners: {
 flex: 1,
 alignItems: 'centrs',
 justifyContent: 'centrs',
 },
});

Šajā piemērā mēs izveidojam animāciju. Izsaukts vērtības objekts spinValue un iestatiet tā sākotnējo vērtību uz 0. Pēc tam mēs piezvanām uz cilpa () metode uz Animated.timing() objektu, kas kā argumentu izmanto stāvokli spinValue. Objekts Animated.timing() apraksta, kā animācija attīstīsies laika gaitā, un šajā gadījumā tas pagriež attēlu par 360 grādiem.

Lai iestatītu cilpas ilgumu, esam izturējuši a ilgums rekvizītu Animated.timing() objektam, kas noteiks, cik ilgi animācija darbosies pirms cilpas. Mēs iestatījām ilguma rekvizītu uz 2000, kas nozīmē 2 sekundes pirms restartēšanas.

Varat arī iestatīt, cik reižu animācijai jāatkārtojas, nododot iterācijas īpašība uz cilpas() metodi.

Piemēram, pieņemsim, ka vēlaties, lai animācija tiktu veikta piecas reizes pirms apstāšanās. Tādā gadījumā varat izsaukt Animated.loop() ar iterācijas: 5. Ja vēlaties, lai animācija darbotos bezgalīgi, varat izlaist iterācijas īpašums pilnībā.

Izmantojot Animation.loop(), iestatot tā ilgumu un pareizi piemērojot CSS stilu uz atgriezto skata objektu, varat izveidot vienmērīgas cilpas animācijas programmā React Native.

Darbs ar sarežģītu animāciju

Darbs ar sarežģītu animāciju nav tik vienkāršs kā darbs ar vienu animāciju. Viņiem parasti ir nepieciešams nedaudz vairāk darba, lai nodrošinātu, ka viņi darbojas, kā paredzēts.

Šeit ir divi padomi, kas jums palīdzēs, veidojot sarežģītas animācijas programmā React Native.

1. Sadaliet animāciju mazākās daļās

Sarežģītās animācijas var sadalīt mazākās, vienkāršākās animācijās, kuras var izveidot atsevišķi. Piemēram, sarežģītu animāciju, kas ietver gan pagriešanu, gan tulkošanu, var sadalīt divās atsevišķās animācijās, kuras tiks veidotas neatkarīgi. Sadalot animāciju mazākās daļās, varat vienkāršot kodu un atvieglot tā apstrādi.

2. Izmantojiet Animated.sequence() metodi

The Animated.sequence() metode ļauj palaist animāciju secību vienu pēc otras. Ar šo metodi var izveidot sarežģītas cilpas animācijas, ķēdējot vienas cilpas animācijas. Varat izmantot Animated.sequence(), lai izveidotu animāciju, kas vispirms pazūd attēlā, pagriež to un pēc tam izgaismo, atkārtojot visu secību, kad tā ir pabeigta.

Šie padomi tiek sniegti kopā ar vispārīgi padomi React Native lietojumprogrammu optimizēšanai palīdzēs jums izveidot izpildāmas cilpas animācijas.

Eksperimentējiet ar savu animāciju

Cilpas animācijas programmā React Native var būt spēcīgs instruments, lai radītu saistošāku un dinamiskāku lietotāja pieredzi. Lai izveidotu gan vizuāli pievilcīgu, gan veiktspējīgu animāciju, jums vajadzētu eksperimentēt ar dažādām cilpas animācijas izveides metodēm.