Sådan fungerer animationer i React Native

React Native er en fantastisk ramme, der giver dig mulighed for at oprette mobilapplikationer på tværs af platforme. Det er især nyttigt, hvis du er en webudvikler og ønsker en hurtig, billig løsning til at udvikle native mobilapplikationer, der fungerer på både Android og iOS. Bonus: du behøver ikke bruge $$$ på separate iOS-, Android- og webteams.

Dette reducerer ikke kun dine omkostninger, men giver dig også mulighed for at dele en del af din codebase mellem alle tre (Android, iOS og Web) -bygninger, hvilket gør det lettere at foretage ændringer og udrulle opdateringer.

React Native giver dig også mulighed for at arbejde ret tæt på det aktuelle operativsystem, hvilket er vigtigt for ydeevnekritiske opgaver som animationer.

Animationer er en integreret del af enhver applikation, fordi de gør den interaktiv og mere tiltalende for slutbrugeren. Men mange gange, mens du arbejder med animationer, kan du føle, at du arbejder med en sort boks.

Så lad os lære, hvordan animationer fungerer i React Native. Du kan begynde at lære animationer i React Native fra bunden fra denne gratis YouTube-playliste.

Den animerede API

React Native udsætter en API kaldet Animated. Det består af en masse vidunderlige ting som animerbare værdier, forår / timing animationer og begivenheder. Men vi er ikke her for at diskutere API'et - det overlader jeg til de officielle dokumenter og min YouTube-playliste. De gør et meget bedre job, der dækker det for dig.

Hvad vi vil diskutere her er faktisk, hvordan React Native animerer ting på skærmen, og hvad der foregår under emhætten.

To måder at animere på

Du bør vide, hvordan React Native fungerer under emhætten fra min anden artikel. (Giv det en hurtig læsning, hvis du ikke allerede har gjort det.) Da React Native bruger React og JavaScript, er der nøjagtigt 2 måder, hvorpå animationer på skærmen kan udføres.

Lad os først få en kendsgerning klar. React Native konstruerer faktiske oprindelige visninger på skærmen og ikke dem, der gengives gennem indlejrede webbrowsere som Ionic. På grund af dette, hvis du vil animere en visning på nogen måde, skal det i sidste ende gøres på den oprindelige visning.

JavaScript skal kommunikere med operativsystemet på en eller anden måde, for at visningen skal opdateres. JavaScript kører i en anden tråd end UI-tråden (hovedtråd), og kun denne UI-tråd kan opdatere visningerne. Så JS er nødt til at bruge broen, React Native giver til at serialisere og kommunikere disse data til operativsystemet.

Arbejd i JS, og opdater den oprindelige visning

Denne tilgang betyder, at du tager en visning, som allerede er synlig på brugerens skærm, og arbejder på, hvad der skal gøres for at få den næste position i JavaScript-tråden. Trinene ser stort set sådan ud:

  1. Animationen starter
  2. JavaScript kører requestAnimationFramefunktionen - en funktion, der forsøger at køre ved 60 opkald / sekund (60 FPS)
  3. JavaScript beregner den næste position / opacitet / transformation / hvad du animerer på visningen.
  4. JavaScript serialiserer denne værdi og sender den over broen.
  5. I den anden ende af broen deserialiserer Java (Android) eller Objective C (iOS) denne værdi og anvender de givne transformationer på den nævnte visning.
  6. Rammen opdateres på skærmen.

Så du hvad der skete der? Ingen af ​​trinnene gengiver faktisk en React Native-komponent. Dette betyder, at den animerede API faktisk "omgår" Reacts filosofi om ikke at mutere "tilstand" -variabler.

Den gode nyhed: dette er faktisk nyttigt i tilfælde af animationer, fordi det vil være alt for langsomt og dårligt for ydeevnen, hvis vi lader React gengive en komponent igen 60 gange i sekundet!

Det hele er godt og godt, men der er et meget grundlæggende problem her. JavaScript er enkelt gevind. Så den asynkrone karakter af JavaScript fungerer ikke her, fordi animationer er en CPU-bundet opgave. Lad os se på fordele og ulemper ved denne tilgang.

Fordele

  1. Du kan have meget sofistikerede animationer skrevet i JS og synlige som native animationer.
  2. Mere kontrol over animationstilstanden

Ulemper

  1. Kæmpe præstationsstraffe, hvis din JavaScript-tråd er super optaget.
  2. Hvis broen er optaget, er der nedsat ydeevne, når OS / JS vil kommunikere med hinanden.

Denne ulempe er en stor ulempe for at være ærlig. Der er en video længere nede i artiklen, der faktisk viser dig dette problem i realtid. Du kan se, hvordan JS skruer op med animationer, når JavaScript-tråden bliver optaget.

Hvorfor forsinker JS-animationer?

Animationerne udført i JS begynder at forsinke, når animationen foregår, og brugeren (eller appen) anmoder om en anden handling, som skal håndteres af JS-tråden.

Forestil dig for eksempel, at der sker en animation. Dette betyder, at JS har travlt med at køre requestAnimationFramefunktionen. Antages det, at opdateringerne i sig selv ikke er for tunge, antager at en bruger begynder at trykke på en knap på skærmen, der inkrementerer en tæller.

Nu med det requestAnimationFramekaldes ofte, gengives dit virtuelle React-træ også igen og igen for at tage højde for den øgede tæller.

Begge er CPU-bundne opgaver, der kører på en enkelt tråd, så der bliver et præstationshit. requestAnimationFramebegynder at slippe rammer på grund af yderligere arbejde, der udføres af JS-tråden.

Alt dette betyder, at du får en meget rykkende animation.

Native Driver Animations

Bekymre dig ikke, for React Native giver dig faktisk også mulighed for at køre animationer på den oprindelige driver! Hvad mener jeg med det, spørger du måske?

Kort sagt betyder det, at React Native aflaster animationsarbejdet fra JS-tråden til UI-tråden (OS) og lader det håndtere animationen af ​​objektet. Dette har et par fordele:

  1. JS-tråden (og React Native-broen) er nu gratis til håndtering af andre intensive opgaver som gentagne tryk fra brugeren.
  2. Animationer er meget glattere, fordi der ikke er nogen serialisering / deserialisering og brokommunikation overhead.

Hvordan opnår React Native det? Folkene på React Native giver dig som udvikler mulighed for at levere en ejendom kaldet useNativeDriversom en boolsk værdi, når du konstruerer et animationsobjekt.

Når det er indstillet til sandt, reagerer React Native, inden animationen starter, hele animationstilstanden, og hvad der skal gøres i fremtiden. Derefter overfører den den en gang over broen til operativsystemet.

Fra da af kører Java (Android) eller Objective C (iOS) -koden animationerne i stedet for JavaScript, der beregner den næste animationsramme og sender disse data igen og igen over broen.

Dette fremskynder animationer meget, og animationerne kører mere jævnt, især på low-end-enheder. Lad os se en videodemonstration af Native Animations vs JS-baserede animationer i React Native:

I dette tilfælde ser trinene groft ud således:

  1. Animationen starter
  2. JS serialiserer animationsoplysningerne og sender dem over broen.
  3. I den anden ende modtager OS disse oplysninger og kører animationen indbygget.

Det er det! Animationer er meget lettere for JS-tråden nu. Ikke mere requestAnimationFramekører uendeligt.

Denne metode har dog sin egen andel af fordele og ulemper.

Fordele:

  1. Hurtigere animationer
  2. Ikke-blokerende JS-tråd
  3. Mindre oppustet bro

Ulemper:

  1. Mindre kontrol over animationer (JS kan ikke se, hvad der sker på skærmen, når den "automatiske" animation starter)
  2. Mindre egenskaber at manipulere - den oprindelige driver understøtter ikke alle de egenskaber, der skal animeres. For eksempel,   widtheller heighter ikke oprindeligt animerbare, men opacityog transformer.

I mange tilfælde finder du ud af, at du kan omgå et andet sæt animationer ved hjælp af for useNativeDriver: trueat skabe en lignende effekt, som ikke kan opnås uden indstilling useNativeDriver: false.

React Native-teamet arbejder på at tilføje support til flere ejendomme, mens vi taler, men for nu tror jeg, det fungerer fint i øjeblikket.

Konklusion

Denne artikel viste dig, hvordan React Native-animationer faktisk fungerer under emhætten, og hvorfor de er smukke.

Hvad synes du om denne artikel? Fortæl mig ved at oprette forbindelse til mig på mine Instagram- og Twitter-konti! Ny på React Native? Begynd at lære det på codedamn - en platform for udviklere at lære og oprette forbindelse til!

Fred!