Grafic animat în React Native

Recent am căutat o bibliotecă grafică React Native pentru aplicația Savee.io. În timpul cercetării, mi-am dat seama că nu este ușor să te ocupi de graficele din React Native. Și dacă doriți să le animați? Pare aproape imposibil. Următorul gif este ceea ce am făcut și despre care voi vorbi în acest „tutorial”!

Scopul acestui articol

Fără bibliotecă ART

Când îmi făceam cercetările despre graficele din React Native, am aflat că aproape toată lumea folosește biblioteca ART. Ceea ce este cu adevărat cool și puternic biblioteca de desen. Uitați-vă la această diagramă plăcintă realizată de biblioteca ART pentru aplicația Savee.io.

ART ART Library Chart în savee.io

Dar când doriți să o animați? Ei bine, poți. Este posibil. Dar animația este făcută prin firul JS. Încerc mereu să găsesc o modalitate de a muta totul într-o parte nativă, astfel încât firul nostru JS nu este blocat de animație și poate lucra la altceva.

Diagrama de coloane despre care voi vorbi (și puteți vedea în gif-ul de mai jos) a fost făcută de React Native pur. Fără bibliotecă de artă!

Să o facem un pic complicată

Mi-am dat seama că am nevoie și de o valoare negativă în grafic. Utilizatorii Savee.io creează de obicei un grup pentru o călătorie și își urmăresc cheltuielile. Evident, există doar valori negative - doar cheltuieli. Următorul gif arată cum arată animația atât pentru valori negative, cât și pentru valori pozitive.

schemă

Am decis să fac fiecare singură coloană separat ca o componentă. Așadar, aș putea adăuga un efect de „întârziere”. Puteți vedea că animația începe la întâmplare pentru fiecare singură coloană atunci când graficul schimbă o poziție de bază. Să lucrăm cu înălțimea de 200. Înălțimea valorii ar putea fi de 25 și înălțimea etichetei 25. Aceasta face 150 pentru coloană.

Aspect pentru o singură coloană

Dacă înălțimea graficului este de 150, înălțimea coloanei este de 300. Fiecare coloană are o parte pozitivă (A) și una negativă (B). Partea opusă a acestor părți este întotdeauna ascunsă. A este ascuns pentru partea negativă, iar B este ascuns pentru partea pozitivă. Înseamnă că dacă mutăm partea pozitivă (A) sub linia de bază în spațiul B, coloana pozitivă va fi complet ascunsă. Asta ne dorim atunci când valoarea este negativă.

Părți pozitive ale coloanelor (partea stângă) și părți negative ale acelorași coloane (părți din dreapta)

Puteți vedea valoarea negativă pentru ultima coloană din imagine. Valoarea este -5. Coloana pozitivă este deplasată complet sub linia de bază (este ascunsă) și coloana negativă este mutată în poziția Y corespunzătoare pentru a reprezenta valoarea -5. O valoare maximă pentru acest grafic este 10 (prima coloană). Înseamnă că -5 va fi în mijlocul unei părți negative (75/2).

Trebuie să facem un pic de matematică aici, deoarece trebuie să interpolăm valoarea reală în poziția Y. Dar nu voi vorbi despre asta aici. Cred că puteți descoperi totul cu ușurință.

Coloana animată

Am folosit biblioteca mea open source numită react-native-motion și componentă TranslateY. Ceea ce face animațiile cu adevărat ușor de implementat. Uită-te la cod. Ușor de înțeles. Folosim componenta TranslateY în același mod în care am folosi componenta View. Singurul lucru pe care trebuie să-l facem este să calculăm pozițiile Y pentru coloana pozitivă, coloana negativă, linia de bază și o etichetă de valoare.

Verificați rezultatul într-o aplicație reală. Savee.io a implementat deja diagrama de coloane. Așa cum am mai spus, totul este realizat prin thread UI (este destul de rapid). Există un eveniment onPress, astfel încât să puteți schimba lunile. Când selectați categoria, acesta va schimba valorile unui grafic și va recompune pozițiile Y. Apoi, reacția-nativ-mișcare are grijă de animație.

Număr animat

Animația de număr este o problemă puțin. Pentru că nu îl putem muta pe firul UI. Trebuie făcută prin fir JS. Am văzut că de obicei dezvoltatorii au efectul setInterval. Desigur, îl puteți folosi, dar am vrut să îl fac mai sigur.

Așadar, folosesc API-ul animat al React Native chiar și pentru animația cu număr. Putem adăuga un ascultător la valoarea animată și atunci când valoarea este modificată, doar redăm numărul. Este ușor și puteți profita de API-ul animat. Utilizând de exemplu un Easing. Și care este cel mai bun? Am introdus componenta în biblioteca de reacție-nativă care este deschisă pentru voi

Trebuie doar să scrii câteva rânduri ca asta. Odată ce valoarea este modificată în codul dvs., acesta va avea grijă de restul.

Disponibil în reacție-nativ-mișcare

Ți-a plăcut? Clapetați, urmați-l și animați-l!

De fapt nu trebuie să faci nimic din asta. Dar mă va ajuta foarte mult. Este o motivație mare pentru articolele următoare.

Despre mine

Sunt autorul Savee.io (pe care îl folosesc și ca loc de joacă pentru animațiile mele ‍). Și autor al bibliotecilor react-native-material-ui și react-native-motion. Scriind despre ele în acest blog.

Dacă aveți nevoie de ajutor pentru aplicația dvs. React Native (animații, performanță etc.), anunțați-mă, vă rog;) Voi fi cu plăcere să discut despre asta.
LinkedIn || Github || Stare de nervozitate