Hello! Is there a way to animate a looping `Float` value, like an angle? I'm using `animateFloatAsSt...

# compose

[louiscad]

Hello!
Is there a way to animate a looping Float value, like an angle?
I'm using animateFloatAsState, but it produces a loop back glitch every time the angle goes from 359.xx degrees back down to 0°.

[romainguy]

What's the glitch?

[louiscad]

It animates backwards when the target value goes back to zero. I'd like to tell it that 0 is like 360, and to always animate forward.

[romainguy]

How do you define the animation? if (trigger) 360f else 0f or something like that?

[louiscad]

Like this:

val offsetAngle by remember {
    derivedStateOf { if (isAmbient) 0f else 6 * time.secondsWithMillis }
}
val animatedOffsetAngle by animateFloatAsState(
    targetValue = offsetAngle,
    label = "bg offset angle"
)

[romainguy]

Right, so it's doing exactly what you are telling it to. You probably want an Animatable or Animation to force an always forward animation (alternatively you could always set you offsetAngle to offsetAngle + 360 but that has other issues)

[louiscad]

What are those "other issues"?

[romainguy]

If you do it many (many many many) times you'll run out of float precision to encode even 1 degree of angle.

[louiscad]

Oh, I see, yeah, I tought about that and chose to not have unexpected overflow or maybe straight up malfunctioning if it reaches Float.PositiveInfinity

[romainguy]

Yeah you will have issues before reaching infinity

[romainguy]

But it'll take ~23,300 animations (assuming you add 360 every time) to have real issues :)