Amazing Clock ⏰ Animación con Jetpack Compose (Parte 2) | de Mikhail Kulaha | febrero 2023

En esta serie de artículos tratamos de recrear esta increíble animación de reloj.Animación de Oleg FrolovEsta es la segunda parte de nuestra serie de animación. la parte 1 es Aquí

TLDR:– Se pudo encontrar el código fuente de la versión final de esta animación. Aquí.– Habrá dos enfoques diferentes para recrear la misma animación, una con hilos paralelos y otro usando un poco un poco de matemáticas.– Ambos se ven bien. Déjame saber en los comentarios cuál te gusta más!!

Hasta ahora, en la Parte 1 hemos logrado lo siguiente:

• crea uno rotar sin fin animación
• Dibuja una manecilla de reloj que se encoge Primero 12:00 pm y luego se estira hacia atrás durante los siguientes 12:00 pm
• Jalar 12 puntos que desaparecen y reaparecen cuando es necesario

En esta Parte 2 vamos a:

• crear puntos armar animación
• Crear 12 en paralelo desmontar animaciones.

En la Parte 1 ya establecimos que todos los puntos que recoge la manecilla del reloj siguen la misma línea y se recogen uno a uno. Una transición similar comienza cada hora con una pequeña diferencia — La distancia de un punto se hace cada vez más corta.Ensamblar animación sin rotación La distancia se puede calcular con esta función simple: private fun computeAssembleDistance(stepHeight: Float, currentHour: Int): Float =stepHeight * (23 – currentHour)Cuanto más pequeña es la hora actual, más grande es más extenso la distancia. Se reduce en stepHeight (que, como comentamos en la parte anterior, es 1/24 de la altura de la pantalla) cada hora. Ahora necesitamos crear una animación que nos devuelva valores 0f A 1f y en base a ese valor estamos en el borde de la pantalla o en la parte superior de la manecilla del reloj. Pero, ¿realmente necesitamos animación? Sabemos que esta transición depende de eso ángulo de rotación — durante un círculo de rotación completo tenemos que hacer 12 transiciones uno después del otro. Eso significa que tenemos que hacer cada uno cada 30 grados, y debemos hacerlo de manera constante; de ​​lo contrario, la transición no será fácil. Todos sabemos eso 30 grados comienza una nueva lección, así que tenemos que transformarla 0..30 grado a 0..1 y después de eso hemos terminado. Eso es lo que se nos ocurrió. Ahora tenemos que dibujar un punto de transicióny basado en el valor de animacióndibujarlo en el lugar correcto. Cómo se dibuja el punto junto con una manecilla de relojdebe colocarse debajo de la misma sección de rotación que la manecilla de un reloj.

El código completo para este paso se puede encontrar Aquí

Así se verá nuestra animaciónAnimación después del paso 5Nuestra animación es casi terminado! Lo único que queda es un animación paralela para disparar los puntos. Como discutimos en la Parte 1, los puntos son propagación paralela y entra direcciones diferentes. ellos también ralentizarlo a medida que se acercan a sus posiciones finales. Para lograrlo, utilizamos 12 animaciones paralelas con alivio y comienza cada animación cada nueva hora ( cada 30 grados). Para ello utilizamos Channels y Coroutines Flow. Nos permiten crear el número requerido de hilos paralelos.

enviando eventos

Se debe enviar un evento al canal cada hora y la hora actual se debe actualizar en consecuencia. Actualizamos currentHour y al mismo tiempo enviamos un valor a currentHourChannel. De esta manera nos aseguramos de que currentHour no se actualice antes.

recibir eventos

Las animaciones paralelas son manejadas por 12 Animables. Cada Animable mantiene un estado de 0f A 1f.val disassembleAnimations =remember { hours.map { Animatable(1f) } }Los eventos del canal se reciben a través de currentHourFlow. Se inicia una nueva animación para cada nuevo evento. asincrónico con longitud y aceleración razonables. Al cambiar AnimationEasing, podemos cambiar el aspecto de nuestra animación y ajustarla a nuestro gusto.

Dibujar una animación

En lugar de los 12 puntos estáticos que teníamos antes, vamos a dibujar puntos que pueden cambiar de posición. La posición se basa en la valor de animación y un hora específica. A medida que la manecilla de cada hora se acorta, la distancia de viaje debería disminuir en consecuencia. Ya tenemos todos los valores de animación en la matriz dissassembleAnimations y para cada punto de hora usaremos esos valores. Y así es como se ve nuestra animación ahora 🔥🔥🔥¡Última animación!

El código completo para este paso se puede encontrar Aquí

¡Eso es todo! Logramos recrear esta animación usando muchas herramientas que Componer jet pack Y kotlin como InfiniteTransition, animateFloat, Channel, Flow y otras API útiles.

🤔 Pero, ¿y si te digo que podemos escribir esta animación en una sola pasada sin crear un montón de hilos y animaciones? ¿Y un progreso que se puede controlar con un control deslizante? Como esto

Animación controlada por un control deslizante! eso lo haremos en parte 3 de la serie «Amazing Clock ⏰ animación con Jetpack Compose». ¡Manténganse al tanto!

Puedes ver el código fuente completo de esta animación en mi Grepositorio ithub.

Nuevamente, si te gustó este artículo, me alegraría mucho que lo aplaudieras 👏👏👏. Puedes hacerlo varias veces, hasta 15 según recuerdo. ¡Gran codificación!