React Native este un cadru excelent care vă permite să creați aplicații mobile pe mai multe platforme. Este deosebit de util dacă sunteți dezvoltator web și doriți o soluție rapidă și ieftină pentru a dezvolta aplicații mobile native care funcționează atât pe Android, cât și pe iOS. Bonus: nu trebuie să cheltuiți $$$ pe iOS, Android și echipe web separate.

Acest lucru nu numai că vă scade costurile, dar vă permite, de asemenea, să partajați o parte din baza de cod între toate cele trei versiuni (Android, iOS și Web), facilitând modificările și lansarea actualizărilor.

React Native vă permite, de asemenea, să lucrați destul de aproape de sistemul de operare real, ceea ce este important pentru sarcini critice de performanță, cum ar fi animațiile.

Animațiile fac parte integrantă din orice aplicație, deoarece o fac interactivă și mai atrăgătoare pentru utilizatorul final. Dar de multe ori, în timp ce lucrați cu animații, s-ar putea să simțiți că lucrați cu o cutie neagră.

Deci, să învățăm cum funcționează animațiile în React Native. Puteți începe să învățați animații în React Native de la zero această listă de redare gratuită YouTube.

API-ul animat

React Native expune un API numit Animat. Se compune dintr-o mulțime de lucruri minunate, cum ar fi valori animabile, animații de primăvară / sincronizare și evenimente. Dar nu suntem aici pentru a discuta despre API – o voi lăsa pe seama documente oficiale si al meu Lista de redare YouTube. Ei fac o treabă mult mai bună acoperind asta pentru tine.

Ceea ce vrem să discutăm aici este, de fapt, modul în care React Native animă lucruri pe ecran și ce se întâmplă sub capotă.

Două moduri de a anima

Ar trebui să știți cum funcționează React Native sub capotă din celălalt articol al meu. (Dă-i o citire rapidă dacă nu ai făcut-o deja.) Deoarece React Native folosește React și JavaScript, există exact 2 moduri în care pot fi realizate animații pe ecran.

În primul rând, să clarificăm un fapt. React Native construiește vizualizări native reale pe ecran și nu cele redate prin intermediul browserelor web încorporate precum Ionic. Din acest motiv, dacă doriți să animați o vizualizare în vreun fel, aceasta trebuie să se facă în cele din urmă pe vizualizarea nativă.

JavaScript trebuie să comunice cu sistemul de operare într-un fel în care vizualizarea trebuie actualizată. JavaScript rulează într-un alt fir decât firul UI (firul principal) și numai acest thread UI poate actualiza vizualizările. Așadar, JS trebuie să utilizeze bridge-ul pe care React Native îl oferă pentru a serializa și comunica aceste date către sistemul de operare.

Lucrați în JS și actualizați vizualizarea nativă

Această abordare înseamnă că luați o vizualizare care este deja vizibilă pe ecranul utilizatorului și lucrați la ceea ce trebuie făcut pentru următoarea sa poziție în firul JavaScript. Pașii arată aproximativ așa:

  1. Animația începe
  2. JavaScript rulează fișierul requestAnimationFrame funcție – o funcție care încearcă pentru a rula la 60 de apeluri / secundă (60 FPS)
  3. JavaScript calculează următoarea poziție / opacitate / transformare / orice ai anima în vizualizare.
  4. JavaScript serializează această valoare și o trimite pe pod.
  5. La celălalt capăt al bridge-ului, Java (Android) sau Objective C (iOS) deserializează această valoare și aplică transformările date pe ecranul menționat.
  6. Cadrul este actualizat pe ecran.

Ai văzut ce s-a întâmplat acolo? Niciunul dintre pași nu redă efectiv o componentă React Native. Aceasta înseamnă că API-ul animat „ocolește” filosofia lui React de a nu muta variabilele „de stare”.

Vestea bună: acest lucru este de fapt util în cazul animațiilor, deoarece va fi mult prea lent și rău pentru performanță dacă lăsăm React să redea o componentă de 60 de ori pe secundă!

Totul este frumos și bun, dar există o problemă fundamentală aici. JavaScript are un singur fir. Așadar, natura asincronă a JavaScript-ului nu funcționează aici, deoarece animațiile sunt o sarcină legată de CPU. Să aruncăm o privire asupra argumentelor pro și contra acestei abordări.

Pro

  1. Puteți avea animații foarte sofisticate scrise în JS și vizibile ca animații native.
  2. Mai mult control asupra stării animației

Contra

  1. Penalizare de performanță uriașă dacă firul dvs. JavaScript este foarte ocupat.
  2. Dacă podul este ocupat, performanța scade atunci când OS / JS doresc să comunice între ei.

Acest con este un mare con, sincer să fiu. Există un videoclip mai jos în articol care vă arată de fapt această problemă în timp real. Veți vedea cum JS se descurcă cu animații atunci când firul JavaScript devine ocupat.

De ce rămân animările JS?

Animațiile realizate în JS vor începe să rămână întârziate atunci când animația se desfășoară și utilizatorul (sau aplicația) solicită alte acțiuni care trebuie gestionate de firul JS.

De exemplu, imaginați-vă că apare o animație. Aceasta înseamnă că JS este ocupat să ruleze requestAnimationFrame funcţie. Presupunând că actualizările nu sunt ele însele prea grele, să presupunem că un utilizator începe să atingă un buton de pe ecran care crește un contor.

Acum cu requestAnimationFrame fiind apelat frecvent, arborele dvs. virtual React este, de asemenea, redat din nou și din nou pentru a ține cont de contorul crescut.

Ambele sunt sarcini legate de CPU care rulează pe un singur fir, așa că va exista un succes de performanță. requestAnimationFrame va începe să renunțe la cadre din cauza lucrărilor suplimentare efectuate de firul JS.

Toate acestea înseamnă că veți obține o animație foarte sacadată.

Animații pentru șoferi nativi

Nu vă faceți griji, deoarece React Native vă permite să rulați animații și pe driverul nativ! Ce vreau să spun prin asta, s-ar putea să întrebați?

Ei bine, pur și simplu, înseamnă că React Native descarcă operația de animație de la firul JS la firul UI (sistemul de operare) și îi permite să se ocupe de animația obiectului. Aceasta are câteva avantaje:

  1. Firul JS (și puntea React Native) sunt acum gratuite pentru gestionarea altor sarcini intensive, cum ar fi robinetele repetitive de la utilizator.
  2. Animațiile sunt mult mai ușoare, deoarece nu există serializare / deserializare și comunicare de tip pont.

Cum realizează React Native acest lucru? Cei de la React Native vă permit ca dezvoltator să furnizați o proprietate numită useNativeDriver ca valoare booleană atunci când construiți un obiect de animație.

Când este setat la adevărat, React Native, înainte de a începe animația, serializează întreaga stare a animației și ceea ce trebuie făcut în viitor. Apoi îl transferă o dată peste pod către sistemul de operare.

De atunci, codul Java (Android) sau Objective C (iOS) rulează animațiile în loc să calculeze JavaScript următorul cadru de animație și să trimită aceste date din nou și din nou pe pod.

Acest lucru accelerează foarte mult animațiile, iar animațiile rulează mai ușor, în special pe dispozitivele low-end. Să vedem o demonstrație video a animațiilor native față de animațiile bazate pe JS în React Native:

În acest caz, pașii arată aproximativ astfel:

  1. Animația începe
  2. JS serializează informațiile despre animație și le trimite pe pod.
  3. La celălalt capăt, sistemul de operare primește acele informații și rulează animația în mod nativ.

Asta este! Animațiile sunt mult mai ușoare pentru firul JS acum. Nu mai requestAnimationFrame alergând la nesfârșit.

Cu toate acestea, această metodă are propria sa parte din argumente pro și contra.

Pro:

  1. Animații mai rapide
  2. Fir JS care nu blochează
  3. Pod mai puțin umflat

Contra:

  1. Mai puțin control asupra animațiilor (JS nu poate vedea ce se întâmplă pe ecran odată ce începe animația „automată”)
  2. Mai puține proprietăți de manipulat – driverul nativ nu acceptă toate proprietățile care trebuie animate. De exemplu, width sau height nu sunt animabili în mod nativ, dar opacity și transform sunt.

În multe cazuri, veți descoperi că puteți lucra în jurul unui set diferit de animații folosind useNativeDriver: true pentru a crea un efect similar care nu poate fi realizat fără setare useNativeDriver: false.

Echipa React Native lucrează la adăugarea de suport pentru mai multe proprietăți pe măsură ce vorbim, dar deocamdată cred că funcționează foarte bine în acest moment.

Concluzie

Acest articol v-a arătat cum funcționează efectiv animațiile React Native sub capotă și de ce sunt frumoase.

Ce părere aveți despre acest articol? Spune-mi conectându-mă cu mine pe Instagram și Stare de nervozitate conturi! Sunteți nou în React Native? Începeți să o învățați mai departe codedamn – o platformă pentru ca dezvoltatorii să învețe și să se conecteze!

Pace!