Animazione a bolle con React Native

Lezioni apprese durante la creazione di un'app nativa React utilizzando Animated e PanResponder

In questo articolo, parlerò di come ho implementato una transizione di app che ho trovato su Dribbble di Ramotion.

https://dribbble.com/shots/2694049-Pagination-Controller-App-Interface

Questo controller di impaginazione può essere utilizzato per il flusso di onboarding o per un'esercitazione.

La versione completa è pubblicata in Expo e puoi ottenerla aprendo l'app Expo e scansionando questo codice QR:

https://expo.io/@narendrashetty/onboarding-blog

Cominciamo, vero?

Ecco come ho creato lo sfondo:

Ho avuto View tenendo il colore di sfondo. Ciò include Animated.View per l'animazione della bolla. La sua posizione era assoluta in modo da rimanere in cima allo schermo. Ho anche aggiunto alcuni stili di base.

Quindi, ho animato la bolla espandendomi da 0 a massimo usando la scala di trasformazione CSS con Animated.timing.

L'animazione di cui sopra doveva essere attivata in base all'interazione dell'utente. Per prima cosa ho usato TouchableWithoutFeedback. Poi l'ho cambiato con i gesti.

Ho posizionato la bolla in base alla gif, che animava dal basso. L'ho fatto usando la proprietà top e left.

Neat! I risultati sono quelli previsti tranne il colore. Ci torneremo più tardi.

Ora ho ristrutturato il codice spostando la logica della bolla in un componente separato chiamato CircleTransition. Quindi ho attivato l'animazione dal componente principale.

Quindi è arrivato il momento di affrontare il colore. Per animare la bolla con il nuovo colore, ho passato il nuovo colore nel componente. E dopo la transizione, ho nascosto la bolla.

Riesci a vedere qualcosa di strano nella transizione sopra?

Durante la seconda transizione della bolla, il colore di sfondo torna al primo colore. Avevo bisogno di aggiornare il colore di sfondo con il nuovo colore con la bolla trasferita.

Ho passato un callback al metodo start che è stato eseguito al termine della transizione.

Ecco! È tutto pronto. Ora avevo l'animazione di base funzionante.

Successivamente ho preso il gesto. La bolla passa quando l'utente scorre a sinistra oa destra in base alla gif.

Ho creato un nuovo componente chiamato Swipe. Contiene tutta la logica del gesto e sostituisce TouchableWithoutFeedback.

Ho usato PanResponder che concilia diversi tocchi in un solo gesto. Rende i gesti con un solo tocco resistenti ai tocchi extra. Può anche riconoscere semplici gesti multi-touch. Per ulteriori informazioni su questo puoi andare qui e qui.

Ora per la logica dei gesti.

Per prima cosa ho dovuto capire quale direzione stava scorrendo l'utente. Devo solo animare quando l'utente scorre verso sinistra o destra. Ho anche dovuto impostare una soglia per determinare se si tratta effettivamente di un colpo o meno.

Se era un colpo valido, ho attivato l'azione appropriata.

Sì! Hai indovinato bene. Ho ottenuto ciò che volevo ottenere con il gesto. Quindi ho aggiunto un'azione per swipeRight. Il gesto è stato completato con un po 'di refactoring.

Questo è tutto! Questa è stata la parte più complessa dell'app.

Non mostrerò il mio lavoro completo su questa app. Le informazioni in questo post dovrebbero essere sufficienti per aiutarti a costruirne una tua. Fork questo e prova a completare la tua app per abbinare la gif di cui sopra.

Se sei bloccato e hai bisogno di aiuto, la versione finale è nel ramo dei risultati, dai un'occhiata. Inoltre puoi chiamarmi su Twitter @narendra_shetty o commentare qui sotto.

E quando completi, ti preghiamo di condividere il tuo link Expo / GitHub.

Se questo articolo ti è stato di aiuto, per favore applaudimi. Mi motiverà a scrivere di più :)