Du-ți jocul de animație la nivelul următor cu această bibliotecă React Native.

Aplicațiile mobile folosesc adesea animația pentru a anima experiența utilizatorului. Dar crearea de animații de înaltă calitate poate fi o provocare.

Din fericire, există concepte și tehnici pe care le puteți folosi pentru a vă îmbunătăți abilitățile de animație. Apoi le puteți aplica pentru a crea animații mai bune și mai fluide pentru următoarea aplicație mobilă React Native.

Reactează animațiile native

The React Native Animated biblioteca este cea mai populară modalitate de a crea animații într-o aplicație React Native.

Exact ca Biblioteca de animație încorporată a lui React, API-ul animat face parte din biblioteca animată bazată pe JavaScript. Animated oferă un set de clase și metode care vă permit să creați animații fluide și fluide. Există câteva alte opțiuni excelente pentru a crea animații React Native, cum ar fi Reanimated.

Cu toate acestea, crearea de animații bune în React Native nu înseamnă doar utilizarea bibliotecii potrivite sau setarea proprietăților potrivite. Este, de asemenea, despre înțelegerea principiilor animației și modul de aplicare a acestora în contextul dezvoltării aplicațiilor mobile. Așadar, iată câteva principii cheie pe care trebuie să le înțelegeți și să le rețineți atunci când vă construiți animațiile.

instagram viewer

Ajustarea duratei animației

Animațiile ar trebui să pară netede și naturale pentru un utilizator. Realizarea acestui lucru poate depinde de modul în care gestionați durata anumitor animații pe care le creați.

Durata se referă la timpul necesar pentru ca o animație să ruleze complet. În mod implicit, animațiile din React Native au o durată de 500 de milisecunde, dar le puteți ajusta pentru a merge mai repede sau mai lent.

Ar trebui să ajustați durata animației în funcție de complexitatea acesteia. O animație simplă, cum ar fi un fade-in, poate avea nevoie doar de o durată scurtă, în timp ce o animație mai complexă, cum ar fi un slide-in cu efect de respingere, poate avea nevoie să dureze mai mult, pentru a se simți natural și neted.

Cu Animation.timing() metoda, puteți crea o animație cronometrată personalizată pentru a se potrivi nevoilor dvs.

Iată un exemplu despre cum să adăugați o durată personalizată la o animație simplă cu fade-in:

import Reacționează, { useRef } din'reacţiona';
import { Animat, Vizualizare } din„reacționează-nativ”;
const FadeInView = (recuzită) => {
const fadeAnim = useRef(nou Animat. Valoare(0)).actual; 


 React.useEffect(() => {
 Timing.animat(
 fadeAnim,
 {
 a valorifica: 1,
 durată: 2000, // setează durata personalizată
 useNativeDriver: Adevărat,
 }
 ).start();
 }, [fadeAnim]);


întoarcere (
 stil={{
 ...stil.recuzită,
 opacitate: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
exportMod implicitfuncţieApp() {
întoarcere (
contracta: 1, alignItems: 'centru', justifyContent: 'centru'}}>
lăţime: 250, înălţime: 50, culoare de fundal: 'pudra albastra'}}>
marimea fontului: 28, aliniere text: 'centru', marginea: 10}}> Decolorarea în</Text>
 </FadeInView>
 </View>
 );
}

Când alegeți o durată pentru animație, este important să găsiți echilibrul potrivit între viteză și netezime.

Încercați să începeți cu o durată mai lungă când experimentați pentru prima dată. O durată mai lungă vă va oferi mai mult timp pentru a ajusta funcția de relaxare și pentru a vă rafina animația. Puteți oricând să scurtați durata mai târziu, odată ce sunteți mulțumit de efectul general.

Utilizați funcții de ușurare

Animațiile simple pot avea o viteză constantă, dar variarea vitezei poate crea efecte mai naturale. Funcțiile de simplificare controlează rata de modificare a unei animații în timp. Ele vă pot face animațiile să înceapă încet, apoi să accelereze. Setarea unor viteze diferite pe măsură ce animația progresează poate crea o animație lină și captivantă.

Luați acest exemplu de utilizare a unei funcții de relaxare:

import Reacționează, { useRef } din'reacţiona';
import { Animat, Vizualizare } din„reacționează-nativ”;
const FadeInView = (recuzită) => {
const fadeAnim = useRef(nou Animat. Valoare(0)).actual; 


 React.useEffect(() => {
 Timing.animat(
 fadeAnim,
 {
 a valorifica: 1,
 durată: 2000,
 relaxare: Animated.easeOut, // folosiți funcția de relaxare aici
 useNativeDriver: Adevărat,
 }
 ).start();
 }, [fadeAnim]);


întoarcere (
 stil={{
 ...stil.recuzită,
 opacitate: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
exportMod implicitfuncţieApp() {
întoarcere (
contracta: 1, alignItems: 'centru', justifyContent: 'centru'}}>
lăţime: 250, înălţime: 50, culoare de fundal: 'pudra albastra'}}>
marimea fontului: 28, aliniere text: 'centru', marginea: 10}}>Fade In</Text>
 </FadeInView>
 </View>
 );
}

Acest cod folosește Animated.easeOut funcție pentru a controla rata de schimbare a opacității unei animații Vedere. The Animated.timing() metoda va folosi funcția ease-out pentru a schimba treptat opacitatea de la 0 la 1 pe o durată de două secunde, pentru a face ca animația să pară să încetinească pe măsură ce ajunge la sfârșit.

Puteți utiliza diferite tipuri de funcții de simplificare pentru a face animațiile dvs. să arate mai fluide, inclusiv ease-in, ease-out și ease-in-out.

Alegerea funcției potrivite de relaxare poate face o mare diferență în calitatea percepută a animațiilor aplicației dvs. Merită să vă faceți ceva timp pentru a vă juca cu ei și a vedea ce funcționează cel mai bine pentru cazurile dvs. de utilizare specifice.

Cadrele cheie ajută la animații complexe

Cadrele cheie sunt marcatori care vă permit să identificați momentele din animație în care doriți să modificați proprietăți precum poziția, scara sau rotația. Este ca și cum ați marca puncte în timp pentru a ghida animația.

Puteți folosi un set de cadre cheie pentru a seta valori specifice pentru orice proprietate vrei să animați. Acest lucru vă ajută să controlați sincronizarea și comportamentul, în special pentru animațiile complexe, cum ar fi cele care implică mișcarea personajelor.

Pentru a crea o animație de bază de cadru cheie, va trebui să specificați cadrele cheie între care doriți să animați și durata totală.

De exemplu, să presupunem că doriți să animați un pătrat de la o poziție de început de (0, 0) la o poziție de final de (100, 100) pe o perioadă de o secundă.

Puteți crea o serie de cadre cheie astfel:

const cadre cheie = [
 { X: 0, y: 0 },
 { X: 50, y: 50 },
 { X: 100, y: 100 },
];

În acest caz, există trei cadre cheie: unul la începutul animației, unul la mijloc și unul la sfârșit. Puteți trece apoi această matrice de cadre cheie bibliotecii dvs. de animații, împreună cu o durată de 1.000 de milisecunde, pentru a crea o animație lină între cadrele cheie.

În unele biblioteci, va trebui, de asemenea, să specificați o funcție de relaxare pentru a controla modul în care evoluează animația. Cu toate acestea, puteți aplica ideea de bază de specificare a cadrelor cheie și a duratei la majoritatea bibliotecilor de animații.

Profită de dispozitivul cu accelerare hardware

Accelerarea hardware poate fi un instrument puternic pentru optimizarea performanței animațiilor dvs. React Native. Prin valorificarea hardware-ului grafic al dispozitivului, puteți descărca o parte din munca de procesare de la CPU și, la rândul său, puteți obține animații mai fluide și mai receptive.

GPU-ul dispozitivului va procesa apoi în mod nativ valorile și stilurile animate, mai degrabă decât firul JavaScript care trebuie să facă acest lucru.

Este posibil ca accelerarea hardware să nu fie disponibilă pe toate dispozitivele, așa că este important să vă testați animațiile pe o varietate de dispozitive reale pentru a asigura cea mai bună performanță.