With animations. Is there a way to combine `update...

# compose

[Stylianos Gakis]

With animations. Is there a way to combine updateTransition with keyframes or something similar to have more control over one value? To exmplain:
I want an animation that will fluidly animate rotation simply done with transition.animateFloat.
But I want the color to be White from 0-50% of the animation and then immediately change to Red at 50% and stay like that for 50-100% of the animation. Any ideas?

[Stylianos Gakis]

I solved it myself with what I would probably consider a hack

val color: Color by transition.animateColor(
    transitionSpec = {
        tween(
            durationMillis = flippingAnimationDuration,
            easing = { fraction ->
                when {
                    fraction < 0.5 -> 0f
                    else -> 1f
                }
            }
        )
    }
) { state ->
    when (state) {
        true -> OnColor
        false -> OffColor
    }
}

I provided my own easing that changes the value completely at 50% of the progress.
Same thing could be achieved by doing

transitionSpec = { snap(delayMillis = flippingAnimationDuration / 2) }

But I am also not super happy with that either. Is there some sort of API that I am missing?

[Doris Liu]

If I understand you correctly, you would like rotation to be animated using spring for fluidity. Color observes that progress and sets the its value based on what the progress is. I don't think we have support for that yet, although I've been thinking about a concept of companion animation inspired by another discussion on this channel.🙂 It's the sort of animation where one property truly animates, the other ones are driven by its progress frame by frame. This concept probably would only work for two-state animations. Since once a 3rd state is introduced, there's no meaningful way to describe progress (that I can come up with) when you go from A->B and interrupted by a request to go to C.

Out of curiosity, how many states are involved in your use case?

[Stylianos Gakis]

Specifically, my use case was for flipping a square on it's X axis 180 degrees, and having one side look X color while the other side looks Y color.
I found someone else who has done this exact thing here https://twitter.com/heyrikin/status/1368045626315976710?s=20 however I wanted one difference. The Color should change in an instant when the box is flipped 90 degrees, so that it seems like the back side was always colored that way.
In the end, I did achieve it by not having a spring animation on the rotation, but a linear one, so that I could know for sure that the rotation is halfway on the half-time of the animation, and change the color at that specific time.
As I said, the way I did it feels like a hack, I am not sure how I would like to do it better, but there doesn't seem to be a simple way to do it. Maybe my use-case is too weird anyway, not sure.

[Doris Liu]

That's a totally valid use case. Using tween to coordinate them would make total sense. Another option is to not animate color, but rather calculate color based on rotation. Have you tried something like this in a `DrawScope`:

val color = if (rotation /* rotation from animation */ < 90) OnColor else OffColor

[Stylianos Gakis]

Wow how did I not just think of that? That makes so much sense now that you said it to me, I am not sure how I didn't come up with it myself 😅
In my efforts to think in a "compose animations" way, I overdid it. With time I am sure it will come more effortlessly to my head. Thank you so much! 🙂