La animación de vectores en Compose es posible de varias maneras diferentes. 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 vectorial animados (experimental)
![Reloj de arena que anima su contenido y rota](https://developer.android.com/static/develop/ui/compose/images/animations/avd_example_compose.gif?authuser=8&hl=es)
Para usar un recurso AnimatedVectorDrawable
, carga el archivo de elemento de diseño usando animatedVectorResource
y pasa un boolean
para alternar entre el estado inicial y final de tu elemento de diseño y realizar 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 ) }
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}