How to properly chain animate*AsState? Animations ...

# compose

[Filip Wiesner]

How to properly chain animate*AsState? Animations down the "chain" don't get triggered as easily.

I have the following code:

val ballSpacing = remember { Offset(0f, 48f * density) }
var ball1 by remember { mutableStateOf(Offset.Zero) }
val ball2 by animateOffsetAsState(ball1 + ballSpacing)
val ball3 by animateOffsetAsState(ball2 + ballSpacing)

I move ball1 with gestures and I want the other balls to follow. I must move the ball really slowly to trigger the animations but when it starts working it's smooth so long as I don't stop moving them (GIF in thread)

[Filip Wiesner]

Don't mind the stuttering, it's smooth on my device

[Filip Wiesner]

I suspect it's something about fast state changing not triggering recomposition but then I don't understand why it's working if I start slowly

[Doris Liu]

I suspect there's some frame drop, unclear what's causing it. Here's the sequence of events I expect from no animation to animating:
• frame n: ball 2 changes its value for the first time in an animation loop. ball 3 perceives target change in the same frame
• frame n + 1: ball 3's first animation frame, playtime = 0, no value change.
• frame n + 2: ball 3's second animation frame, playtime = ~16ms, some value change from animation.
Ball 3 is 2 frames behind ball 2 when going from completely static to moving. If it is already animating, the animation interruption handling will assume current frame as the first frame for the new animation since it's already on an animation loop. Consequently, it'll start changing value towards the new target in the next frame, instead of 2 frames behind as in the static case. That's why you perceive improved smoothness once you start moving.

On the other hand, I don't expect 2 frames behind initially to be that noticeable. Could you post a video so I can take a closer look?

[Filip Wiesner]

Thanks for the reply (was almost about to ping you 😅 ).
And sorry if I wasn't clear enough but like I said "_Don't mind the stuttering, it's smooth on my device_".

The problem is not performance but it's that the second and most of all the third ball is not animating at all if I start dragging the first ball fast. You see it at the start of the GIF. I move the ball rapidly than only when the drag ends the second ball moves. Than only when the second ball stops animating the third starts.
On the other hand when I start reeeally slowly from the start, all balls at once are animating while dragging and keep animating until the movements slows down or I stop moving the first ball (at the end of the GIF).

So it's not about smoothnes buy about second and third ball moving at all. I can post a video tomorrow if you still need it. Thanks for your time ☺️

[Doris Liu]

I'm curious how long is the delay before the ball starts moving, which is why a video would be helpful to show. From your description it definitely doesn't sound like it's just 2-frames behind, which suggests some frame skipping. If there's some form of performance issues, we'd love to investigate. 🙂

[Filip Wiesner]

It's not performance problem. The third ball will never start animating if I keep moving the first one.
But I will post video tomorrow if it helps. Thank you

[Filip Wiesner]

Here is the video. First two moves are fast and the balls animate one by one. After that I try to move them all at once and manage to do it in the end of the video.
My goal is so they are animating like in last few seconds of the video all the time.
@Doris Liu

PS: Sorry if I was just being dumb yesterday and it really is some kind of performance problem (although it does not seem like it to me). I just thought I wasn't explaining my problem clearly enough 😅

screen-20210310-113727~2.mp4

[Doris Liu]

No problem at all. This is a good case for us to investigate performance. 🙂 Thanks for reporting! 🙏
I was also excited to see a spring chain - it reminded me of the time when I was building the DynamicAnimation lib on androidx. 😄

[Filip Wiesner]

That's exactly what I tried to mimic! I had such a blast using DynamicAnimations when I was in college. I was using it to create a timetable where each day was a string of balls and each ball was one event/class.

So if I understand correctly this is not the desired behavior? I thought I was just using it wrong.

[Doris Liu]

So great to hear that! 😄

No this isn't the desired behavior, it should just work. I'll need to investigate it further to know for sure what is causing the visual jank.

[Filip Wiesner]

So should I create an issue with minimal repro? Or is there an existing issue I could follow?

[Doris Liu]

Yes please do. I was going to create an issue, but if you do it you could also follow the updates. 🙂

[Filip Wiesner]

Awesome, thanks! And good luck investigating 🙂
I will post a link here once I create it.

[Filip Wiesner]

https://issuetracker.google.com/issues/182388979

[Doris Liu]

Thanks! 🙂