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 ) }
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 dePainter
para realizar la animación, creada a partir del estadoAnimatedImageVector
yboolean
por la funciónrememberAnimatedVectorPainter()
. - Cuando
atEnd
estrue
, la instancia dePainter
deja de animarse.
Resultados
![Reloj de arena que anima su contenido y rota](https://developer.android.google.cn/static/develop/ui/compose/images/animations/avd_example_compose.gif?hl=es-419)
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:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=es-419)