0

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.

SURYA S R
  • 320
  • 8
  • If you need it only to animate on composition, you should use Unit, true, false or anything that won't change as key of LaunchedEffect – Thracian Jan 17 '23 at 13:19
  • Yes I have tried using **Unit** too. But it behaves incorrectly... – SURYA S R Jan 17 '23 at 13:28
  • Everytime the Item is recycled, the animation gets triggered. – SURYA S R Jan 17 '23 at 13:28
  • 1
    So it works as intended. You either need to store your key with rememberSavable or inside a ViewModel because LazyList composes items in viewport and one item that about to enter viewport which is visible area – Thracian Jan 17 '23 at 13:30
  • You can use this answer as reference https://stackoverflow.com/a/74793900/5457853 – Thracian Jan 17 '23 at 13:31
  • Yes, understood the issue. Thanks. Used a Boolean flag with **rememberSaveable** and controlled the value of **percentageAnimate**. – SURYA S R Jan 17 '23 at 14:52

1 Answers1

0

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

Nikola Despotoski
  • 49,966
  • 15
  • 119
  • 148