Folosind metoda Animated.spring() pentru animații dinamice în React Native

Biblioteca API animată de la React Native vă poate ajuta să creați animații dinamice, fluide, cu puțin efort.

Aflați cum să creați animații cu un efect de primăvară, apoi aflați cum să le controlați durata și viteza și să le aplicați în scenarii din lumea reală.

Ce sunt animațiile dinamice?

Animațiile dinamice sunt animații în care mișcările obiectelor animate nu sunt preprogramate. Le puteți porni ca răspuns la interacțiunea utilizatorului sau la modificările mediului. Tehnica este cea mai populară în animație de jocuri video, aplicații de social media sau alte forme de media interactive.

Animațiile dinamice pot oferi utilizatorilor o experiență mai captivantă și mai captivantă, deoarece permit mișcări imprevizibile și receptive care se pot schimba în funcție de mai mulți factori.

Animațiile din aplicațiile mobile au devenit, de-a lungul anilor, din ce în ce mai complexe. API-ul animat implicit al React Native a avansat pentru a se adapta acestor complexități. The

Animated.spring() metoda oferită de API poate anima obiectele React Native, creând un efect dinamic.

Controlul animației

Când utilizați Animated.spring() metoda, va trebui să aveți control asupra animației pentru a vă asigura că se comportă așa cum doriți. Animated oferă un set de metode pentru a controla și manipula manual animațiile React Native.

Una dintre aceste metode este Stop(), ceea ce face ca animația să se oprească la valoarea sa actuală. Această metodă este utilă atunci când trebuie să anulați o animație sau să o resetați la starea inițială.

De exemplu:

const stopAnimation = () => {
 poziție.oprire(valoare => {
 position.setValue(0);
 });
};

Rețineți cum puteți utiliza setValue() metodă de a reseta valoarea poziţiei la starea sa iniţială de 0.

O altă metodă disponibilă este reset(), care readuce animația la starea inițială. Această metodă este utilă atunci când trebuie să reporniți o animație.

Aplicații din lumea reală

Puteți explora o utilizare practică a Animated.spring() metoda prin construirea unei animații simple. O minge rotundă va cădea pe o suprafață atunci când un utilizator interacționează cu ea, apoi va reveni imediat în aer. Ar trebui să aveți deja un proiect nativ react cu care puteți lucra.

Mai întâi, creați o variabilă de stare pentru a urmări poziția mingii:

import Reacționează, { useState } din'reacţiona';
import { animat } din„reacționează-nativ”;
const Aplicație = () => {
const [poziție, setPosition] = useState(nou Animat. Valoare(0));

întoarcere (
transforma: [{ traduceY: poziție }] }}>
 {/* Componenta mingii aici */}
 </Animated.View>
 );
};

Utilizare Animat. Valoare pentru a crea o variabilă de stare numită poziţie care va urmări poziția verticală a mingii. Înfășurați Vedere componentă în Animat. Vedere astfel încât să îi puteți aplica animații.

Apoi, creați funcția de animație care va face mingea să cadă și să sară în sus:

const startAnimation = () => {
 Animated.spring (poziție, {
 a valorifica: 300,
 frecare: 1,
 tensiune: 10,
 useNativeDriver: Adevărat,
 }).start(() => {
 Animated.spring (poziție, {
 a valorifica: 0,
 frecare: 1,
 tensiune: 10,
 useNativeDriver: Adevărat,
 }).start();
 });
};

Utilizare Animated.spring() pentru a crea o animație care va muta mingea din poziția inițială de 0 la o poziție finală de 300. Specifica frecare și tensiune valori pentru a controla efectul de respingere al mingii în timpul setării utilizațiNativeDriver la Adevărat pentru a îmbunătăți performanța.

Apoi puteți implementa codul pentru a declanșa animația atunci când un utilizator interacționează cu mingea:

întoarcere (

transforma: [{ traduceY: poziție }] }}>
 {/* Componenta mingii aici */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Acest cod cuprinde Animat. Vedere componentă în AtingabilFărăFeedback astfel încât animația să se declanșeze atunci când utilizatorul apasă mingea. De asemenea, puteți declanșa animația atunci când componenta se montează apelând la startAnimation() funcţie în interiorul lui React useEffect() cârlig.

Cu acest cod, ar trebui să aveți o animație de minge care căde creată folosind Animated.spring().

Animații dinamice în React Native

Ați văzut cum să implementați o animație cu minge care căde folosind Animated.spring(), dar există multe alte moduri în care o puteți folosi pentru a crea animații dinamice.

De exemplu, puteți utiliza Animated.spring() pentru a crea animații care simulează alte mișcări bazate pe fizică, cum ar fi obiecte care se balansează sau se rotesc.

Combinând Animated.spring() cu alte funcții de animație, cum ar fi Animated.timing() sau Animated.sequence(), puteți crea animații complexe și fără întreruperi care îmbunătățesc experiența utilizatorului.