Animación de íconos de saltos y pulsaciones en Jetpack compose | de Raheem Hameed | enero 2023

Cree animaciones simples de rebote y pulsación

Foto de Samuel-Elias Nadler en Unsplash

Inspiración…

Como dije en un artículo anterior, obtendré ideas de animación de CódigoPeny encontré que esta animación de íconos es el ejemplo perfecto para principiantes para comenzar.

Supervisión…

Después de todas las configuraciones básicas en Android Studio, revisé el panel de animación Componer jet pack en el Documentación de Android. si los miras fuente de inspiración Arriba notarás algunas cosas

1. Hay tres Iconos animados.
2. Uno de Iconos animados rebotar Verticalel segundo salto Horizontal durante el último pulsación
3. La animación nunca termina (es decir, se ejecuta indefinidamente)

Afortunadamente, hay una API en la documentación de Android que permite la creación de Animaciones en bucle, a menos que se eliminen. Ahora vamos a ensuciarnos las manos

El código…

Icono de salto verticalLos códigos se dividen en secciones y cada sección se explica a continuación… val infiniteTransition = RememberInfiniteTransition()@Composableprivate fun VerticalBouncingAnimation(infiniteTransition: InfiniteTransition) { //1// Color inicial y final para iconval startColor = Color.Greenval endColor = Color .Black //2valor de color animado de infiniteTransition.animateColor(initialValue = startColor,targetValue = endColor,animationSpec = infiniteRepeatable(tween(800, easing = FastOutLinearInEasing),RepeatMode.Reverse,))//3valor de posición por infiniteTransition.animateFloat(initialValue = -50f, targetValue = 50f,animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse))//4Icon(Icons.Default.Favorite,tint=animationColor,contentDescription=»Heart Icon»,_modifier=Modifier.size(50. dp).desplazamiento (y = posición.dp))

1. En la primera sección, definimos el color que usaremos para el ícono Tint
2. Aquí vamos a animar los colores del ícono, aunque eso no es lo que queremos lograr, es solo un paso adicional y animaremos el color del ícono usando Método de extensión (animateColor) proporcionado por el Transición infinita Clase, animarcolor El método toma tres parámetros.

• Valor original = estado inicial que debe tener el color del icono (es decir color de inicio)
• valor objetivo = estado objetivo para nuestro objeto (el Color Queremos el icono animar)
• especificación de animación = Aquí proporcionamos nuestro tipo de animación y modo de repetición con el infinitamente repetible Método.

3. En esta tercera sección, animamos la posición del ícono usando el método de extensión (animatefloat) y también toma tres parámetros como animarcolor y el efecto de rebote se logra con el método de animación de interpolación, y puede optimizar el efecto de animación ajustando los valores4. La última parte es la símbolo esto es animado; Este es solo un ícono regular con el efecto de animación aplicado. (El color animado se aplica a la matiz Parámetro, mientras que el efecto de rebote se aplica a la Desplazamiento del modificador de símbolo método en el eje Y) y eso es todo para la animación vertical.

Símbolo de salto horizontal…

@Composableprivate fun HorizontalBouncingIcon(infiniteTransition: InfiniteTransition) { //1val startColor = Color.Greenval endColor = Color.Black //2val animationcolor of infiniteTransition.animateColor(initialValue = startColor,targetValue = endColor,animationSpec = infiniteRepeatable(tween(800, easing = FastOutLinearInEasing),RepeatMode.Reverse,))//posición 3val por infiniteTransition.animateFloat(initialValue = -60f,targetValue = 60f,animationSpec = infiniteRepeatable(animation = tween(800,easing = FastOutLinearInEasing),repeatMode = RepeatMode.Reverse))/ /4Icon(imageVector = Icons.Default.Favorite,contentDescription = «Hear icon»,tint =animatedcolor,modifier = Modifier.size(50.dp).offset(x = position.dp))} Esto es como la animación anterior , solo un pequeño cambio en los valores que no afecta mucho el resultado, pero la única sección que tiene cambios dignos de mención es la cuarta sección.

1. Sobre el desplazamiento del modificador de símbolo, en lugar de aplicar el efecto de animación a la eje Y lo aplicamos a la eje x y eso debería ser suficiente

Icono pulsante…

@Composableprivate fun PulsatingHeartIcon(infiniteTransition: InfiniteTransition) {//1val pulsate by infiniteTransition.animateFloat(initialValue = 10f,targetValue = 60f,animationSpec = infiniteRepeatable(tween(1200), RepeatMode.Reverse))//2Icon(imageVector = Icons.Default .Favorite,contentDescription = «»,modifier = Modifier.size(pulsate.dp).offset(x = 10.dp, y = 10.dp))}

1. La primera sección es igual a la otra; lo ingresamos Valor original, valor objetivo y el especificación de animación
2. En esta sección, notará que no agregamos el efecto de animación. desplazada esta vez, pero lo agregamos al ícono Tamaño proporcionado por el modificador de símbolo y dio el eje x e y sobre el Compensación del modificador El valor de 10.DP.

Diploma…

Dado que recién estoy comenzando a mirar fijamente con animaciones, este enfoque puede no ser el mejor enfoque y hay mucho margen de mejora. A medida que mejore, regresaré y actualizaré estos ejemplos de código.