Cómo mostrar una imagen animada

Puedes crear una experiencia del usuario más interactiva y atractiva en tu app si cargas un archivo de elementos de diseño para mostrar imágenes animadas. Las imágenes animadas son útiles para crear indicadores de carga, indicadores de éxito o error, facilitar el desarrollo de juegos y otras funciones de la IU.

Compatibilidad de versiones

Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.

Dependencias

Cómo mostrar una imagen animada

En el siguiente código, se muestra un vector animado que alterna automáticamente entre dos estados:

@Composable
fun AnimatedVectorDrawable() {
    val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
    var atEnd by remember { mutableStateOf(false) }
    Image(
        painter = rememberAnimatedVectorPainter(image, atEnd),
        contentDescription = "Timer",
        modifier = Modifier.clickable {
            atEnd = !atEnd
        },
        contentScale = ContentScale.Crop
    )
}
AnimationSnippets.kt

Puntos clave sobre el código

  • Carga un recurso vectorial y anima los atributos de dibujo con el tiempo.
  • Una instancia de Image que usa una instancia de Painter para realizar la animación, creada a partir del estado AnimatedImageVector y boolean por la función rememberAnimatedVectorPainter().
  • Cuando atEnd es true, la instancia de Painter deja de animarse.

Resultados

Reloj de arena que anima su contenido y rota
Figura 1: Elemento de diseño vectorial animado en Compose.

Colecciones que contienen esta guía

Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:

Descubre técnicas para usar imágenes atractivas y brillantes que le den a tu app para Android un aspecto atractivo.
Colección de guías rápidas

Tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.
Ir a las Preguntas frecuentes Enviar comentarios