Images vectorielles animées dans Compose

Il existe plusieurs façons d'animer des vecteurs dans Compose. Vous pouvez utiliser l'une des options suivantes :

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

Drawables vectoriels animés

Sablier animant son contenu et tournant
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 effectuant 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.

  • Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
  • Chargement d'images