Animación de burbujas con React Native

Lecciones aprendidas al crear una aplicación React Native con Animated y PanResponder

En este artículo, hablaré sobre cómo implementé una transición de aplicación que encontré en Dribbble by Ramotion.

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

Este controlador de paginación se puede utilizar para el flujo de incorporación o para un tutorial.

La versión completa se publica en Expo, y puede obtenerla abriendo la aplicación Expo y escaneando este código QR:

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

Comencemos, ¿de acuerdo?

Así es como construí el fondo:

Tenía View con el color de fondo. Esto incluye Animated.View para la animación de burbujas. Su posición era absoluta para que permaneciera en la parte superior de la pantalla. También agregué algunos estilos básicos.

Luego, animé la burbuja expandiéndome de 0 a máximo usando la escala de transformación CSS con Animated.timing.

La animación anterior necesitaba activarse en función de la interacción del usuario. Primero usé TouchableWithoutFeedback. Luego lo cambié con gestos.

Coloqué la burbuja de acuerdo con el gif, que animaba desde abajo. Hice esto usando la propiedad superior e izquierda.

¡Ordenado! Los resultados son los esperados, excepto el color. Volveremos a eso más tarde.

Ahora reestructuré el código moviendo la lógica de burbuja a un componente separado llamado CircleTransition. Luego activé la animación desde el componente principal.

Entonces llegó el momento de abordar el color. Para animar la burbuja con el nuevo color, pasé el nuevo color al componente. Y después de la transición, escondí la burbuja.

¿Puedes ver algo extraño en la transición anterior?

Durante la segunda transición de burbuja, el color de fondo vuelve al primer color. Necesitaba actualizar el color de fondo al nuevo color con la burbuja en transición.

Pasé una devolución de llamada al método de inicio que se ejecutó cuando se completó la transición.

Voila! Todo esta listo. Ahora tenía la animación básica trabajando.

Luego me metí en el gesto. La burbuja cambia cuando el usuario desliza hacia la izquierda o hacia la derecha según el gif.

Creé un nuevo componente llamado Swipe. Contiene toda la lógica del gesto y reemplaza a TouchableWithoutFeedback.

Usé PanResponder, que concilia varios toques en un solo gesto. Hace que los gestos de un solo toque sean resistentes a los toques adicionales. También puede reconocer gestos multitáctiles simples. Para más información sobre esto, puede ir aquí y aquí.

Ahora para la lógica de los gestos.

Primero necesitaba averiguar en qué dirección está deslizando el usuario. Solo necesito animar cuando el usuario desliza hacia la izquierda o hacia la derecha. También necesitaba configurar un umbral para determinar si realmente es un deslizamiento o no.

Si fue un deslizamiento válido, activé la acción apropiada.

¡Si! Lo has adivinado bien. He conseguido lo que quería lograr con el gesto. Luego agregué una acción para swipeRight. El gesto se completó con un poco de refactorización.

¡Eso es! Esta fue la parte más compleja de la aplicación.

No mostraré mi trabajo completo en esta aplicación. La información en esta publicación debería ser suficiente para ayudarte a construir la tuya. Bifurca esto e intenta completar tu aplicación para que coincida con el gif anterior.

Si está atascado y necesita ayuda, la versión final está en la rama de resultados, eche un vistazo. También puedes enviarme un ping en Twitter @narendra_shetty o comentar a continuación.

Y cuando termine, comparta su enlace Expo / GitHub.

Si este artículo fue de alguna ayuda para usted, aplauda por mí. Me motivará a escribir más :)