Sådan opretter du kontinuerlig animation i React Native ved hjælp af Animated.loop()

En af nøglefunktionerne i React Natives animerede API er Animated.loop() metode, hvor du kan oprette kontinuerlig animation, der gentages i det uendelige.

Vi vil undersøge, hvordan man bruger Animated.loop()-metoden til at skabe kontinuerlig animation i React Native og lære, hvordan man tilpasser og forbedrer disse animationer.

Forståelse af Animated.loop()-metoden

For at bruge metoden Animated.loop() skal du først oprette en Animeret. Værdi objekt. Denne værdi opdateres på hver frame i animationsløkken og vil blive brugt til at animere målkomponenten.

Engang den animerede. Værdiobjektet er blevet oprettet, kan du videregive det til Animated.loop()-metoden sammen med et animationskonfigurationsobjekt, der definerer animationsadfærden.

Dette konfigurationsobjekt kan indeholde egenskaber som f.eks varighed, lempelse, og forsinke, som bestemmer, hvordan animationen vil opføre sig.

Looping din animation

Som standard opretter Animated.loop()-metoden en uendelig loop af animationen, hvilket betyder, at animationen fortsætter med at gentages, indtil den stoppes manuelt. Du kan dog angive en varighed for animationsløkken ved at indstille iterationer egenskab i animationskonfigurationsobjektet.

Følgende eksempel, der viser, hvordan man bruger Animation.loop() til at oprette en rotationsanimation med sløjfe:

importere Reager, { useState, useEffect } fra'reagere';
importere { StyleSheet, View, Animated, Image } fra'reager-native';
eksportStandardfungereApp() {
konst [spinValue] = useState(ny Animeret. Værdi(0));
 useEffect(() => {
konst spin = spinValue.interpolate({
 inputområde: [0, 1],
 outputområde: ['0 grader', '360 grader'],
 });
 Animated.loop(
 Animated.timing(
 spinValue,
 {
 At værdsætte: 1,
 varighed: 2000,
 useNativeDriver: rigtigt,
 }
 )
 ).Start();
 }, []);
Vend tilbage (

 stil={{ bredde: 200, højde: 200, transformere: [{ rotere: spinValue }] }}
 kilde={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
konst styles = StyleSheet.create({
 beholder: {
 flex: 1,
 alignItems: 'centrum',
 justifyContent: 'centrum',
 },
});

I dette eksempel opretter vi en animeret. Værdiobjekt kaldet spinVærdi og indstil dens startværdi til 0. Så ringer vi til loop() metode på Animated.timing() objekt, som tager staten spinValue som sit argument. Objektet Animated.timing() beskriver, hvordan animationen vil skride frem over tid, og i dette tilfælde roterer den et billede 360 ​​grader.

For at indstille sløjfens varighed har vi bestået en varighed egenskaben til Animated.timing()-objektet, som bestemmer, hvor længe animationen vil køre før looping. Vi indstiller egenskaben varighed til 2000, hvilket betyder 2 sekunder før genstart.

Du kan også indstille antallet af gange, animationen skal gå i løkke ved at bestå iterationer egenskab til loop() metoden.

Antag for eksempel, at du vil have animationen til at gå i loop fem gange, før den stopper. I så fald kan du kalde Animated.loop() med gentagelser: 5. Hvis du vil have animationen til at løkke på ubestemt tid, kan du udelade iterationer ejendom helt.

Ved at bruge Animation.loop(), indstille dens varighed, og anvende CSS-stil korrekt til det returnerede visningsobjekt, kan du oprette glatte loopede animationer i React Native.

Arbejde med kompleks animation

At arbejde med kompleks animation er ikke så ligetil som at arbejde med enkelt animation. De kræver normalt lidt mere arbejde for at sikre, at de opfører sig som forventet.

Her er to tips, der vil hjælpe dig, når du sløjfer komplekse animationer i React Native:

1. Bryd animationen op i mindre dele

Du kan opdele komplekse animationer i mindre, enklere animationer, der kan loopes individuelt. For eksempel kan en kompleks animation, der involverer både rotation og translation, opdeles i to separate animationer, der vil blive sløjfet uafhængigt. Ved at dele animationen op i mindre dele kan du forenkle koden og gøre den nemmere at håndtere.

2. Brug Animated.sequence()-metoden

Det Animated.sequence() metode giver dig mulighed for at køre en sekvens af animationer efter hinanden. Denne metode kan skabe komplekse loopede animationer ved at kæde enkeltloopede animationer. Du kan brugeAnimated.sequence() til at oprette en animation, der først falmer i et billede, roterer det og derefter fader det ud, og gentager hele sekvensen, når det er gjort.

Disse tips leveres sammen med generelle tips til optimering af dine React Native-applikationer vil hjælpe dig med at skabe effektive loopede animationer.

Eksperimenter med din animation

Loopede animationer i React Native kan være et kraftfuldt værktøj til at skabe en mere engagerende og dynamisk brugeroplevelse. Du bør eksperimentere med forskellige teknikker til at skabe loopede animationer for at opnå både visuelt tiltalende og performant animation.