Animated vector images in Compose

Animating vectors in Compose is possible in a few different ways. You can use any of the following:

• AnimatedVectorDrawable file format
• ImageVector with Compose animation APIs, like in this Medium article
• A third-party solution like Lottie

Animated vector drawables (experimental)

To use an AnimatedVectorDrawable resource, load up the drawable file using animatedVectorResource and pass in a boolean to switch between the start and end state of your drawable, performing the animation.

@Composable
funAnimatedVectorDrawable(){
valimage=AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
varatEndbyremember{mutableStateOf(false)}
Image(
painter=rememberAnimatedVectorPainter(image,atEnd),
contentDescription="Timer",
modifier=Modifier.clickable{
atEnd=!atEnd
},
contentScale=ContentScale.Crop
)
}
AnimationSnippets.kt 

For more information about the format of your drawable file, see Animate drawable graphics.

Recommended for you

• Note: link text is displayed when JavaScript is off
• Loading images