Animatable.animateTo triggered every time in Canvas Compose

Question

I have used Animatable.animateTo for animating like below,

val percentageAnimate = remember { Animatable(0.001f) }
LaunchedEffect(Unit) {
    percentageAnimate.animateTo(percentage)
}

with percentageAnimate.value I will be drawing my PieChart in the Canvas Composable.

I need the animation only during the first composition.

When I used the above said item in the LazyVerticalGrid, the animation gets triggered everytime when the list item got recycled and added.

Answer 1

This is because you have set percentageAnimate as key, the key is changed (and its internal state) when you call .animateTo() and that leads to relaunching the coroutine in LaunchEffect. If you want to start the animation only once you need to have constant key.

val percentageAnimate = remember { mutableStateOf(Animatable(0.001f)) }
LaunchedEffect(Unit) {
    percentageAnimate.value.animateTo(percentage)
}

Then use it in the draw phase percentageAnimate.value