Cum se creează o animație continuă în React Native folosind Animated.loop()

Una dintre caracteristicile cheie ale API-ului animat React Native este Animated.loop() metodă prin care puteți crea animație continuă care se repetă la infinit.

Vom explora cum să folosim metoda Animated.loop() pentru a crea animație continuă în React Native și vom învăța cum să personalizam și să îmbunătățim aceste animații.

Înțelegerea metodei Animated.loop().

Pentru a utiliza metoda Animated.loop(), mai întâi trebuie să creați un Animat. Valoare obiect. Această valoare se actualizează pe fiecare cadru al buclei de animație și va fi folosită pentru a anima componenta țintă.

Odată animat. Obiectul valoare a fost creat, îl puteți trece la metoda Animated.loop() împreună cu un obiect de configurare a animației care definește comportamentul animației.

Acest obiect de configurare poate include proprietăți precum durată, relaxarea, și întârziere, care determină modul în care se va comporta animația.

Redarea în buclă a animației

În mod implicit, metoda Animated.loop() creează o buclă infinită a animației, ceea ce înseamnă că animația va continua să se repete până când este oprită manual. Cu toate acestea, puteți specifica o durată pentru bucla de animație prin setarea iterații proprietatea din obiectul de configurare a animației.

Următorul exemplu care demonstrează cum să utilizați Animation.loop() pentru a crea o animație de rotație în buclă:

import Reacționează, { useState, useEffect } din'reacţiona';
import { StyleSheet, View, Animated, Image } din„reacționează-nativ”;
exportMod implicitfuncţieApp() {
const [spinValue] = useState(nou Animat. Valoare(0));
 useEffect(() => {
const spin = spinValue.interpolate({
 Interval de intrare: [0, 1],
 Interval de ieșire: ['0deg', „360 de grade”],
 });
 Animated.loop(
 Timing.animat(
 spinValue,
 {
 a valorifica: 1,
 durată: 2000,
 useNativeDriver: Adevărat,
 }
 )
 ).start();
 }, []);
întoarcere (

 stil={{ lăţime: 200, înălţime: 200, transforma: [{ roti: spinValue }] }}
 sursa={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
const stiluri = StyleSheet.create({
 container: {
 contracta: 1,
 alignItems: 'centru',
 justifyContent: 'centru',
 },
});

În acest exemplu, creăm un animat. Obiect de valoare numit spinValue și setați valoarea inițială la 0. Apoi sunăm la buclă() metoda pe Animated.timing() obiect, care ia ca argument starea spinValue. Obiectul Animated.timing() descrie modul în care animația va progresa în timp și, în acest caz, rotește o imagine cu 360 de grade.

Pentru a seta durata buclei, am trecut a durată proprietatea la obiectul Animated.timing(), care va determina cât timp va rula animația înainte de a face buclă. Am setat proprietatea duration la 2000, ceea ce înseamnă 2 secunde înainte de repornire.

De asemenea, puteți seta numărul de ori în care animația trebuie să fie în buclă trecând iterații proprietatea metodei loop().

De exemplu, să presupunem că doriți ca animația să se execute în buclă de cinci ori înainte de a se opri. În acest caz, puteți apela Animated.loop() cu iterații: 5. Dacă doriți ca animația să fie în buclă pe termen nelimitat, puteți omite iterații proprietate complet.

Folosind Animation.loop(), setându-i durata și aplicarea corectă a stilului CSS la obiectul de vizualizare returnat, puteți crea animații în buclă fluide în React Native.

Lucrul cu animație complexă

Lucrul cu animații complexe nu este la fel de simplu ca lucrul cu o singură animație. De obicei, necesită ceva mai multă muncă pentru a se asigura că se comportă conform așteptărilor.

Iată două sfaturi care vă vor ajuta când faceți buclă animații complexe în React Native:

1. Împărțiți animația în părți mai mici

Puteți descompune animațiile complexe în animații mai mici, mai simple, care pot fi redate în buclă individual. De exemplu, o animație complexă care implică atât rotația, cât și translația poate fi împărțită în două animații separate, care vor fi redate în buclă independent. Împărțind animația în părți mai mici, puteți simplifica codul și îl puteți gestiona mai ușor.

2. Utilizați metoda Animated.sequence().

The Animated.sequence() metoda vă permite să rulați o secvență de animații una după alta. Această metodă poate crea animații complexe în buclă prin înlănțuirea animațiilor cu o singură buclă. Puteți folosiAnimated.sequence() pentru a crea o animație care se estompează mai întâi într-o imagine, o rotește și apoi o estompează, repetând întreaga secvență odată terminată.

Aceste sfaturi oferite împreună cu sfaturi generale pentru optimizarea aplicațiilor React Native v-ar ajuta să creați animații performante în buclă.

Experimentați cu animația dvs

Animațiile în buclă din React Native pot fi un instrument puternic pentru a crea o experiență de utilizator mai captivantă și mai dinamică. Ar trebui să experimentați cu diferite tehnici pentru a crea animații în buclă pentru a obține atât animații atractive din punct de vedere vizual, cât și performante.