Hey everyone! I'm working on an animation issue in my app and could use some help. Here's the probl...

# compose

[Abdullah Musa]

Hey everyone!

I'm working on an animation issue in my app and could use some help. Here's the problem I'm facing:

I have a property inside my ViewModel that regularly updates with values like +500, -100, etc. What I want to do is animate this property value when it changes (so instead of jumping directly to 500, it animates smoothly).

More in 🧵

[Abdullah Musa]

My current "solution" looks like this, but it causes too many recompositions:

// ViewModel
var elevation by mutableIntStateOf(0)
    private set
 
// Composable
val elevation by animateIntAsState(
    targetValue = viewModel.elevation,
    animationSpec = tween(durationMillis = 500, easing = FastOutSlowInEasing),
    label = "elevationAnimation",
)

[Abdullah Musa]

Also, this animated value needs to be used in a few places:
1. Displayed as text – This part is already handled using a Canvas without causing unnecessary recompositions.
2. Displaying images based on value ranges – I still haven't found an optimal solution for this.
My current solution for 2. is:

backgroundImages.forEach {
    if (elevation in it.renderRange) {
        Image(...)
    }
}

[onatyr]

Hi same problem here, just answering for notifications in case someone has a solution. Good luck to us

[Zach Klippenstein (he/him) [MOD]]

You could use derivedStateOf to calculate which range you’re in and then only read the derived state in composition

[Abdullah Musa]

That could work for the ranges without animation. However frequent recomposition occurs if I'm animating like this:
>

val elevation by animateIntAsState(targetValue = viewModel.elevation, ...)