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

Las animaciones pueden ser desafiantes. Especialmente cuando tu diseñador te pide que implementes una animación como esta 😱Animación de Oleg FrolovEn primer lugar SIN PÁNICO! ¡En realidad no es tan complicado! Especialmente si usas Componer jet pack animaciones!Componer jet pack tiene un poderoso conjunto de API de animación que permite a los desarrolladores crear animaciones complejas y fluidas con un mínimo esfuerzo. También ofrece una amplia gama de parámetros personalizables que le permiten controlar la velocidad, la duración y el tipo de animación.

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. Cuéntenme en los comentarios cuál les gusta más!!

En esta serie de artículos, explico cómo:

• Comparte esta enorme animación en animaciones más pequeñas
• Escribir cualquier animación por separado
• Combinar todas las animaciones paralelas en una transición agradable, suave y suave.
• volver a escribir estas animaciones paralelas usan solo una animacion individual (¡¡Esto será un giro al final!!)

Profundicemos e intentemos coescribir estas animaciones Componer jet pack! Y no olvides Aplaudir 👏👏 al final si te gustó este artículo! 10 horas de programación pueden ahorrar 10 minutos de planificación. O al revés. Si observamos más de cerca esta animación, es posible que veamos algunos patrones. En primer lugar, esta animación tiene dos fases diferentes :fase 1 : La manecilla del reloj “dispara” los puntos.Durante esta fase hay puntos propagación paralela e ir en diferentes direcciones. ellos no cambiar su camino después de que les dispararon. Mientras tanto, la manecilla del reloj se acorta cada vez más por el tamaño del punto hasta que desaparece por completo 😱 Fase 2: La manecilla del reloj recoge estos puntos de vueltaDurante la 2ª fase son puntos mover uno tras otro y en la misma línea que la manecilla del reloj. La mano continúa girando con ellos y será más largo y más hasta que alcance su longitud original. Luego la animación se repite. Abordaremos esta animación paso a paso e implementaremos estas animaciones una por una. Círculo completo, así:

• longitud de la manecilla del reloj 12 puntos
• es el ancho de la manecilla del reloj 1 punto
• el tamaño de la pantalla es 24 puntos tanto ancho como alto

Sobre la base de estos cálculos, podemos calcular más tarde todos los tamaños requeridos. Ok, vamos a sumergirnos en las animaciones. Primero tenemos que crear uno animación de rotación infinita. Como tenemos dos círculos, tenemos una animación de 0f a 720f. Ahora necesitamos dibujar una manecilla de reloj y rotarla con esta animación. Y así es como se ve nuestra animación hasta ahora:Animación después del paso 1

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

Bien, ahora agreguemos algunos detalles. Ya hemos dicho que la manecilla del reloj se acorta durante el 1ra fase y se estira hacia atrás durante el 2.Lo que debemos hacer ahora es acortar la longitud la coordenada endOffset por longitud de punto cada hora, que es exactamente 30 grados de rotación. Entonces deberíamos Expandelo a la longitud original. Primero necesitamos crear un campo de hora actual. Usaremos el estado derivado de clockAnimation para actualizar ese estado cuando cambie. calculado a mano, y luego utilícelo como endOffset dentro de drawBehind del espaciador. Y así es como se ve nuestra animación después del paso 2Animación después del paso 2

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

¡Se ve genial 👍! Pero no vemos puntos… ¡Vamos a agregarlos! Tenemos 12 puntos en la pantalla, colocado en un círculo de 360 Grado. Lo hace 30 grados por punto Primero necesitamos crear una matriz de 12 puntosfuera de 0 a 11. val horas: Lista = Recordar { List(12) { it } }Durante las primeras 12 horas cada hora (cada 30 grados) Colocamos un nuevo punto en la pantalla. En las últimas 12 horas hemos tomar cada punto atrás. Los puntos solo aparecen en la pantalla antes de la hora actual si ese es el caso menos de 12 horasY inmediatamente despues El hora actual en caso afirmativo más de 12h.Suena complicado, pero se puede describir con este sencillo código. Al usar la función de memoria, podemos volver a calcular esta matriz solo cuando cambia la hora actual. Entonces tenemos que colocar todos estos puntos 30 grados en la pantalla. Para hacer esto, rotamos cada punto 30*horas. Si el punto no es visible, simplemente no se dibujará. Y así es como se ve nuestra animación después del paso 3. Genial 😎, ¿eh? 🔥Animación después del paso 3

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

Y eso es todo por la parte 1 🔥🔥🔥Sí, sé que todavía nos faltan algunas partes importantes de esta animación, pero confía en mí, seguiremos adelante. Parte 2 nuestro «Increíble animación de reloj con Jetpack Compose«Tutorial. En esta parte lo hicimos:

• crea uno animación de rotación sin fin usando las API infiniteTransition y animateFloat
• Aprende a dibujar la manecilla de un reloj y gírala con esta animación sin fin
• Use derivadaStateOf para calcular las posiciones de los puntos de manera eficiente. dibujar y actualizar si es necesario

¡Estén atentos para la parte 2!

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

Si te gustó este artículo, me alegraría mucho que lo aplaudas 👏👏👏. Me motiva a escribir más artículos como este y me hace un poco más feliz 🙂