Animeeritud graafik reaalajas reaalajas

Hiljuti otsisin oma Savee.io rakenduse jaoks React Native graafikute teeki. Uurimistöö käigus mõistsin, et React Native'i graafikutega pole lihtne tegeleda. Ja kui soovite neid animeerida? See tundub peaaegu võimatu. Järgmine gif on see, mida ma olen teinud ja millest räägin selles “õpetuses”!

Selle artikli eesmärk

Ilma ART raamatukoguta

React Native diagrammide uurimisel sain teada, et peaaegu kõik kasutavad ART-i teeki. Mis on tõeliselt lahe ja võimas joonistuskogu. Vaadake seda tabelit, mille ART-teek on teinud rakenduse Savee.io jaoks.

Kunstikogu raamatukogu joonis diagrammil savee.io

Aga kui soovite seda animeerida? Noh, saate küll. See on võimalik. Animatsiooni teeb aga JS-niit. Püüan alati leida viisi, kuidas viia kõik algsesse ossa, nii et meie JS-i lõime ei blokeeri animatsioon ja see võib töötada millegi muuga.

Veergdiagramm, millest ma räägin (ja näete allolevas gifis), on teinud puhas React Native. Ühtegi ART raamatukogu pole!

Teeme selle natuke keeruliseks

Mõistsin, et vajan graafikus ka negatiivset väärtust. Savee.io kasutajad loovad tavaliselt reisiks grupi ja jälgivad oma kulutusi. Ilmselt on olemas ainult negatiivsed väärtused - ainult kulutused. Järgmine gif näitab, kuidas animatsioon näeb välja nii negatiivsete kui ka positiivsete väärtuste jaoks.

Paigutus

Otsustasin teha iga veeru komponendina eraldi. Nii et ma võiksin lisada viivituse efekti. Näete, et animatsioon algab juhuslikult iga veeru korral, kui graafik muudab baasjoone positsiooni. Töötame 200 kõrgusega. Väärtuse kõrgus võib olla 25 ja sildi kõrgus samuti 25. See teeb kolonni jaoks 150.

Ühe veeru paigutus

Kui graafiku kõrgus on 150, on veeru kõrgus 300. Igal veerul on positiivne osa (A) ja negatiivne osa (B). Nende osade vastaskülg on alati peidetud. A on negatiivse osa jaoks peidetud ja B on positiivse osa jaoks peidetud. See tähendab, et kui me liigutame positiivse osa (A) baasjoone all B-ruumi, siis positiivne veerg peidetakse täielikult. Just seda me soovime, kui väärtus on negatiivne.

Veergude positiivsed osad (vasak pool) ja samade veergude positiivsed osad (paremad osad)

Näete pildi viimase veeru negatiivset väärtust. Väärtus on -5. Positiivne veerg liigutatakse täielikult algtaseme all (see on peidetud) ja negatiivne veerg teisaldatakse õigesse Y-positsiooni, et tähistada väärtust -5. Selle graafiku maksimaalne väärtus on 10 (esimene veerg). See tähendab, et -5 jääb negatiivse osa keskele (75/2).

Peame siin natuke matemaatikat tegema, sest peame tegeliku väärtuse interpoleerima Y-positsioonile. Kuid ma ei räägi sellest siin. Usun, et saate kõik üsna hõlpsalt välja mõelda.

Animeeritud veerg

Kasutasin oma avatud lähtekoodiga teeki nimega react-native-motion ja komponenti TranslateY. Mis teeb animatsioonide rakendamise hõlpsalt lihtsaks. Vaata koodi. Lihtne arusaada. Me kasutame komponenti TranslateY samal viisil nagu ka komponenti Vaata. Ainuke asi, mida peame tegema, on Y-positsioonide arvutamine positiivse veeru, negatiivse veeru, lähtejoone ja väärtuse sildi jaoks.

Kontrollige tulemust päris rakenduses. Savee.io on juba veergude diagrammi rakendanud. Nagu ma juba ütlesin, teeb kõik kasutajaliidese niit (see on üsna kiire). OnPressi üritus on olemas, nii et saate kuusid muuta. Kategooria valimisel muudab see graafiku väärtusi ja arvutab Y-positsioonid ümber. Siis hoolitseb animatsiooni eest reaalajas liikumine.

Animeeritud arv

Numbrianimatsioon on natuke probleem. Sest me ei saa seda kasutajaliidese niiti teisaldada. Seda peab tegema JS-niit. Olen näinud, et arendajatel on tavaliselt efekt setInterval. Muidugi võite seda kasutada, kuid ma tahtsin seda teha ohutumalt.

Nii et ma kasutan React Native'i animeeritud API-d isegi numbrianimatsiooni jaoks. Saame lisada kuulaja animeeritud väärtusele ja kui väärtust muudetakse, siis lihtsalt renderdame selle numbri uuesti. See on lihtne ja saate animeeritud API eeliseid kasutada. Kasutades näiteks kergendamist. Ja mis on parim? Panin selle komponendi reaalajas liikumise teeki, mis on teie jaoks avatud allikast

Peate lihtsalt kirjutama paar rida niimoodi. Kui teie koodis on väärtust muudetud, hoolitseb see ülejäänu eest.

Saadaval reaalajas liikumisel

Kas sulle meeldis see? Plaksutage, jälgige ja animeerige seda!

Tegelikult ei pea te sellega midagi tegema. Kuid see aitab mind palju. Järgmistele sarnastele artiklitele on see suur motivatsioon.

Minust

Olen autor Savee.io (mida kasutan ka oma animatsioonide mänguväljakuna author) autor. Ja react-native-material-ui ja react-native-motion-teekide autor. Nendest selles ajaveebis kirjutades.

Kui vajate abi oma React Native rakendusega (animatsioonid, performance jne), andke mulle sellest teada, palun;) Arutlen seda hea meelega.
LinkedIn || Github || Twitter