Imágenes vectoriales animadas en Compose

La animación de vectores en Compose es posible de varias maneras. Puedes usar cualquiera de las siguientes opciones:

• Formato de archivo AnimatedVectorDrawable
• ImageVector con las APIs de Animation de Compose, como en este artículo de Medium
• Una solución de terceros, como Lottie

Elementos de diseño vectoriales animados (experimental)

Para usar un recurso AnimatedVectorDrawable, carga el archivo de elemento de diseño con animatedVectorResource y pasa un boolean para cambiar entre el estado inicial y final de tu elemento de diseño mientras se realiza la animación.

@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

Para obtener más información sobre el formato de tu archivo de elementos de diseño, consulta Cómo animar gráficos de elementos de diseño.

Recomendaciones para ti

• Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
• Cómo cargar imágenes {:#loading-images}