Animoitu kuvaaja reagoida omaksi

Äskettäin etsin React Native -graafikirjastoa Savee.io-sovellukselleni. Tutkimuksen aikana ymmärsin, että React Native -diagrammien käsitteleminen ei ole helppoa. Ja jos haluat animoida heitä? Se näyttää melkein mahdottomalta. Seuraava gif on mitä olen tehnyt ja josta puhun tässä ”opetusohjelmassa”!

Tämän artikkelin tavoite

Ilman ART-kirjastoa

Tutkiessani React Nativen kaavioita, huomasin, että melkein kaikki käyttävät ART-kirjastoa. Mikä on todella siisti ja tehokas piirustuskirjasto. Katso tämä piirakkakaavio, jonka ART-kirjasto on tehnyt Savee.io-sovellukselle.

ART-kirjaston piirakkakaavio Savee.iosta

Mutta kun haluat animoida sen? No, voit. On mahdollista. Mutta animaation tekee JS-säie. Yritän aina löytää tapa siirtää kaiken alkuperäiseen osaan, joten JS-säiettä ei estä animaatio ja se voi toimia jollain muulla.

Sarakkekaavio, josta puhun (ja voit nähdä alla olevasta gifistä), on tehnyt puhdas React Native. Ei ART-kirjastoa!

Tehdään siitä hieman monimutkainen

Tajusin, että tarvitsen myös negatiivisen arvon kaaviossa. Savee.ion käyttäjät luovat yleensä ryhmän matkalle ja seuraavat kulujaan. On selvää, että on vain negatiivisia arvoja - vain kulut. Seuraava gif näyttää kuinka animaatio näyttää sekä negatiivisilta että positiivisilta arvoilta.

Layout

Päätin tehdä jokaisen sarakkeen erikseen osana. Joten voisin lisätä "viive" -tehosteen. Voit nähdä, että animaatio alkaa satunnaisesti jokaiselle sarakkeelle, kun kuvaaja muuttaa peruslinjan sijaintia. Työskentelemme 200 korkeuden kanssa. Arvon korkeus voi olla 25 ja myös etiketin korkeus 25. Tämä tekee 150 pylväästä.

Yhden sarakkeen asettelu

Jos kuvaajan korkeus on 150, sarakkeen korkeus on 300. Jokaisessa sarakkeessa on positiivinen osa (A) ja negatiivinen osa (B). Näiden osien vastakkaiset puolet on aina piilotettu. A on piilotettu negatiiviselle osalle ja B piilotettu positiiviselle osalle. Se tarkoittaa, että jos siirrämme lähtöviivan alapuolella olevan positiivisen osan (A) B-tilaan, positiivinen sarake piilotetaan kokonaan. Sitä me haluamme, kun arvo on negatiivinen.

Sarakkeiden positiiviset osat (vasen puoli) ja samojen sarakkeiden negatiiviset osat (oikeat osat)

Voit nähdä kuvan viimeisen sarakkeen negatiivisen arvon. Arvo on -5. Positiivinen sarake siirretään kokonaan perusviivan alapuolelle (se on piilotettu) ja negatiivinen sarake siirretään oikeaan Y-asemaan edustamaan -5-arvoa. Tämän kuvaajan enimmäisarvo on 10 (ensimmäinen sarake). Se tarkoittaa, että -5 on negatiivisen osan keskellä (75/2).

Meidän on tehtävä täällä vähän matematiikkaa, koska meidän on interpoloitava todellinen arvo Y-asemaan. Mutta en aio puhua tästä täällä. Uskon, että pystyt selvittämään kaiken melko helposti.

Animoitu sarake

Käytin avoimen lähdekoodin kirjastoa nimeltään react-native-motion ja komponentti TranslateY. Mikä tekee animaatiot todella helpoksi toteuttaa. Katso koodi. Helppo ymmärtää. Käytämme TranslateY-komponenttia samalla tavalla kuin View-komponenttia. Ainoa asia, joka meidän on tehtävä, on laskea Y-sijainnit positiiviselle sarakkeelle, negatiiviselle sarakkeelle, perustasolle ja arvotunnisteelle.

Tarkista tulos todellisessa sovelluksessa. Savee.io on jo ottanut käyttöön sarakekaavion. Kuten aiemmin totesin, kaikki tehdään käyttöliittymän säieellä (se on aika nopea). OnPress-tapahtuma on, joten voit muuttaa kuukausia. Kun valitset luokan, se muuttaa kuvaajan arvoja ja laskee Y-sijainnin uudelleen. Sitten reaaliaikainen liike hoitaa animaation.

Animoitu numero

Numeroanimaatio on vähän ongelma. Koska emme voi siirtää sitä käyttöliittymän säieeseen. Se on tehtävä JS-säieellä. Olen nähnyt, että kehittäjillä on yleensä setIntervalin tekemä vaikutus. Tietysti voit käyttää sitä, mutta halusin tehdä sen turvallisemmin.

Joten käytän React Nativen animoitua sovellusliittymää jopa numeroanimointiin. Voimme lisätä kuuntelijan animoituun arvoon ja kun arvo muuttuu, me vain annamme numeron uudelleen. Se on helppoa ja voit hyödyntää Animoitu sovellusliittymä. Käyttämällä esimerkiksi Easing-tyyppiä. Ja mikä on parasta? Laitoin komponentin react-native-motion-kirjastoon, joka on avoin lähde teille

Sinun täytyy vain kirjoittaa pari riviä näin. Kun arvo on muuttunut koodissa, se hoitaa loput.

Saatavana reagoida-natiivi-liikkeessä

Piditkö siitä? Taputtele, seuraa ja animoi sitä!

Itse asiassa sinun ei tarvitse tehdä mitään siitä. Mutta se auttaa minua paljon. Se on suuri motivaatio seuraaville tällaisille artikkeleille.

Minusta

Olen kirjoittanut Savee.io (jota käytän myös leikkipaikkani animaatioilleni ‍). Ja react-native-material-ui- ja react-native-motion-kirjastojen kirjoittaja. Kirjoittaminen heistä tässä blogissa.

Jos tarvitset apua React Native -sovelluksesi kanssa (animaatiot, esitys jne.), Kerro siitä minulle, kiitos;) Keskustelen mielelläni siitä.
LinkedIn || Github || Viserrys