Animirani graf u React Native

Nedavno sam tražio biblioteku grafa React Native za svoju aplikaciju Savee.io. Tijekom istraživanja shvatio sam da nije lako baviti se grafovima u React Native. A ako ih želite animirati? Izgleda gotovo nemoguće. Sljedeći gif je ono što sam učinio i o kojem ću govoriti u ovom „vodiču“!

Cilj ovog članka

Bez biblioteke ART

Kad sam istraživao ljestvice u React Native, otkrio sam da gotovo svi koriste biblioteku ART. Što je stvarno cool i moćna knjižnica za crtanje. Pogledajte ovaj grafikon pita koji je napravila ART biblioteka za aplikaciju Savee.io.

Umjetnička knjižnica Pie Chart u savee.io

Ali kad ga želite animirati? Pa možeš. Moguće je. Ali animaciju radi JS nit. Uvijek pokušavam pronaći način kako sve prebaciti na izvorni dio, tako da naša JS nit nije blokirana animacijom i može raditi na nečem drugom.

Grafikon stupaca o kojem ću govoriti (a možete ga vidjeti u gif-u ispod) uradio je čisti React Native. Nema ART biblioteke!

Hajde da malo kompliciramo

Shvatio sam da mi također treba negativna vrijednost u grafikonu. Korisnici Savee.io obično stvaraju grupu za izlet i prate njihovu potrošnju. Očito postoje samo negativne vrijednosti - samo potrošnja. Sljedeći gif prikazuje kako animacija izgleda i za negativne i za pozitivne vrijednosti.

raspored

Odlučio sam napraviti svaki pojedini stupac zasebno kao komponentu. Tako bih mogao dodati efekt "kašnjenja". Možete vidjeti da se animacija pokreće nasumično za svaki pojedini stupac kada grafikon mijenja položaj osnovne linije. Radimo s visinom od 200 Visina vrijednosti može biti 25, a visina oznake 25. To čini 150 za stupac.

Izgled za jedan stupac

Ako je visina grafikona 150, tada je visina stupca 300. Svaki stupac ima pozitivan dio (A) i negativan dio (B). Suprotna strana ovih dijelova je uvijek skrivena. A je skriven za negativni dio, a B je skriven za pozitivni dio. To znači da ako pomaknemo pozitivni dio (A) ispod osnovne linije u B prostor, pozitivni stupac će biti u potpunosti skriven. To je ono što želimo kada je vrijednost negativna.

Pozitivni dijelovi stupaca (lijeva strana) i negativni dijelovi istih stupaca (desni dijelovi)

Na slici možete vidjeti negativnu vrijednost za posljednji stupac. Vrijednost je -5. Pozitivni stupac u potpunosti se pomiče ispod osnovne crte (skriven je), a negativni stupac pomiče se u pravilan položaj Y i predstavlja -5 vrijednost. Maksimalna vrijednost za ovaj grafikon je 10 (prvi stupac). To znači da će -5 biti u sredini negativnog dijela (75/2).

Ovdje moramo malo matematike jer moramo interpolirati stvarnu vrijednost u položaj Y. Ali neću ovdje razgovarati o tome. Vjerujem da sve možete shvatiti prilično lako.

Animirana kolona

Koristio sam svoju biblioteku otvorenog koda nazvanu react-native-motion i komponenta TranslateY. Što animacije čini vrlo jednostavnim za implementaciju. Pogledajte kod. Lako za razumjeti. Koristimo komponentu TranslateY na isti način kao što bismo koristili i komponentu View. Jedino što trebamo učiniti je izračunati Y pozicije za pozitivan stupac, negativni stupac, osnovnu crtu i oznaku vrijednosti.

Provjerite rezultat u stvarnoj aplikaciji. Savee.io je već implementirao grafikon stupaca. Kao što sam već rekao, sve radi pomoću UI niti (prilično je brzo). Događaj se onPress, tako da možete mijenjati mjesece. Kad odaberete kategoriju, promijenit će vrijednosti grafikona i izračunati Y pozicije. Tada se reakcija-native-motion pobrine za animaciju.

Animirani broj

Animacija brojeva je mali problem. Jer ne možemo je premjestiti na nit korisničkog sučelja. To mora učiniti JS nit. Vidio sam da programeri obično imaju učinak setInterval. Naravno, možete ga koristiti, ali želio sam to učiniti sigurnijim.

Tako da čak i za animaciju brojeva koristim animirani API React Native-a. Slušatelju možemo dodati animiranu vrijednost, a kad se vrijednost promijeni, samo ponovno upisujemo broj. To je jednostavno i možete iskoristiti API-je animiranih filmova. Primjerice, pomoću olakšica. I što je najbolje? Stavio sam komponentu u biblioteku reakcija-native-motion koja je za vas momci otvorena

Samo moraš napisati par redaka poput ovoga. Kad vrijednost promijeni u vašem kodu, on će se pobrinuti za ostalo.

Dostupno u reakciji-native-motion

Je li ti se svidjelo? Pljeskajte, pratite i animirajte!

Zapravo ne trebate ništa učiniti od toga. Ali puno će mi pomoći. Sljedeća je članaka velika motivacija.

O meni

Autor sam Savee.io (koji također koristim kao igralište za svoje animacije ‍). I autor knjižnica react-native-material-ui i react-native-motion. Pišući o njima na ovom blogu.

Ako vam treba pomoć za vašu aplikaciju React Native (animacije, performanse itd.), Javite mi, molim vas;) Rado ću razgovarati o tome.
LinkedIn || Github || Cvrkut