Hi Guys, I have problems with animation, some time...
# compose
m
Hi Guys, I have problems with animation, some time ago I created kind of pager with custom transition, 2 cards are switched using changing alpha of backgrounds and content (quite complex) slide in/out (using absoluteOffset modificator), I created it using AnimatableFloat and everything was great 🙂 after upgrade from alpha11 to 12 some performance issues appeared, now on beta01 it is terrible and not working at all. I migrate it to Animatable and if I use card with image on backgrount and only single Text it works correctly, in case of complex card layout it freeze whole app. Does anyone have an idea why this happened and how to solve it?
s
Maybe provide some code to show what you are doing? This reminds me of this blogpost I read recently https://juliensalvi.medium.com/parallax-effect-made-it-simple-with-jetpack-compose-d19bde5688fc which had a similar problem with performance issues. It was recomposing way too often and it was simply fixed by not recomposing the entire view but applying some changes to the graphicsLayer modifier. Maybe it's similar to what you are experiencing? Also I guess you could use animateFloatAsState, have you looked into that? Really hard to tell with the little context we have here I think.
d
If you are reading
Animatable
values for changing the position of the UI, it's the best to read it from a graphicsLayer, e.g.
Modifier.graphicsLayer {translationX = animatable.value}
because the invalidation would then be scoped to the draw stage (i.e. no recomposition or relayout would be needed). If you need to use
absoluteOffset
, consider the variant that takes a lambda. When you read the
Animatable
value from that lambda, only layout and draw stages will be involved, i.e. no recomposition. Either one would be more performant than recomposing every frame through
Modifier.absoluteOffset(x=animatable.value)
🙂