Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native

Comencemos. Genial. Así que sí, gracias a todos por unirse y bienvenidos a este tipo de masterclass. Mi nombre es Oli, soy un desarrollador front end y líder técnico en Clio y estoy acompañado por Alan también. Sí, soy Alan, soy un desarrollador back end pero sí, también hago algo de React, React cosas nativas de vez en cuando. Y he estado en Clio también durante un par de años. Así que sí, vamos a hablar o más bien a recorrer un pequeño tutorial sobre cómo construir una especie de rueda de la fortuna interactiva o algo así como girar para ganar como nos gusta llamarlo animation con React nativo. Así que esto es algo de lo que hablaremos un poco más en unos minutos, pero algo que hemos construido o hemos estado hablando de construir bastante en Clio y algo que hemos encontrado que es una característica realmente atractiva, supongo, para nuestros usuarios. Así que sí, una rápida visión general de la agenda. Sí, como una rápida introducción a Clio y lo que estamos tratando de lograr en nuestra misión. Una rápida visión general de la idea de girar para ganar, sabes, de dónde vino, dónde existe en el producto. Y también, también tenemos algunos diseños de Trev, uno de los increíbles diseñadores de Clio también. Así que un gran agradecimiento a él por proporcionar los diseños. Luego vamos a empezar con Expo. Tenemos un repositorio con un tipo de plantilla de inicio en él. Así que he publicado un enlace a eso en el chat de Discord. Pero si alguien no tiene acceso a eso, simplemente avise. Hay un par de instrucciones para empezar en eso también. Así que siéntete libre de empezar con eso. Pero también lo repasaremos durante un par de minutos también. Asegurémonos de que todos estén al día y listos para empezar. Y luego sí, lo hemos dividido, supongo, en tres pasos principales. Tenemos el tipo de arrastrar la rueda, añadir impulso y algo de animation, y luego algunas tácticas competitivas agradables de tener y otras mejoras adicionales. Y luego una rápida recapitulación y QA. Así que creo que estamos apuntando a ser menos de una hora, esperemos. Intentaremos terminarlo bastante rápido. Pero si alguien tiene alguna pregunta o problema o algo así, no dude en gritar en el Discord o en el chat de Zoom también. Como, sí, ambos podemos saltar y ayudar a cualquiera o sí, encantados de responder cualquier pregunta en el camino también. Así que genial. Así que sí, supongo que empezando un poco sobre Clio y nuestra misión. Así que Clio es una aplicación de dinero que te respalda. Con Clio, estamos tratando de definir una especie de nueva categoría de aplicaciones de gestión de finanzas personales, y una que va más allá del ahorro y la presupuestación para cambiar realmente cómo las personas sienten acerca de su dinero. Así que durante los últimos años, hemos construido una AI que más de 4 millones de personas están utilizando en los Estados Unidos, Canadá y el Reino Unido para ser criticados sobre su gasto para presupuestar y ahorrar también, ayudar a gestionar sus facturas, obtener adelantos de salario y también entender y construir su puntaje de crédito. Así que todo esto se entrega de una manera de chat primero. Tenemos una especie de, supongo, sí, como una pantalla de chatbot, que es donde podemos entregarle sus percepciones. Y también puedes preguntarle a Clio sobre tu dinero. Y esto es entregado en un tono de voz atractivo. Y supongo que lo que estamos tratando de hacer finalmente es crear ese amigo que está cuidando de ti y de tu dinero. Es alguien que tiene tu espalda y también no tiene miedo de decirte cuando la has cagado. Así que sí, esa es la visión general de Clio. Y supongo que nuestra misión general es que estamos tratando de luchar por la salud financiera del mundo. Y eso es, sí, eso es lo que estamos tratando de lograr. La idea de girar para ganar se alinea bastante bien con eso. El último trimestre, Alan y yo estábamos trabajando en el escuadrón de ahorros. Y nuestra misión del escuadrón para el trimestre era ayudar a los usuarios a construir un colchón de seguridad para ese día lluvioso. El problema que estábamos enfrentando era que los usuarios venían al producto y nunca habían ahorrado antes. No tenían ahorros, ahorros existentes, y no tenían colchón de seguridad. Sabes, un mal día podría volcarlos

al límite. Así que su coche se avería y no tienen el dinero para arreglarlo. Podrían, ya sabes, no ser capaces de ir a su trabajo. Pierden su trabajo, se endeudan. Y esto era algo, ya sabes, problemas reales que veíamos, o problemas que los usuarios enfrentaban. Así que nuestro desafío o nuestra misión para el trimestre era ayudar a los usuarios a empezar a ahorrar por primera vez y construir esta red de seguridad para que pudieran, sí, para que pudieran, supongo, sí, si tienen un mal día, podrían permitirse arreglarlo ellos mismos. Y sí, una de las cosas que investigamos junto con los ahorros automáticos y redondeos que ya habíamos construido fue la idea de los ahorros gamificados o los ahorros vinculados a premios. Y esto era algo, no es una idea nueva, y de hecho he enlazado un par de, supongo, artículos y documentos sobre esto. Pero la idea general es que podríamos incentivar a los usuarios a ahorrar más gamificándolo o vinculando premios a la acción de ahorrar. Y se ha demostrado que esto aumenta la cantidad de dinero que la gente ahorra en un año en una cantidad bastante sustancial. Así que supongo que es una situación en la que todos ganan, donde hemos construido un producto que puede incentivar a los usuarios a ahorrar más y a construir esa red de seguridad, al mismo tiempo que construimos una característica atractiva y divertida. Y sí, la idea, supongo, que se nos ocurrió fue esta idea de un girar para ganar. Así que en su forma más básica, teníamos una pantalla que después de ahorrar o en cualquier momento que depositaras manualmente en tu cuenta de ahorros, podrías girar una rueda, te daría un número aleatorio y ese número también contribuiría a tus ahorros. Esa era, esa era la idea, supongo que nuestra hipótesis era que esta sería una característica atractiva para los usuarios y también promovería la idea de ahorros regulares y en última instancia ayudaría a los usuarios a ahorrar más y a construir esa red de seguridad. Así que esa es la idea general. Alan, no sé si tienes algo que quieras añadir sobre eso. No, creo, creo que eso resume bastante bien. Lo interesante, supongo, es que a la gente le gusta mucho la idea de pagar, de dar dinero potencialmente, si eso significa que recibirán una gran recompensa, como una idea, como una de las cosas que realmente demuestra eso es, supongo, si piensas en los billetes de lotería, mucha gente gastará dinero en billetes de lotería, pero será menos probable que ponga el dinero que pagaron en los billetes en una cuenta de ahorros. Así que sí, es, creo, pensamos que era una forma muy interesante de intentar que los usuarios ahorren. Pero sí, eso es genial. Sí, y sí, supongo que este GIF es lo que vamos a intentar construir en los próximos 40 minutos o así. Y sí, como mencioné antes, es un poco un MVP. Así que, ya sabes, estábamos intentando sacar esto y ver si era una característica atractiva para empezar. Pero sí, vamos a empezar con la construcción. Y sí, como mencioné antes, si alguien tiene alguna pregunta mientras avanzamos, no dude en ponerlas en el Discord o en el chat de Zoom. Y sí, podemos responder a cualquiera de esas. Genial. Así que para empezar, vamos a usar Expo para construir esto encima. Así que hemos construido, sí, supongo que para cualquiera que no haya usado Expo antes, es una especie de envoltorio alrededor de React Native que gestiona muchas de las dependencias y te permite poner en marcha muy rápido. Así que es el caso de uso perfecto para este tipo de cosas donde sólo queremos demostrar una característica rápida. Tenemos un repositorio, he puesto el enlace aquí y también en el Discord donde puedes clonar la, nuestra aplicación de inicio. Si nunca has usado Expo antes, puedes instalar el CLI usando este script y luego, sí, clonar el repositorio e instalar las dependencias y ejecutar Expo start para ponerlo en marcha. Luego, creo que después de que Expo haya empezado, creo que puedes pulsar la tecla I si estás en un Mac y se abrirá un simulador de iOS localmente, o puedes pulsar la tecla W y se abrirá en la página web y puedes desarrollarlo allí. Así que sí. Sí, copiaré los enlaces en el chat, lo siento. Así que sí, las diapositivas están en un Google Drive, pero la aplicación de inicio está en ese enlace de GitHub, que debería llevarte al lugar para empezar. Daré unos minutos para que la gente se ponga en marcha allí. Pero sí, si consigues poner esto en marcha, esta debería ser la pantalla que ves. Así que tenemos una aplicación muy simple, sí, React Native funcionando en Expo. Hemos añadido algunos componentes de inicio a ella. Así que tenemos nuestro título, tenemos una pequeña flecha y luego el spinner, que es sólo una imagen en este momento. Y vamos a usar esto como nuestra plantilla de inicio. Así que genial. ¿Creemos que estamos bien para seguir adelante? Sí, si alguien tiene problemas para poner eso en marcha, grita en el chat. Y sí, podemos volver sobre cualquier parte. Pero si no, empezaré a empezar. Así que la primera cosa que vamos a querer hacer, así que supongo que volviendo un poco atrás, esto es lo que queremos, o vamos a querer construir al final. La idea es que puedes hacer clic o supongo que tocar y mantener la rueda, la rueda giratoria. Y luego vas a querer moverla con tu pulgar. Y a medida que mueves ese gesto alrededor o hacia abajo, vamos a querer rotar esa rueda a lo largo. Y creo que, supongo, lo hemos dividido más o menos en tres pasos. Así que el primero es simplemente añadir una rotación a esa imagen a medida que mueves tu dedo,

que puedes ver en esta etapa del juego. El segundo es, supongo, el tipo de flick y el tipo de la adición real de la velocidad a ese giro. Moviendo ese momentum de nuevo a cero con el tiempo o animándolo. Y luego el tercero es, supongo, lo que realmente sucede cuando terminas. Así que con eso en mente. El primer paso que vamos a abordar es el queremos ser capaces de detectar cuando un usuario lo arrastra. Vamos a querer mapear eso a una rotación de la rueda. Y entonces deberíamos estar listos para ir. Así que, lo siento, interrupción. Así que, genial. Sí, hay enlaces a la documentation de los dos tipos de, supongo, bibliotecas de React Native que vamos a usar. Así que la primera es el pan responder. Y la segunda es la biblioteca animada. Así que ambas están incluidas en el núcleo de React Native bibliotecas. Vamos a usar el pan responder para detectar el gesto. Y luego vamos a usar la documentación animada, lo siento, la biblioteca animada para realmente mapear ese gesto en un valor, un valor inicial. Así que, mal camino. Genial. Así que para empezar, supongo que lo primero que queremos hacer es ser capaces de detectar ese gesto cuando un usuario empieza a mover su pulgar alrededor de esa imagen. Y como mencioné antes, vamos a usar la biblioteca pan responder para hacer eso. Así que lo primero que podemos hacer es configurar el pan responder. Y Alan, creo que tú, como hablábamos de esto antes, y me describiste los manejadores de pan muy bien. Así que no sé si quieres. Sí, así que creo que la idea es que estableces un oyente en un componente. Y así la idea es que vamos a establecer esa rueda en el medio para escuchar los gestos. Así que cuando un usuario toca la pantalla, ese pan responder emitirá eventos a los que podemos escuchar. Y pan responder viene con un montón de funciones de callback que podemos establecer en la configuración aquí, como Ollie va a hacer ahora, donde podemos decir y nos permite engancharnos a un montón de diferentes acciones que el usuario está haciendo y hacer cosas basadas en esas acciones. Y así que sí, como dijo Ollie, vamos a engancharnos a esa rueda en el medio y conectarla a los gestos que el usuario está haciendo. Y podemos y de esa manera podemos conectarlo a la rotación del componente real. Como puedes ver. Sí. Sí, genial. Así que sí, creo que eso me hizo clic. Sí, supongo que la biblioteca pan responder es, en última instancia, está juntando todos los diferentes toques y gestos que un usuario está haciendo en un solo conjunto de funciones de callback a las que luego podemos engancharnos. Así que el primero que estamos llamando, o estamos añadiendo a la configuración aquí es el on move should set pan responder. Y creo que esto es principalmente para asegurarse de que el que el componente al que adjuntamos el pan responder realmente recibe los callbacks y que no se propaga hacia arriba o hacia abajo dependiendo de si hay otros componentes alrededor que también están buscando los callbacks. Y luego el siguiente en el que estamos interesados es para cuando y cuando el movimiento realmente comienza. Así que en pan responder move, respond to new. Así que este es el tipo de callback que se llamará cuando el usuario empiece a mover su pulgar alrededor del componente al que adjuntamos este manejador. Así que supongo que la forma en que podemos comprobar eso es escribiendo este callback. Así que toma dos, toma dos argumentos. El primero es el tipo de evento que está sucediendo. Y el segundo es el tipo de estado del gesto. Así que el estado del gesto actual. Así que sólo para como comprobar que esto está funcionando. Podemos comprobar, supongo, el contenido del estado del gesto aquí. Así que ahora tenemos nuestro así que tenemos nuestra configuración de pan responder. El siguiente paso es realmente añadir esta configuración a uno de los componentes para establecer los callbacks en vivo para realmente añadir el manejador. Y la forma en que puedes hacer eso es simplemente extendiendo el camino. Así que lo que esto está haciendo ahora es decir que este componente de imagen tiene el tipo de pan los callbacks del manejador adjuntos a él. Así que esta es la configuración que hemos establecido y deberíamos estar empezando

para ver el console.warn disparado cuando movemos el gesto dentro de aquí. Y si lo hacemos y empezamos a arrastrar, deberíamos ver que obtenemos una serie de advertencias con el contenido completo de ese estado de gesto. Genial. ¿Alguna pregunta hasta ahora? ¿Estamos bien? Creo que sería bueno si solo advertimos el estado del gesto.dy para que podamos ver como el... Sí, sí. Porque sí, el dy es la propiedad que nos importará para empezar. dy es la distancia desde donde el usuario comenzó a arrastrar hasta donde terminó de arrastrar. Sí. Así que sí, dentro de este tipo de estado de gesto que es pasado al callback, obtenemos mucha información sobre el gesto. Y como mencioné, uno de esos es dy, que es, sí, la distancia desde donde comenzó el toque hasta donde realmente se movió, supongo. Hay otros como, ya sabes, la coordenada real del pulgar, supongo, en la pantalla. Pero sí, el que más nos interesa aquí es realmente el movimiento del pulgar. Así que podemos console.log.dy. Y esto nos va a dar los números como, o supongo que el número de píxeles desde donde comenzó el toque. Y en realidad, supongo que este es probablemente un buen momento para hablar de lo que estamos tratando de lograr con el manejo del gesto, el toque. Y creo que, sí, nuestra idea de cómo debería funcionar esto es que queremos traducir un movimiento Y en el gesto a una rotación de la imagen. Y podemos hacer eso muy bien usando las APIs animadas de React Native. Pero supongo que la forma en que vamos a querer calcular eso es mirando la distancia desde donde comenzó el toque hasta donde terminó el toque. Y como, sí, mapeando esta distancia en una rotación de grados. Así que con este code que hemos añadido hasta ahora, tenemos este pedazo aquí, como no estoy seguro de que incluso voy a poder escribir esto. Pero como esto, esta cantidad aquí es el dy. Y como, suponiendo que empezamos aquí, lo siento mucho, esto es un garabato terrible. Sí, se ve bien. Es más claro. Y sí, entonces supongo que el siguiente paso entonces. Así que tenemos nuestro, tenemos nuestro pan responder, tenemos esta distancia aquí, ahora queremos traducir eso en un valor animado, o un valor de rotación. Y para hacer eso, vamos a usar la funcionalidad de valor animado, ¿cómo se llama?, dentro de la biblioteca animada. Y supongo que efectivamente, lo que esto es, es una especie de flujo de valores hecho para ser super eficiente. Y luego podemos usar varias funciones o funcionalidades alrededor de eso para permitirnos mapear entre los valores de entrada y salida que le damos. Así que en este caso, si mi editor alguna vez quiere volver, si no lo hace, un segundo, déjame intentar reiniciar eso. Alan, ¿algo que añadir mientras tenemos las anotaciones? Creo que estás haciendo un gran trabajo explicando. Sí, creo que una cosa, la anotación todavía está en la pantalla. No sé si podrías... Bueno, creo que eso fue todo. Sí. ¿Cuál era tu otra cosa por cierto? ¿Tu editor estaba congelado? Creo que podría haber estado dibujando encima de él. No creo que estuviera realmente congelado. Genial. Bueno, lo intentaremos de nuevo. Pero sí, ¿hay alguna pregunta sobre esto en este momento? Vale. Sí, no duden en publicar cualquier pregunta en el Discord o el Zoom y podemos intentar responderlas en el camino. Genial. Vale. Vale. ¿Puedes acercar un poco, por favor? Oh, sí. Lo siento. Sí. Bien. Gracias.

Vale. Casi estamos allí. Vale. Entonces, sí, como mencioné antes, tenemos la distancia ahora desde cuando el usuario comienza su gesto o comienza a arrastrar hasta cuando, supongo, lo continúa y lo termina. Lo siguiente que queremos hacer es realmente convertir ese valor en un valor de rotación en la rueda giratoria. Y sí, como mencioné antes, vamos a usar el valor animado o la biblioteca animada, que incluye un flujo de valores, efectivamente. Entonces, la forma en que hacemos esto es que usamos el animado... Entonces, creamos un nuevo valor animado y vamos a empezarlo más o menos en cero, supongo, cero movimiento porque queremos que, sí, comience desde el principio. Y luego, la única otra cosa que hay que recordar cuando se usan valores animados en componentes funcionales es que queremos envolverlo en una ref para que siempre sea el mismo. Entonces, vamos a usar el valor animado solo que queremos envolverlo en una ref para que siempre sea el mismo valor entre los prestadores.

Entonces, sí, el valor de rotación ahora es, supongo, nuestro tipo de conducto o tubería de valores de animation que vamos a establecer a medida que el usuario mueve su pulgar. Y luego lo que queremos hacer es mapear esos valores en la rotación. Así que, lo primero que queremos hacer es simplemente establecer este valor. Y vamos a establecer ese valor cuando el usuario mueve ese pulgar.

Entonces, usando esto, la parte que estábamos mostrando anteriormente en la declaración de console. Entonces, en este punto, cuando tú, quiero decir, no va a pasar nada, pero cuando tú... Cuando tú, sí, cuando mueves tu pulgar sobre, tocas y arrastras sobre la rueda, vamos a estar empujando el Y, ese cambio de valor Y en el valor de rotación, como, sí, tubería, supongo. Pero no estamos haciendo nada con ello. Solo lo estamos estableciendo en este momento. Así que, lo siguiente que queremos hacer es realmente añadir esa rotación a la imagen. Y la forma, supongo, podemos empezar a hacer eso es, supongo, simplemente hacerlo manualmente. Así que, podemos pasar la rotación real al componente de imagen. Y como, sí, así que podemos pasar React Native te permite pasar esta propiedad de rotación por la propiedad de estilo de transformación. Y puedes, sí, establecer esto a un cierto número de grados, y puedes ver esa imagen girando alrededor a medida que aumentamos eso. Entonces, lo que vamos a querer hacer es vincular este valor de rotación al valor de rotación en esa imagen. Y podemos hacer eso realmente fácilmente usando la biblioteca animada de React Native de nuevo. Lo primero es que realmente tenemos, o la biblioteca envuelve muchos de los componentes base en React Native con, como, las versiones animadas de ellos. Y lo que esto te permite hacer es pasar, en lugar de, supongo, valores fijos o variables aquí, en realidad te permite pasar un valor animado directamente. Entonces, ese es el primer paso es simplemente convertir

esto en una imagen animada. El segundo paso es que queremos proporcionar un mapeo del tipo de valores de píxeles que estamos introduciendo aquí. Así que, recuerda, este dy es el número de píxeles desde donde comenzó un gesto hasta donde el gesto realmente terminó, o está actualmente. Queremos mapear eso desde, como, supongo, un píxel vertical a un número de grados de rotación. Y la forma en que podemos hacer eso es usando la función de interpolación animada. Así que, lo que hacemos, y sí, esto va a ser algo así como pasado al spinner como un estilo de rotación. Así que, podemos decir que eso va a ser nuestro valor de rotación, y queremos interpolar eso. Así que, interpolar es una función que es, algo así como, supongo, existe en el valor de rotación. No, no es. Es esto. Es animado. No, sí. ¿De qué estoy hablando? Sí, lo es. Genial. Pasamos en el rango de entrada. Así que, el rango de entrada es el, supongo, el tipo de los valores que nos interesa interpolar entre. Y el rango de salida es, de nuevo, el tipo de, como, la salida que queremos ver de la función de interpolación. Y en este caso, podemos pasar en realidad un número, un tipo de valor de grados en una cadena, y la biblioteca entenderá que esto significa que es una rotación y realmente transformará estos dos valores. Así que, efectivamente, lo que esto está diciendo es que cuando el usuario ha movido su pulgar por uno, por cero píxeles, queremos que eso se traduzca en cero grados de rotación, lo que tiene sentido. Si simplemente pones tu pulgar ahí y no lo mueves, como, no queremos que ese spinner se mueva. Ahora estamos diciendo que si mueves eso por un píxel hacia abajo, queremos que eso se traduzca en un grado de rotación. Así que, esto no tiene que ser un uno, sabes, un tipo de uno-a-uno mapeo. Podríamos usar este valor para realmente afinar la interacción y hacer que se sienta como si realmente estuvieras tirando de ese spinner hacia abajo. Pero podemos, sabes, podemos jugar con este valor más tarde y averiguar ese mapeo exacto. Y también es algo que creo que sería mucho más tipo de, como, o mucho mejor para tenerlo en tu mano y jugando en tu teléfono para ver cómo se siente. Así que, lo dejaremos como, supongo, un píxel iguala un mapeo de rotación de un grado por ahora. Así que, para usar realmente este valor interpolado, podemos pasar esta rotación de spinner directamente en el estilo de rotación como esto. Y lo que deberíamos ver ahora o ser capaces de hacer es cuando haces ese gesto, vemos ese tipo de mapeo a un valor de rotación en la imagen. Así que, sí, eso es, supongo, el inicial tipo de paso que queríamos hacer. Hemos mapeado un cambio en el gesto Y a un valor de rotación en la imagen. Y sí, es algo así como, supongo, se siente bastante bien. Alan, ¿algo perdido? ¿Algo? No, creo que suena genial. Lo único que creo que es interesante es que el rango de entrada y el rango de salida que especificamos, esos no son necesariamente límites. Esos son simplemente especificando la, supongo, es la línea, el ángulo, la inclinación de cuán rápido queremos que la entrada afecte la salida. Pero eso no significa que sólo afectaremos cosas que son menos de un píxel o el DY que es menos de uno. Así que, seguirá yendo. Es más, es más definiendo una línea. Y como dice Ollie, podríamos hacer que ese movimiento de un píxel se traduzca en más de un grado, como una cosa de dos grados. Y eso simplemente significaría que giraría más rápido para una cosa. Y realmente podemos jugar con eso para hacerlo más realista. Sí. Sí, muy buen punto. Sí. Sí. Así que, sólo la pregunta en el Zoom es exactamente sobre eso. Sí. Así que, esto es, sí, exactamente como mencionó Alan, es un tipo de mapeo de relación. Así que, un valor de lo que está efectivamente diciendo es que como un valor de dos aquí sería dos grados. Y puedes realmente especificar eso si quisieras que no fuera un mapeo lineal. Sabes, podrías cambiar eso dependiendo de lo que necesites de la interpolación exacta. Pero sí,

para nosotros, sólo necesitamos ese mapeo lineal, que es genial. Otra cosa que puedes hacer es que puedes usar, puedes usar algunas de estas, algunas de las configuraciones aquí para realmente limitar entre ellas. Sí, es la cosa de la extrapolación. Entonces, sabes, podrías limitarlo si quisieras que fuera algo entre cero y uno va a cero y un grado. Eso fue para realmente, sí, salir de este rango. Entonces, sí. Así que, estamos contentos con ese mapeo lineal. Genial. Bueno. Supongo que otra cosa a mencionar en este punto es que hay algunas advertencias a esto o este enfoque para empezar que creo que estamos, sería bueno hablar de ello, pero también ser conscientes de ello y es algo que podemos volver a tratar. Entonces, la primera es que estamos confiando en este movimiento DY del pulgar del usuario, mientras que en realidad el gesto podría ser circular. Y en este momento, si tú como mapeas esto alrededor o sigues el gesto alrededor, como pasando la horizontal, y luego como yendo, empezando a subir de nuevo, verás que estamos rotando en la dirección equivocada cuando subes por el lado izquierdo. Y la razón de eso es que estamos siguiendo el movimiento vertical desde donde empezaste. Así que, tiene sentido que empiece a rotar hacia atrás cuando vuelves a subir a ese primer punto. Así que, eso es lo primero. Y creo que hay varias formas, supongo, de solucionar eso. Y como, sí, eso es definitivamente algo de lo que podemos hablar en un poco más tarde. La otra cosa es que en este momento, si arrastramos y soltamos, y terminamos ahí, qué, y luego si arrastramos y soltamos de nuevo, notarás que nuestra rueda empieza de nuevo desde cero. Y la razón de eso es que estamos estableciendo este valor a cero grados, lo siento, cero píxeles desde el inicio del gesto. Así que, estamos empezando un segundo gesto, y estamos reiniciando ese valor de rotación a cero, lo cual es por qué está saltando. Entonces, una, supongo, forma bastante agradable de solucionar eso es que, bueno, hay un par de formas de solucionarlo. La primera o la más técnica sería como, sabes, en lugar de reiniciarlo a cero, como usamos un desplazamiento para asegurarnos de que siempre estamos moviendo las cosas desde donde se dejó por última vez. Pero en realidad, supongo, pensando en el problema o en lo que estamos tratando de lograr aquí, como estamos tratando de hacer una rueda de giro para ganar para que el usuario gire una vez y luego averigüe como un premio que ganan o algo así. Sabes, puede que no haya realmente un caso de uso para girar varias veces. Así que, esto podría ser algo que vemos en desarrollo. Pero como, supongo, para resolverlo para nosotros mismos, podría ser bastante agradable tener una forma de reiniciar esto a cero sin que salte de nuevo. Así que, lo que podríamos hacer es simplemente añadir un botón, un botón de reinicio. Lo llamaremos reinicio. Y luego al presionar, sólo queremos llamar a una nueva función de reinicio que podemos escribir aquí arriba. Y todo lo que el reinicio va a hacer es que quiere establecer el valor de rotación de nuevo a cero. Así que, ahora deberíamos tener ese botón de reinicio aquí. Así que, cuando hacemos clic y arrastramos y hacemos nuestro primer gesto y pulsamos el botón de reinicio, podemos ver que salta de nuevo a cero. Y este es, supongo, también un buen momento para introducir algunas de las animations de ayuda de React animation o React native animated. Y te permiten hacer varias cosas o manipular valores animados de varias formas para proporcionar animations interactivas o visuales realmente agradables. Y una de ellas se llama resorte. Así que, podríamos usar el resorte. Así que, en lugar de simplemente restablecer el valor a cero aquí, podríamos animarlo de vuelta a cero de una manera fluida. Así que, podemos hacer eso usando la función de resorte animada. Así que, lo que hacemos es llamamos a animated.spring y le decimos a la función que nuestro valor de rotación es el que queremos que resorte y que queremos que resorte de vuelta a cero. Así que, sólo para mostrarte cómo se ve antes de hablar de ello, lo que va a hacer es que cuando haces clic en reiniciar, en lugar de saltar de vuelta a cero, es... En lugar de saltar... Intentémoslo de nuevo. En lugar de saltar de vuelta a cero, se animará y volverá a cero. Así que, supongo que lo que está pasando debajo es esta función es como hemos establecido el valor a un valor fijo aquí. La función de resorte está calculando una, sabes, basada en una curva de suavizado, el siguiente valor que debería poner en y actualizando esto... O volver a cero. El segundo argumento a la configuración es sólo asegurándonos de que estamos siempre usando el controlador nativo, o, sí, usando el controlador nativo, que es como el nuevo rendimiento con la biblioteca animada. Genial. Así que, tenemos nuestro botón de reinicio funcionando y eso es, sí, volviendo a cero, lo cual es sólo un poco agradable de tener para nosotros. ¿Alguna otra pregunta o algo más que añadir en este momento?

No para mí. Vale, genial. Entonces, supongo, volviendo un poco a nuestro plan, hemos detectado cuando un usuario arrastra hacia abajo en la rueda. Luego hemos mapeado ese arrastre a una rotación. Y, sí, las dos bibliotecas que hemos usado aquí son el pan responder, que son las devoluciones de llamada de manejo de gestos y el conjunto de funciones animadas de React Native para mapear valores a estilos efectivamente dentro de nuestra aplicación nativa.

Genial. Entonces, supongo, sí, la siguiente pieza del rompecabezas es realmente añadir momentum a esta rueda. Así que, la tenemos en este momento. La tenemos de manera que puedes hacer clic y arrastrar y soltar y se detiene. Cuando estás girando una rueda, queremos, sabes, vamos a querer añadir algo de momentum ahí. Pero obviamente, si haces eso en este momento, simplemente se va a detener tan pronto como levantes el dedo. Así que, obviamente, eso no es genial. Así que, lo siguiente que vamos a hacer es que vamos a querer añadir algo de momentum a esta rueda para, sí, hacerla girar. Y supongo que, al igual que hicimos con la función de resorte aquí, también tenemos un método de ayuda realmente agradable en la biblioteca animada que puede ayudarnos aquí. Y efectivamente, lo que vamos a hacer es que vamos a querer tomar la velocidad del gesto en el punto de liberación. Y vamos a querer descomponer esa velocidad a cero con el tiempo. Así que, supongo que en términos de lo que realmente está pasando es, como, estás moviendo tu pulgar por la pantalla hasta que estás tocando y arrastrando y moviendo tu pulgar. En el punto en que sueltas tu pulgar, queremos tomar la velocidad a la que se movía tu pulgar. Y vamos a querer seguir moviendo la rueda a esa velocidad. Pero lentamente, como, sabes, usando una función de fricción, empujar lentamente esa velocidad a cero. Así que, sabes, como si estuvieras girando la rueda, iba a hacer tic, tic, tic, tic, tic, y lentamente se va haciendo más lenta y más lenta y más lenta y luego, sabes, aterriza en el valor que tienes. Así que, tratando de, supongo, imitar, como, el mundo real, sí, el mundo real, lo que pasaría en el mundo real, realmente. Así que, sí. Supongo que para empezar con eso, vamos a engancharnos en la función de liberación del pan responder. Así que, esta es la parte que, sí, como acabo de mencionar, queremos obtener la velocidad de tu movimiento cuando sueltas el pulgar de la pantalla. Así que, en el manejador de pan liberar. Así que, esta es otra devolución de llamada. Toma los mismos argumentos que el manejador de pan mover. Y como hicimos antes, podemos simplemente, como, registrar el estado del gesto. Y dentro del estado del gesto está este VY. Así que, esta es la velocidad del tipo de el eje Y de ese gesto en el punto de liberación. Así que, si hacemos eso ahora, hacemos clic y arrastramos y soltamos, podemos ver que obtenemos un valor aquí. Y creo que, sí, como si intentaras girarlo más duro o más rápido y luego soltaras, obtenemos un número más grande. Y creo que, Alan, tú hiciste, conseguiste averiguar lo que este número realmente significa. Sí. Así que, ese número es, así que, en el punto de liberación, son los píxeles por milisegundo que el gesto estaba moviendo. Así que, si lo haces de nuevo. Así que, sí, Oli estaba moviendo su ratón a 11 píxeles o punto 18, 1.9 milisegundos, lo siento, píxeles por milisegundo. Así que, sí. Así que, esa es la parte, esa es la unidad que obtenemos de vuelta como este valor de estado de gesto dot VY que podemos usar en adelante. Así que, tenemos, sí. Así que, tenemos este valor, que es, sí, píxeles por milisegundo. Y ese es entonces, como, supongo, también el valor que, porque tenemos este mapeo uno a uno en este momento, como, también podemos decir que es, como, sabes, el número de grados de rotación por milisegundo también. Así que, sí. Lo siguiente que vamos a querer hacer es empezar a mapear o usar esta velocidad. Queremos darle a este valor animado eso o seguir aumentando el valor usando esa velocidad, pero descomponiéndolo a cero. Y como supongo, aludí, tenemos esta función de decaimiento que está incluida en la biblioteca animada. Y funciona de la misma manera que la de resorte. Así que, podemos pasar como primer argumento, el valor animado que queremos descomponer. Y el

config, pasamos la velocidad real de nuestro gesto. Así que, esto podría ser cualquier velocidad que nosotros queramos. Pero en nuestro caso, queremos pasar la velocidad del gesto. Así que, esa velocidad a la que el usuario suelta su pulgar. Así que, voy a, vamos a empezar eso al soltar. Genial. Así que, lo que deberíamos ver ahora en un poco de magia es que cuando sueltas ese pulgar, la rueda continúa girando y lentamente descompone la velocidad a cero usando una función de fricción o, sabes, algún tipo de desaceleración. Y supongo que la forma en que puedes comprobar eso es si tú vas muy lento en la liberación, rápidamente va a cero. Si le das un gran giro y lo haces girar fuerte, en realidad seguirá girando y lentamente bajará a cero. Así que, sí, hemos, supongo, hemos conseguido gran parte de nuestra funcionalidad allí, lo cual es realmente genial. Y ha sido bastante simple usando sólo, sabes, una combinación del Panresponder y las funciones de ayuda animadas. Hay algunos otros bits y piezas que supongo que sería genial jugar con. Así que, la primera es en realidad como esta función de desaceleración o esta velocidad a la que descomponemos la velocidad de la rotación a cero. Sí, podemos jugar un poco con eso e intentar hacer que se sienta tan realista como sea posible o, sabes, realmente aumentar esa anticipación de que va, de que la velocidad baja a cero. Así que, en la configuración que pasamos a la función de descomposición, también podemos pasar un valor de desaceleración. Creo que esto es 0.997 por defecto. Así que, esto debería ser lo mismo. En realidad no sé qué significa 0.997. Supongo que es sólo un valor. Pero con lo que podemos jugar es si, sí, si cambias ese valor a ser diferente, verás que con un valor de desaceleración más bajo, bajamos a cero mucho más rápido. ¿Tiene sentido? Se detiene más rápido. Más rápido, gracias. Y luego, sí, si nosotros aumentamos esta carga, creo que lo que deberíamos ver es que esta rueda simplemente gira para siempre. Así que, eso es probablemente un poco excesivo. Nunca va a parar. Los rodamientos en eso. Sí. Y en realidad, cuando estaba jugando con esto antes, y realmente lo estropeé. Genial. Cuando estaba jugando con esto antes, el valor que pensé que se sentía mejor era 0.9989. Y no había absolutamente nada aparte de prueba y error para llegar allí. Pero como, sí, juega con unos cuantos valores diferentes y grita si alguien encuentra uno mejor. Pero esto pareció hacer un muy buen trabajo de, supongo, hacer que esa anticipación de que gira dure tanto como sea posible mientras todavía estás como, ¿qué voy a conseguir? Así que, si le das un giro ahora, baja y sigue yendo, yendo, yendo, yendo y finalmente se detiene en tu valor. Así que, no sé, sentí que daba un buen nivel de anticipación mientras lo estás girando. Sí. Podría ver eso para siempre. Genial. Así que, supongo que, sí, tenemos nuestro, sí, como parte de esto, hemos añadido nuestra velocidad a la animation. Así que, cuando el usuario suelta su pulgar o su dedo del gesto, tomamos la velocidad a la que se estaban moviendo y continuamos esa velocidad en la rotación, pero la descomponemos lentamente a cero con una función de desaceleración. Así que, desde un punto de vista funcional o, supongo, un tipo de camino feliz, como esto es, sabes, la mayor parte de lo que necesitábamos y queríamos construir. Pero sí, supongo, como mencionamos un poco antes, hay algunos agujeros bastante obvios en esto en este momento. El primero es que, sí, si giras hacia arriba y alrededor, como empieza a bajar a cero, lo cual es un poco, un poco brap. Y luego el otro es, supongo, si vamos a empezar a jugar con la idea de que esto sea algo de lo que podrías ganar dinero o que podrías usar para ganar, como si lo arrastras hasta ese 500 y lo sueltas, no tenemos velocidad, así que no añadimos ninguna velocidad en. Así que, y sí, podemos confiar en los usuarios para que siempre encuentren una forma de hacer eso. Así que, supongo que lo primero que querríamos intentar hacer, en realidad, creo que tengo una diapositiva para esto. Sí, bien. Así que, estas son las mejoras o ideas adicionales que estábamos hablando de hacer. Sí, tenemos una especie de área de gesto donde estás arrastrando hacia arriba. Tenemos esta idea de una velocidad mínima o aleatoriedad si estás tratando de engañar a ese sistema. Y también la idea de que si vamos a otorgar dinero con esto o, sabes, simplemente ingresar a los usuarios en un sorteo o lo que sea, como, tal vez queremos que esto sea un poco aleatorio para, sí, hacerlo lo más

seguro posible. Entonces, sí, supongo que cómo podríamos hacer eso es bastante simple para el aleatorio de todos modos. Entonces, supongo que volviendo al problema, el tipo de problema es que puedes arrastrar y soltar esto y soltarlo en el 500 y no tienes velocidad. Entonces, tal vez todo lo que necesitamos hacer es dar un velocidad mínima aquí. Y si tenemos algo menos que el mínimo, entonces generamos un valor aleatorio. Entonces, lo que podemos hacer es simplemente crear una velocidad aquí. Y luego vamos a decir, como, si el estado del gesto, si la velocidad es mayor que, digamos, uno, entonces estamos contentos con ella. De lo contrario, como, vamos a crear un aleatorio o sacar un valor aleatorio de algún lugar. Y aquí he añadido simplemente un más uno sólo para darle, como, un impulso inicial de velocidad, sólo para que se mueva algo similar. Y luego podemos pasar esto directamente a esa configuración. Entonces, si ahora reiniciamos esto, lo que deberíamos ver es que lo giramos como de costumbre y estamos bien. Pero si reiniciamos eso a cero, si ahora arrastro y suelto eso y simplemente lo dejo ir, obtenemos esa especie de velocidad que se nos da. Y hemos añadido una, ya sabes, hemos añadido una función aleatoria aquí. Entonces, si lo hicieras de nuevo, y no deberíamos, ya sabes, no deberíamos obtener siempre el mismo valor. Entonces, deberíamos ser capaces de obtener algo que sea diferente a ese 50. Entonces, sí. Entonces, eso resuelve, supongo, una cosa. La otra cosa es, como, si queríamos mantener esto bonito y limpio, podríamos tener una especie de, como, velocidad mínima. En allí. Y, sí, eso nos da un poco de control sobre el, sí, del tipo de, del gesto, supongo. Alan, ¿alguna otra idea sobre los otros bits? Quiero decir, hay eso, hay algunas, sólo algunas ideas. React Native tiene, como, una biblioteca de confeti nativa que podrías pegar. Hay una captura de pantalla al principio de la presentación con confeti en ella. Y hápticos, retroalimentación háptica. Sería genial si, si alguna vez has visto, como, una de esas ruedas de la fortuna donde hay, como, pequeños bits entre cada cuadrante, o no cuadrante, pero sección que lo sostiene, y hace un tic entre, a medida que se ralentiza, hace un tic entre. Y así, podríamos, podríamos hacer eso. Entonces, sí, quiero decir, sería realmente interesante ver qué tipo de ideas cualquiera de ustedes tiene, como, cómo podríamos mejorar esto, o, o sería genial si lo bajas y, como, lo reconstruyes y luego lo extiendes a algo que pensaste que era genial. Creo que eso sería realmente genial, sí. Sí, seguro. Sí, como, esto es muy parecido a, sí, primero, primera implementación. Entonces, hay, sí, cualquier otra idea para hacerlo impresionante sería genial. Sé, como, una de las otras cosas de las que hablamos es, supongo, usar, como, una especie de imagen aquí y rotarla es una forma un poco tramposa de hacerlo. Pero, ya sabes, ¿qué tal si podríamos hacer parpadear los elementos individuales cuando aterrizamos en ellos, y, ya sabes, en realidad construir esto como su propio componente que estábamos rotando, en lugar de una imagen, y, ya sabes, entonces podríamos, como, hacer parpadear el segmento en el que aterrizamos y hacer que, como, emita el confeti, o, sí, algo así sería bastante genial. Sí, el comentario de Paul sobre llevar al DX es, sí, definitivamente una buena idea. Animado, como, podríamos usar el valor animado, en lugar de ser sólo un tipo de, sí, un solo tipo de valor, podríamos usar el ayudante XY para, ayudante XY para permitirnos mover cosas en los ejes Y y X al mismo tiempo. Y de esa manera podríamos, sí, podríamos usar el valor X, también, y tener esa rotación, ese valor X mapear con el, sí, con el movimiento a lo largo del eje Y, también. Pero, sí, creo que podría haber formas más fáciles de resolver el problema con, sobre, como, mover el pulgar alrededor de él. Por ejemplo, como, simplemente, como, detectar cuando mueves tu pulgar, como, más a la izquierda que el punto medio, y luego empezar, como, tomando, sí, negando el valor, que es, de nuevo, un poco de trampa, pero... ¿Todavía cubrirás cómo decidir a qué campo giramos finalmente? Esa es una muy buena pregunta. No hemos, como, llegado tan lejos todavía. Definitivamente es algo, como, creo que podríamos intentar empezar, sí, a juntarlo. Creo que la forma en que, supongo, podemos, como, pensar en cómo hacer eso es que, en este momento, este valor, sí, hemos mapeado esto, lo hemos mantenido bastante fácil para nosotros mismos porque estos valores están mapeados de un píxel o uno, sí, una unidad en el valor, en el valor animado igual a un grado de rotación. Y si, como, sí, decimos que tenemos, como, 10 segmentos aquí, cada segmento va a ser 36 grados de valor, o 36, como, píxeles en el valor. Entonces, lo que podemos hacer es esta función de inicio te da un callback al final. Así que, vamos a comprobar cuál es este valor. Entonces, lo que deberíamos ver ahora es si dejamos que eso gire, deberíamos ver, como, el valor final aquí. Genial. Y lo que queremos hacer entonces es decir, como, queremos saber el resultado o el valor actual en el momento del final. Y luego queremos ser capaces de, supongo, como, dividirlo por 10 para darnos

el, sí, el, tipo de, segmento. ¿Es eso correcto? ¿Dividirlo por 10? Sí. Aquí vamos. Sí, está bien, inténtalo. Entonces, una parte es que no tenemos el real, con este valor animado, no podemos realmente, tipo de, obtener acceso al valor bruto de esto. Así que, lo que necesitaremos hacer es configurar un listener para este valor y, tipo de, añadirlo al estado. Así que, vamos a, tipo de, como, juntar esto bastante rápido. Así que, lo que voy a hacer es añadir un listener al valor de rotación. Y vamos a establecer el valor cuando se llame a eso. En nuestro efecto, también podemos devolver una limpieza. Vale. Sí, esto es, estoy, tipo de, juntando esto para mostrar cómo se podría hacer. Pero lo que deberíamos tener ahora es, en este estado, tenemos nuestro, tipo de, valor. Y lo que podemos hacer entonces es, en esta función de finalización, podemos, tipo de, comprobar cuál es nuestro valor. Así que, si lo giramos alrededor, ahora tenemos, eso no es lo que, sí. Así que, lo que tendremos en este punto es el valor en el que terminamos en esto, o lo que deberíamos tener es el valor en el que terminamos en este callback. Y luego podemos, sí, como mencioné, usar eso para calcular que comienza en. Así que, estamos empezando en medio del segmento. Seremos, tipo de, como, menos 5 y más 5, lo siento, 6, 6, 2, 2. Seremos menos 18 y más 18 desde el principio será nuestro primer segmento. Así que, sí, podríamos, tipo de, calcular los desplazamientos desde eso y, tipo de, averiguar qué ese valor, en qué segmento cae el usuario basado en, como, el módulo de eso, si eso tiene sentido. Andre, ¿tiene sentido eso para el, tipo de, decidir cuál ha sido girado? Genial. Y no estoy exactamente seguro de por qué esto no está funcionando en este momento. Estoy seguro de que hay algo estúpido pasando. Pero, sí, eso es más o menos cómo funcionaría. Genial. ¿Alguna otra pregunta? ¿Algún otro pensamiento sobre, como, sobre, sí, supongo, extensiones que podríamos hacer aquí o, como, pequeños detalles agradables que suceden también? Como, siéntete libre de dispararlos en cualquier lugar. Pero, sí, como mencionó Adam, como, sí, hay algunas bibliotecas pequeñas y agradables como la del confeti. Así que, sí, lo que podríamos hacer es, sí, podríamos usar esto, tipo de, esta biblioteca para disparar un poco de confeti cuando, sí, en este punto, cuando terminamos esa descomposición, cuando esa velocidad vuelve a cero, podríamos disparar un poco de confeti. Los hápticos son también una idea muy buena. Así que, creo que una de las cosas que encontramos es que los hápticos añaden, como, sabes, tipo de otra dimensión a, a cómo se siente una aplicación. Y obviamente, en eso mundo real, cuando estás girando ese spinner, obtienes esos clics y puedes sentirlo. Y eso es una gran parte del proceso. Y de la misma manera, como, como podríamos calcular el segmento en el que, tipo de, aterriza el spinner, también podríamos calcular cada vez que ese spinner pasa por un segmento, podríamos disparar un poco de retroalimentación háptica, por ejemplo, y eso, ya sabes, eso sería una extensión realmente agradable también. Pero sí, si no tenemos ninguna otra pregunta o algo así, siento que una cosa que no hemos hecho es añadir, añadir ninguna información de contacto para nosotros, porque creo que sería genial, sí, escuchar cualquier pensamiento sobre cómo, cómo le fue a todos o, sí, cualquier otra idea sobre lo que podríamos estar construyendo o, sí, simplemente, como, detalles agradables para tener. Sí. Alan, ¿algún otro detalle final? No, creo que has cubierto todo perfectamente bien. Genial. Dulce. Bueno, sí, gracias a todos. Creo que tenemos alrededor de una hora, así que sí, gracias mucho a todos los que se presentaron. Espero que haya sido, como, supongo, interesante o agradable y fácil de seguir, especialmente si nunca has trabajado con React Native antes. Y sí, como, espero escuchar de todos ustedes en el futuro. Eso sería genial. Bien. Adiós.