Stylianos Gakis
03/09/2021, 3:10 PMupdateTransition
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?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
03/09/2021, 7:12 PMspring
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
03/09/2021, 8:37 PMDoris Liu
03/09/2021, 8:43 PMtween
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
03/10/2021, 4:47 PM