Az animációk működése a React Native-ban

A React Native egy nagyszerű keretrendszer, amely lehetővé teszi több platformon átívelő mobilalkalmazások létrehozását. Különösen hasznos, ha webfejlesztő vagy, és gyors, olcsó megoldást szeretnél olyan natív mobilalkalmazások fejlesztésére, amelyek mind Androidon, mind iOS-en működnek. Bónusz: nem kell külön $ iOS-t költeni külön iOS, Android és webes csapatokra.

Ez nem csak csökkenti a költségeit, hanem lehetővé teszi, hogy a kódbázis egy részét megossza mindhárom (Android, iOS és Web) build között, megkönnyítve ezzel a változtatások végrehajtását és a frissítések bevezetését.

A React Native lehetővé teszi, hogy a tényleges operációs rendszer közelében dolgozzon, ami fontos a teljesítménykritikus feladatokhoz, például az animációkhoz.

Az animációk minden alkalmazás szerves részét képezik, mert interaktívvá és vonzóbbá teszik a végfelhasználó számára. De sokszor, miközben animációkkal dolgozol, úgy érezheted, mintha fekete dobozzal dolgoznál.

Tanuljuk meg, hogyan működnek az animációk a React Native-ban. Az ingyenes YouTube lejátszási listáról a semmiből kezdheti az animációk tanulását.

Az Animált API

A React Native bemutatja az Animált API-t. Sok csodálatos dologból áll, például animálható értékekből, tavaszi / időzítő animációkból és eseményekből. De nem azért vagyunk itt, hogy megvitassuk az API-t - ezt a hivatalos dokumentumok és a YouTube lejátszási listámra bízom. Sokkal jobb munkát végeznek, amely ezt fedezi az Ön számára.

Amit itt szeretnénk megvitatni, az valójában az, hogy a React Native hogyan animálja a képernyőn a dolgokat, és mi zajlik a motorháztető alatt.

Két út az animációhoz

Tudnia kell, hogyan működik a React Native a motorháztető alatt a másik cikkemből. (Gyorsan olvassa el, ha még nem tette meg.) Mivel a React Native használja a React és a JavaScript programot, a képernyőn pontosan kétféle módon lehet animációkat végrehajtani.

Először is tisztázzunk egy tényt. A React Native tényleges natív nézeteket készít a képernyőn, és nem azokat, amelyeket a beágyazott webböngészők, például az Ionic mutat. Emiatt, ha valamilyen módon animálni szeretné a nézetet, ezt végső soron a natív nézetben kell megtenni.

A JavaScript-nek valamilyen módon kommunikálnia kell az operációs rendszerrel, mivel a nézetet frissíteni kell. A JavaScript más szálban fut, mint a kezelőfelület szál (fő szál), és csak ez a felhasználói felület szál frissítheti a nézeteket. Tehát a JS-nek a Bridge React Native által biztosított hidat kell használnia az adatok sorosítására és az operációs rendszer felé történő továbbítására.

Dolgozzon JS-ben, és frissítse a natív nézetet

Ez a megközelítés azt jelenti, hogy olyan nézetet készít, amely már látható a felhasználó képernyőn, és azon dolgozik, hogy mit kell tennie a következő pozícióért a JavaScript-szálban. A lépések nagyjából így néznek ki:

  1. Elindul az animáció
  2. A JavaScript futtatja a requestAnimationFramefüggvényt - egy olyan funkciót, amely 60 hívás / másodperc sebességgel próbál futtatni (60 FPS)
  3. A JavaScript kiszámítja a nézet következő pozícióját / átlátszatlanságát / átalakítását / bármit, amit animál.
  4. A JavaScript sorosítja ezt az értéket, és elküldi a hídon.
  5. A híd másik végén a Java (Android) vagy a C objektív (iOS) deserializálja ezt az értéket, és alkalmazza az adott transzformációkat az említett nézeten.
  6. A keret frissül a képernyőn.

Látta, mi történt ott? Egyik lépés sem adja vissza a React Native komponenst. Ez azt jelenti, hogy az Animated API valójában "megkerüli" React filozófiáját, miszerint nem mutálja meg az "állapot" változókat.

Jó hír: ez valóban hasznos animációk esetén, mert túl lassú és rossz lesz a teljesítményhez, ha hagyjuk, hogy a React egy másodpercben 60-szor újra rendereljen egy komponenst!

Ez mind szép és jó, de itt van egy nagyon alapvető probléma. A JavaScript egyszálú. Tehát a JavaScript aszinkron jellege itt nem működik, mert az animációk CPU-hoz kötött feladatok. Vizsgáljuk meg ennek a megközelítésnek az előnyeit és hátrányait.

Előnyök

  1. Nagyon kifinomult animációkat készíthet JS-ben, és natív animációkként láthatók.
  2. További ellenőrzés az animációs állapot felett

Hátrányok

  1. Hatalmas teljesítménybüntetés, ha a JavaScript szál nagyon elfoglalt.
  2. Ha a híd foglalt, akkor csökken a teljesítmény, amikor az OS / JS kommunikálni akar egymással.

Ez a csaló nagy becsületesség, hogy őszinte legyek. A cikk lentebb található egy videó, amely valójában valós időben mutatja be ezt a problémát. Meglátja, hogy a JS hogyan csavarja fel nagy idővel az animációkat, amikor a JavaScript szál elfoglalt lesz.

Miért késnek a JS animációk?

A JS-ben készített animációk akkor kezdenek elmaradni, amikor az animáció folyamatban van, és a felhasználó (vagy alkalmazás) más műveletet kér, amelyet a JS szálnak kell kezelnie.

Képzelje el például, hogy animáció történik. Ez azt jelenti, hogy JS a requestAnimationFramefunkció futtatásával van elfoglalva . Feltéve, hogy a frissítések önmagukban nem túl nehézek, tegyük fel, hogy a felhasználó elkezdi megérinteni a képernyőn található gombot, amely növeli a számlálót.

Most, requestAnimationFramehogy gyakran hívják, a React virtuális fája is újra és újra megjelenik annak érdekében, hogy figyelembe vegye a megnövekedett számlálót.

Mindkettő CPU-hoz kötött feladat, amely egyetlen szálon fut, így lesz teljesítményütemezés. requestAnimationFrameelkezdi dobni a kereteket a JS szál további munkája miatt.

Mindez azt jelenti, hogy nagyon rángatós animációt kap.

Natív illesztőprogram-animációk

Ne aggódjon, mert a React Native lehetővé teszi, hogy animációkat futtasson a natív illesztőprogramon is! Mit értek ez alatt, kérdezheted?

Nos, egyszerűen fogalmazva, ez azt jelenti, hogy a React Native letölti az animációs munkát a JS szálról az UI szálra (OS), és lehetővé teszi az objektum animációjának kezelését. Ennek van néhány előnye:

  1. A JS szál (és a React Native híd) mostantól ingyenes más intenzív feladatok kezelésére, mint például a felhasználó ismételt koppintásai.
  2. Az animációk sokkal gördülékenyebbek, mert nincs sorosodás / deserializáció és hídkommunikáció.

Hogyan valósítja meg ezt a React Native? A React Native emberei lehetővé teszik, hogy fejlesztőként useNativeDriveregy logikai értéknek nevezett tulajdonságot biztosítson, amikor animációs objektumot készít.

Ha igazra van állítva, a React Native az animáció megkezdése előtt sorosítja az animáció teljes állapotát és a jövőben szükséges teendőket. Ezután egyszer átviszi a hídon át az operációs rendszerhez.

Ettől kezdve a Java (Android) vagy az Objective C (iOS) kód futtatja az animációkat ahelyett, hogy a JavaScript kiszámolná a következő animációs keretet, és ezeket az adatokat újra és újra elküldené a hídon.

Ez nagyon felgyorsítja az animációkat, és az animációk gördülékenyebben futnak, különösen alacsony kategóriájú eszközökön. Lássuk a Native Animations vs JS-alapú animációk videó bemutatóját a React Native-ban:

Ebben az esetben a lépések nagyjából így néznek ki:

  1. Elindul az animáció
  2. JS sorosítja az animációs információkat és elküldi a hídon.
  3. A másik végén az OS megkapja ezeket az információkat, és natív módon futtatja az animációt.

Ez az! Az animációk sokkal könnyebbek a JS szál számára. Nincs többé requestAnimationFramevégtelen futás.

Ennek a módszernek azonban megvan a maga előnye és hátránya.

Előnyök:

  1. Gyorsabb animációk
  2. Nem blokkoló JS szál
  3. Kevésbé dagadt híd

Hátrányok:

  1. Kevesebb ellenőrzés az animációk felett (JS nem látja, mi történik a képernyőn, ha az "automatikus" animáció elindul)
  2. Kevesebb manipulálható tulajdonság - a natív illesztőprogram nem támogatja az összes animálandó tulajdonságot. Például   widthvagy heightnem natív animálható, de opacityés transforma.

Sok esetben azt tapasztalhatja, hogy egy másik animációkészletet meg lehet dolgozni a - használatával useNativeDriver: true, hasonló hatás létrehozásához, amely beállítás nélkül nem érhető el useNativeDriver: false.

A React Native csapata azon dolgozik, hogy további tulajdonságokat támogasson beszéd közben, de egyelőre úgy gondolom, hogy ez jelenleg nagyon jól működik.

Következtetés

Ez a cikk megmutatta, hogyan működnek valójában a React Native animációk a motorháztető alatt, és miért szépek.

Mit gondol erről a cikkről? Mondja el, hogy kapcsolatba lép velem az Instagram és a Twitter fiókjaimon Új a React Native programban? Kezdje el megtanulni a codedamn-en - egy platform a fejlesztők számára a tanuláshoz és a kapcsolódáshoz!

Béke!