How to make Jetpack Compose Image animating infinite - animation

Question

I have an animated-vector drawable.
I want this animated vector to be animated in loop while this image is showing.
Cannot find a good solution for this.
val image = animatedVectorResource(R.drawable.no_devices_animated)
var atEnd by remember { mutableStateOf(false) }
Image(
painter = image.painterFor(atEnd),
"image",
Modifier.width(150.dp).clickable {
atEnd = !atEnd
},
contentScale = ContentScale.Fit)
When I tap on the image it is animating but then stops. This is kind of an infinite progress.

Answer 1

Leaving my solution here (using compose 1.2.0-alpha07).
Add the dependencies in your build.gradle
dependencies {
implementation "androidx.compose.animation:animation:$compose_version"
implementation "androidx.compose.animation:animation-graphics:$compose_version"
}
And do the following:
#ExperimentalAnimationGraphicsApi
#Composable
fun AnimatedVectorDrawableAnim() {
val image = AnimatedImageVector.animatedVectorResource(R.drawable.avd_anim)
var atEnd by remember { mutableStateOf(false) }
// This state is necessary to control start/stop animation
var isRunning by remember { mutableStateOf(true) }
// The coroutine scope is necessary to launch the coroutine
// in response to the click event
val scope = rememberCoroutineScope()
// This function is called when the component is first launched
// and lately when the button is pressed
suspend fun runAnimation() {
while (isRunning) {
delay(1000) // set here your delay between animations
atEnd = !atEnd
}
}
// This is necessary just if you want to run the animation when the
// component is displayed. Otherwise, you can remove it.
LaunchedEffect(image) {
runAnimation()
}
Image(
painter = rememberAnimatedVectorPainter(image, atEnd),
null,
Modifier
.size(150.dp)
.clickable {
isRunning = !isRunning // start/stop animation
if (isRunning) // run the animation if isRunning is true.
scope.launch {
runAnimation()
}
},
contentScale = ContentScale.Fit,
colorFilter = ColorFilter.tint(Color.Red)
)
}
Case you need to repeat the animation from the start, the only way I find was create two vector drawables like ic_start and ic_end using the information declared in the animated vector drawable and do the following:
// this is the vector resource of the start point of the animation
val painter = rememberVectorPainter(
image = ImageVector.vectorResource(R.drawable.ic_start)
)
val animatedPainter = rememberAnimatedVectorPainter(
animatedImageVector = AnimatedImageVector.animatedVectorResource(R.drawable.avd_anim),
atEnd = !atEnd
)
Image(
painter = if (atEnd) painter else animatedPainter,
...
)
So, when the animated vector is at the end position, the static image is drawn. After the delay, the animation is played again. If you need a continuous repetition, set the delay as the same duration of the animation.
Here's the result:

Answer 2

Infinite loop without static images solution:
Best working with animated vector drawable that is a loop.
First add the dependencies in your build.gradle
dependencies {
implementation "androidx.compose.animation:animation:$compose_version"
implementation "androidx.compose.animation:animation-graphics:$compose_version"
}
Animated loop loader
#OptIn(ExperimentalAnimationGraphicsApi::class)
#Composable
fun Loader() {
val image = AnimatedImageVector.animatedVectorResource(id = R.drawable.loader_cycle)
var atEnd by remember {
mutableStateOf(false)
}
val painterFirst = rememberAnimatedVectorPainter(animatedImageVector = image, atEnd = atEnd)
val painterSecond = rememberAnimatedVectorPainter(animatedImageVector = image, atEnd = !atEnd)
val isRunning by remember { mutableStateOf(true) }
suspend fun runAnimation() {
while (isRunning) {
atEnd = !atEnd
delay(image.totalDuration.toLong())
}
}
LaunchedEffect(image) {
runAnimation()
}
Image(
painter = if (atEnd) painterFirst else painterSecond,
contentDescription = null,
)
}
Right now I don't see any option to restart painter to start all over again - you need to rewind it. So in this solution we create two of those painter. One of them is starting with !atEnd. Each time atEnd is changed both of them do their work but we display only one animating from start to end. The other one is silently rewinding the animation.

Answer 3

According to https://developer.android.com/jetpack/compose/resources#animated-vector-drawables
val image = AnimatedImageVector.animatedVectorResource(R.drawable.animated_vector)
val atEnd by remember { mutableStateOf(false) }
Icon(
painter = rememberAnimatedVectorPainter(image, atEnd),
contentDescription = null
)
To make the animation loop infinitely:
val image = AnimatedImageVector.animatedVectorResource(id = vectorResId)
var atEnd by remember { mutableStateOf(false) }
Image(
painter = rememberAnimatedVectorPainter(animatedImageVector = image, atEnd = atEnd),
contentDescription = null,
)
LaunchedEffect(Unit) {
while (true) {
delay(animDuration)
atEnd = !atEnd
}
}

Answer 4

I tried to implement a loading spinner using this approach, but encountered some issues.
I had an issue with the proposed solution, where the animation reverses back to the beginning. To prevent this, as #nglauber suggested, I tried switching to a static vector when the animation ends. Unfortunately, that wasn't smooth as the animation would have to wait for the delay before restarting.
This was the workaround that I used.
#OptIn(ExperimentalAnimationGraphicsApi::class)
#Composable
fun rememberAnimatedVectorPainterCompat(image: AnimatedImageVector, atEnd: Boolean): Painter {
val animatedPainter = rememberAnimatedVectorPainter(image, atEnd)
val animatedPainter2 = rememberAnimatedVectorPainter(image, !atEnd)
return if (atEnd) {
animatedPainter
} else {
animatedPainter2
}
}