Hvordan lage kontinuerlig animasjon i React Native ved å bruke Animated.loop()

En av nøkkelfunksjonene til React Natives animerte API er Animated.loop() metode som du kan bruke til å lage kontinuerlig animasjon som gjentas på ubestemt tid.

Vi vil utforske hvordan du bruker Animated.loop()-metoden for å lage kontinuerlig animasjon i React Native og lære hvordan du tilpasser og forbedrer disse animasjonene.

Forstå Animated.loop()-metoden

For å bruke Animated.loop()-metoden må du først opprette en Animert. Verdi gjenstand. Denne verdien oppdateres på hvert bilde i animasjonssløyfen og vil bli brukt til å animere målkomponenten.

En gang den animerte. Verdiobjektet er opprettet, du kan sende det til Animated.loop()-metoden sammen med et animasjonskonfigurasjonsobjekt som definerer animasjonsatferden.

Dette konfigurasjonsobjektet kan inkludere egenskaper som varighet, lettelser, og forsinkelse, som bestemmer hvordan animasjonen vil oppføre seg.

Sløyfer animasjonen din

Som standard oppretter Animated.loop()-metoden en uendelig sløyfe av animasjonen, noe som betyr at animasjonen vil fortsette å gjenta seg til den stoppes manuelt. Du kan imidlertid angi en varighet for animasjonssløyfen ved å angi iterasjoner egenskapen i animasjonskonfigurasjonsobjektet.

Følgende eksempel som viser hvordan du bruker Animation.loop() for å lage en sløyferotasjonsanimasjon:

import Reager, { useState, useEffect } fra'reagere';
import { StyleSheet, View, Animated, Image } fra'reager-innfødt';
eksportmisligholdefunksjonApp() {
konst [spinnverdi] = brukState(ny Animert. Verdi(0));
 useEffect(() => {
konst spin = spinValue.interpolate({
 input Range: [0, 1],
 output Range: ['0deg', "360 grader"],
 });
 Animated.loop(
 Animated.timing(
 spinValue,
 {
 å verdsette: 1,
 varighet: 2000,
 useNativeDriver: ekte,
 }
 )
 ).start();
 }, []);
komme tilbake (

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

I dette eksemplet lager vi en animert. Verdiobjekt kalt spinVerdi og sett startverdien til 0. Vi ringer da Løkke() metode på Animated.timing() objekt, som tar staten spinValue som argument. Objektet Animated.timing() beskriver hvordan animasjonen vil utvikle seg over tid, og i dette tilfellet roterer den et bilde 360 ​​grader.

For å angi sløyfevarigheten har vi passert en varighet egenskapen til Animated.timing()-objektet, som vil avgjøre hvor lenge animasjonen skal kjøre før looping. Vi setter duration-egenskapen til 2000, som betyr 2 sekunder før omstart.

Du kan også angi hvor mange ganger animasjonen skal gå i løkke ved å passere iterasjoner egenskap til loop()-metoden.

Anta for eksempel at du vil at animasjonen skal gå i loop fem ganger før den stoppes. I så fall kan du ringe Animated.loop() med iterasjoner: 5. Hvis du vil at animasjonen skal gå i loop på ubestemt tid, kan du utelate iterasjoner eiendom fullstendig.

Ved å bruke Animation.loop(), angi varigheten, og bruke CSS-stilen riktig til det returnerte visningsobjektet, kan du lage jevne sløyfeanimasjoner i React Native.

Arbeid med kompleks animasjon

Å jobbe med kompleks animasjon er ikke like enkelt som å jobbe med enkelt animasjon. De krever vanligvis litt mer arbeid for å sikre at de oppfører seg som forventet.

Her er to tips som vil hjelpe deg når du spiller komplekse animasjoner i React Native:

1. Del opp animasjonen i mindre deler

Du kan bryte ned komplekse animasjoner til mindre, enklere animasjoner som kan sløyfes individuelt. For eksempel kan en kompleks animasjon som involverer både rotasjon og oversettelse brytes ned i to separate animasjoner, som vil bli sluppet uavhengig. Ved å dele opp animasjonen i mindre deler kan du forenkle koden og gjøre den enklere å håndtere.

2. Bruk Animated.sequence()-metoden

De Animated.sequence() metoden lar deg kjøre en sekvens av animasjoner etter hverandre. Denne metoden kan lage komplekse sløyfeanimasjoner ved å lenke enkeltsløyfeanimasjoner. Du kan brukeAnimated.sequence() til å lage en animasjon som først tones inn i et bilde, roterer det og deretter toner det ut, og gjentar hele sekvensen når den er ferdig.

Disse tipsene følger med generelle tips for å optimalisere React Native-applikasjonene dine vil hjelpe deg med å lage effektive loopede animasjoner.

Eksperimenter med animasjonen din

Loopede animasjoner i React Native kan være et kraftig verktøy for å skape en mer engasjerende og dynamisk brukeropplevelse. Du bør eksperimentere med forskjellige teknikker for å lage loopede animasjoner for å oppnå både visuelt tiltalende og ytelsesdyktig animasjon.