Images vectorielles animées dans Compose

Il existe différentes manières d'animer des vecteurs dans Compose. Vous pouvez utiliser l'une des méthodes suivantes:

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

Drawables vectoriels animés (expérimental)

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