With animations Is there a way to combine `updateTransition`

Question

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 · Answer

I solved it myself with what I would probably consider a hack ```val color Color by transition animateColor transitionSpec = tween durationMillis = flippingAnimationDuration easing = fraction gt when fraction lt 0 5 gt 0f else gt 1f state gt when state true gt OnColor false gt 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 · Answer

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 slightly smiling face 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 gt B and interrupted by a request to go to C Out of curiosity how many states are involved in your use case

Stylianos Gakis · Answer

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 · Answer

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 lt 90 OnColor else OffColor```

Stylianos Gakis · Answer

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 sweat smile 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 slightly smiling face