Issue with jetpack compose animation performance-CodePudding

I am using animateDpAsState animation, but there is an issue with performance. The animation is very laggy, lot of frames are dropped. When I build application with release mode, animation is running more smoothly, but it is not as good as it needs to be. Strange thing is that when I play animation several times (for example 15 times), animation is then very smooth and everything is ok.

What could be a problem?

My code:

           val contextMenuAnimation = animateDpAsState(
                targetValue =
                if (contextMenuOpened.value) -contextMenuWidth
                else 0.dp,
                animationSpec = tween()
            )

. . .

            Box(
                modifier = Modifier
                    .offset(x = maxWidth   contextMenuAnimation.value)
                    .size(contextMenuWidth, height = maxHeight)
            ) {
                SidePanel()
            }

CodePudding user response：

One improvement you can have over your current setup is using Modifier.offset{IntOffset} over Modifier.offset(). Jetpack Compose has three phases Composition, Layout and Draw if you use Modifiers with lambda you can skip or defer reads as you can see in official document. Using Modifiers with lambdas are advised with animations.

https://stackoverflow.com/a/73274631/5457853

You can also check out scoped or smart recomposition to limit recomposition amount to Composable scopes.

Jetpack Compose Smart Recomposition

And you still in need to improve performance that you think might happen due to recompositions you can check out these articles about stability/immutability

https://chris.banes.dev/posts/composable-metrics/

https://medium.com/androiddevelopers/jetpack-compose-stability-explained-79c10db270c8