Images vectorielles animées dans Compose

Il est possible d'animer des vecteurs dans Compose de différentes manières. Vous pouvez utiliser l'une des options suivantes:

  • Format de fichier AnimatedVectorDrawable
  • ImageVector avec les API d'animation Compose, comme dans cet article de Medium.
  • Une solution tierce telle que Lottie

Drawables vectoriels animés (expérimental)

Sablier animant son contenu et pivotant
Figure 1. Drawable vectoriel animé dans Compose

Pour utiliser une ressource AnimatedVectorDrawable, chargez le fichier drawable à l'aide de animatedVectorResource et transmettez un boolean pour basculer entre les états de début et de fin de votre drawable, en exécutant l'animation.

@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
    )
}

Pour en savoir plus sur le format de votre fichier drawable, consultez Animer des images Drawable.