Aflați cum să vă animați componentele în React Native într-un mod simplu și mai bun.

Animațiile pot da viață unei aplicații, făcând-o mai captivantă și mai intuitivă pentru utilizator. Dar dacă sunteți nou în animațiile React Native, începerea poate fi puțin descurajantă.

Explorați animațiile React Native și aflați cum puteți începe să creați animații frumoase și fluide.

Cum funcționează animațiile native Basic React?

Animațiile pot crea tranziții fluide între diferite ecrane sau elemente. Aceștia pot evidenția informații sau pot oferi feedback cu privire la acțiunile utilizatorului. Animațiile pot fi simple sau complexe și pot folosi o varietate de tehnici, cum ar fi grafica în mișcare 2D sau 3D.

Portabilitatea lui React Native îl face să merite să fie folosit dacă vizați mai multe platforme. Una dintre cele mai puternice caracteristici ale sale este capacitatea de a crea animații frumoase pentru aplicațiile mobile.

Puteți anima un obiect React Native pur și simplu schimbând starea de poziție a componentei dorite.

instagram viewer

De exemplu:

import Reacționează, { useState, useEffect } din'reacţiona';
import { View, Style Sheet } din„reacționează-nativ”;
const Aplicație = () => {
// Inițializați starea pentru a urmări poziția casetei
const [boxPosition, setBoxPosition] = useState(0);


// Utilizați cârligul useEffect pentru a actualiza poziția casetei la fiecare 1 secundă
 useEffect(() => {
const interval = setInterval(() => {
// Actualizați poziția casetei adăugând 10 la poziția curentă
 setBoxPosition(prevPosition => prevPosition + 10);
 }, 1000);


// Returnează o funcție de curățare pentru a șterge intervalul când componenta
// se demontează
întoarcere() => clearInterval (interval);
 }, []);


// Setați poziția casetei folosind variabila de stare în stilul inline
const boxStyle = {
 transforma: [{ traduceY: boxPosition }]
 };


întoarcere (


 </View>
 );
};


const stiluri = StyleSheet.create({
 container: {
 contracta: 1,
 alignItems: 'centru',
 justifyContent: 'centru',
 },
 cutie: {
 lăţime: 100,
 înălţime: 100,
 culoare de fundal: 'albastru',
 },
});
exportMod implicit Aplicație;

Acest cod redă o casetă albastră care se mișcă în jos în fiecare secundă. Animația funcționează folosind useEffect cârlig pentru a crea un cronometru care actualizează boxPosition variabilă de stare la fiecare 1 secundă.

Deși acest lucru poate funcționa în unele situații, aceasta nu este cea mai bună opțiune. Actualizările de stare din React Native funcționează asincron, dar animațiile se bazează pe actualizările de stare sincrone pentru a funcționa corect. Implementarea asincronă a animației dvs. va face ca actualizările de stare să nu se reflecte imediat în rezultatul randat al componentei, greșind sincronizarea animațiilor dvs.

Sunt mai multe biblioteci de animație precum Animat bibliotecă, reacţionează-nativ-reanimat, și reacţionează-nativ-animabil pentru construirea de animații performante în React Native. Fiecare dintre aceste biblioteci de animație elimină problema actualizărilor asincrone de stare și este perfect ideală.

API-ul React Native Animated

Animated este un API oferit de React Native. Îl puteți folosi pentru a crea animații fluide care răspund la interacțiunile utilizatorului sau la schimbările de stare.

API-ul animat vă permite să creați valori animate pe care le puteți interpola și mapa la diferite proprietăți de stil ale componentelor dvs. Apoi, puteți actualiza aceste valori în timp folosind diferite metode de animație. Stilurile componentelor dvs. se vor actualiza apoi pe măsură ce valorile animate se schimbă, rezultând animații netede.

Animația funcționează foarte bine cu sistemul de aspect al React Native. Din acest motiv, animațiile dvs. vor fi integrate corespunzător cu restul interfeței dvs. de utilizare pentru un aspect și mai bun.

Pentru a începe să utilizați Animated în proiectul dvs. React Native, trebuie să importați Animat modul din ‘react-nativ’ în codul tău:

import { animat } din„reacționează-nativ”;

Cu Animated importat, puteți începe să creați animații. Pentru a face acest lucru, mai întâi, creați o valoare animată pe care o veți manipula pe parcursul animației:

const animatedValue = nou Animat. Valoare(0);

The Animat. Valoare este o clasă din API-ul React Native Animated care reprezintă o valoare mutabilă. Puteți să o inițializați cu o valoare inițială și apoi să o actualizați în timp utilizând diverse metode de animație oferite de API-ul animat, cum ar fi .sincronizare(), .arc(), și .descompunere(), prin specificarea duratei animației, a funcției de relaxare și a altor parametri.

Valoarea animată este similară cu o valoare de stare dintr-o componentă React.

Puteți inițializa un Animat. Valoare cu valoarea de stare inițială a unei componente și apoi actualizați-o în timp folosind setState metodă.

De exemplu, aveți o componentă care are o valoare de stare numara, care reprezintă de câte ori utilizatorul a făcut clic pe butonul respectiv.

Puteți crea un Animat. Valoare și inițializați-l cu valoarea de stare inițială a numara:

const Aplicație = () => {
const [număr, setCount] = useState(0);
const animatedValue = nou Animat. Valoare (număr);
};

Apoi, ori de câte ori numara actualizări ale valorii de stare, puteți actualiza animatedValue de asemenea:

const handlebuttonClick = () => {
 setCounter (număr + 1);
 Animated.timing (animatedValue, {
 toValue: count + 1,
 durată: 500,
 useNativeDriver: Adevărat
 }).start();
};

Acest exemplu se actualizează animatedValue folosind Animated.timing() metoda ori de câte ori un utilizator face clic pe buton. The animatedValue conduce animația și își schimbă valoarea peste 500 de milisecunde.

Prin raportare Animat. Valoare la o valoare de stare în acest fel, puteți crea animații care să răspundă la modificările stării componentei dvs.

Acum înțelegeți cum să manipulați o valoare animată, puteți continua apoi să interpolați valoarea animată și să o mapați la o proprietate de stil a componentei dvs. folosind Animated.interpolate() metodă.

De exemplu:

const opacitate = animatedValue.interpolate({
 Interval de intrare: [0, 1],
 Interval de ieșire: [0, 1]
});
întoarcere (

 {/* conținutul componentei dvs. */}
 </View>
);

Acest lucru va crea o animație care se estompează treptat în Vedere componentă pe măsură ce valoarea animată se schimbă de la 0 la 1.

Înțelegerea tipurilor de animație

Înțelegerea tipurilor de animație și a modului în care funcționează este importantă pentru a crea animații bune.

Folosind utilizațiNativeDriver opțiunea cu Animated îmbunătățește performanța. Această opțiune vă permite să descărcați animații în firul UI nativ. Poate îmbunătăți semnificativ performanța prin reducerea cantității de procesare JavaScript necesară.

Cu toate acestea, nu toate tipurile de animație acceptă driverul nativ. Încercarea de a utiliza driverul nativ cu animații care implică modificări de culoare sau aspect poate provoca un comportament neașteptat.

În plus, animațiile care implică secvențe complexe pot cauza probleme semnificative de performanță pe dispozitivele cu putere de procesare sau memorie limitată. Aceste deficite de performanță pot fi, de asemenea, notabile dacă proiectul dvs. React Native rulează o versiune inferioară care nu are susține motorul Hermes.

Înțelegerea punctelor forte și limitărilor diferitelor tipuri de animație vă poate ajuta să alegeți abordarea potrivită pentru cazul dvs. de utilizare.

Fiți confortabil cu React Native Animations

Animațiile sunt un instrument puternic pentru a crea interfețe de utilizator captivante și dinamice în aplicațiile React Native. Animated API oferă o modalitate flexibilă și performantă de a crea atât animații de secvențe simple, cât și complexe.

Totuși, este important să luați în considerare impactul animațiilor asupra performanței și să alegeți abordarea și biblioteca corespunzătoare pentru situația dvs.