How to use Animated vector drawable in Compose

Viewed 1779

I created my vector drawable animation and I want to use in in Compose. I found in official documentation that I need to call animatedVectorResource. But whole AnimatedImageVector has been removed from compose till next versions. How to launch animated drawable in current compose version?

2 Answers

You need to update compose to 1.1.0-alpha01 and add the module androidx.compose.animation:animation-graphics as indicated in the last changelog

enter image description here

implementation("androidx.compose.animation:animation-graphics:1.1.0-alpha01")
val image = animatedVectorResource(id = R.drawable.animated_vector)
val atEnd by remember { mutableStateOf(false) }
Icon(
   painter = image.painterFor(atEnd = atEnd),
   contentDescription = null
)

AnimatedImageVector was temporarily removed in 1.0.0-rc01 and it is not present in the final stable 1.0.0.

Starting from 1.1.0-alpha01 AnimatedImageVector and the related APIs are now in the new androidx.compose.animation:animation-graphics module.

You can use something like:

    val image = animatedVectorResource(drawableId)
    var atEnd by remember { mutableStateOf(false) }
    Image(
        painter = image.painterFor(atEnd),
        contentDescription = "Your content description",
        modifier = Modifier.size(64.dp).clickable {
            atEnd = !atEnd
        }
    )
Related