Grafico animato in React Native

Recentemente stavo cercando una libreria di grafici nativi di React per la mia app Savee.io. Durante la ricerca, mi sono reso conto che non è facile gestire i grafici in React Native. E se vuoi animarli? Sembra quasi impossibile. La seguente gif è ciò che ho fatto e di cui parlerò in questo "tutorial"!

Obiettivo di questo articolo

Senza biblioteca ART

Quando stavo facendo le mie ricerche sulle carte in React Native, ho scoperto che quasi tutti usano la libreria ART. Che è una libreria di disegni davvero interessante e potente. Guarda questo grafico a torta che è stato fatto dalla libreria ART per l'app Savee.io.

Grafico a torta della biblioteca ART in savee.io

Ma quando vuoi animarlo? Bene, puoi. È possibile. Ma l'animazione è fatta dal thread JS. Cerco sempre di trovare un modo per spostare tutto in una parte nativa, quindi il nostro thread JS non è bloccato dall'animazione e può lavorare su qualcos'altro.

Il grafico a colonne di cui parlerò (e puoi vedere nella gif di seguito) è stato realizzato da React Native puro. Nessuna libreria ART!

Rendiamolo un po 'complicato

Mi sono reso conto che ho anche bisogno di un valore negativo nel grafico. Gli utenti di Savee.io di solito creano un gruppo per un viaggio e tengono traccia delle proprie spese. Ovviamente, ci sono solo valori negativi - solo spese. La seguente gif mostra come appare l'animazione sia per i valori negativi che per quelli positivi.

disposizione

Ho deciso di creare ogni singola colonna separatamente come componente. Quindi potrei aggiungere un effetto di "ritardo". Puoi vedere che l'animazione inizia casualmente per ogni singola colonna quando il grafico sta cambiando una posizione di base. Lavoriamo con l'altezza 200. L'altezza del valore potrebbe essere 25 e anche l'altezza dell'etichetta 25. Questo fa 150 per colonna.

Layout per una singola colonna

Se l'altezza del grafico è 150, l'altezza della colonna è 300. Ogni colonna ha una parte positiva (A) e una parte negativa (B). Il lato opposto di queste parti è sempre nascosto. La A è nascosta per la parte negativa e la B è nascosta per la parte positiva. Significa che se spostiamo la parte positiva (A) sotto la linea di base nello spazio B, la colonna positiva sarà completamente nascosta. Questo è ciò che vogliamo quando il valore è negativo.

Parti positive di colonne (lato sinistro) e parti negative delle stesse colonne (parti di destra)

Puoi vedere il valore negativo per l'ultima colonna sull'immagine. Il valore è -5. La colonna positiva viene completamente spostata sotto la linea di base (è nascosta) e la colonna negativa viene spostata nella posizione Y corretta per rappresentare il valore -5. Un valore massimo per questo grafico è 10 (prima colonna). Significa che il -5 sarà nel mezzo di una parte negativa (75/2).

Dobbiamo fare un po 'di matematica qui perché dobbiamo interpolare il valore reale nella posizione Y. Ma non ne parlerò qui. Credo che tu possa capire tutto abbastanza facilmente.

Colonna animata

Ho usato la mia libreria open source chiamata React-native-motion e il componente TranslateY. Il che rende le animazioni davvero facili da implementare. Guarda il codice. Facile da capire. Usiamo il componente TranslateY allo stesso modo in cui utilizzeremmo il componente Visualizza. L'unica cosa che dobbiamo fare è calcolare le posizioni Y per la colonna positiva, la colonna negativa, la linea di base e un'etichetta del valore.

Controlla il risultato in una vera applicazione. Savee.io ha già implementato il grafico a colonne. Come ho detto prima, tutto viene eseguito dal thread dell'interfaccia utente (è piuttosto veloce). C'è un evento onPress in modo da poter cambiare i mesi. Quando selezioni la categoria cambierà i valori di un grafico e ricalcola le posizioni Y. Quindi il movimento nativo di reazione si occupa dell'animazione.

Numero animato

L'animazione numerica è un po 'problematica. Perché non possiamo spostarlo nel thread dell'interfaccia utente. Deve essere fatto dal thread JS. Ho visto che gli sviluppatori di solito hanno l'effetto di setInterval. Certo, puoi usarlo, ma volevo farlo in modo più sicuro.

Quindi uso l'API animata di React Native anche per l'animazione numerica. Possiamo aggiungere un ascoltatore al valore animato e quando il valore viene modificato, eseguiamo il rendering del numero. È facile e puoi sfruttare l'API animata. Usando un Easing per esempio. E qual è il migliore? Ho messo il componente nella libreria di reazione-nativo-movimento che è di provenienza aperta per voi ragazzi

Devi solo scrivere un paio di righe come questa. Una volta che il valore è cambiato nel tuo codice, si occuperà del resto.

Disponibile in reattivo movimento nativo

Ti è piaciuto? Clap, Follow and Animate it!

In realtà non devi fare nulla di tutto ciò. Ma mi aiuterà molto. È una grande motivazione per i prossimi articoli come questo.

Su di me

Sono un autore di Savee.io (che utilizzo anche come parco giochi per le mie animazioni ‍). E autore di librerie reagire-materiale-nativo e reattivo-movimento-nativo. Scrivendo su di loro in questo blog.

Se hai bisogno di aiuto con la tua app React Native (animazioni, performance, ecc.), Fammi sapere, per favore;) Sarò felice di discuterne.
LinkedIn || Github || cinguettio