Images vectorielles animées dans Compose

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

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

Drawables vectoriels animés (expérimental)

Sablier qui anime son contenu et tourne
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.