is there an obvious way that I'm missing to animate a value on a transition to another value and the...

# compose

[Carl Benson]

is there an obvious way that I'm missing to animate a value on a transition to another value and then back to its initial state without using keyframes?

[Carl Benson]

what I'm basically looking for is something like

@Composable
fun Screen(value: Int) {
    val transition = updateTransition(targetState = value)
    val color by transition.animateColor {
        // animate from Color.Red to Color.Blue to Color.Red 
    }
}

[Carl Benson]

the only work-around I found is to specify a keyframe spec

animationSpec = keyframes {
    durationMillis = 500
    Color.Red at 0
    Color.Blue at 250
    Color.Red at 500
}

and then ignore the targetValueByState method which requires me to surpress a warning with
@SuppressLint("UnusedTransitionTargetStateParameter") but it feels hackish

[Timo Drick]

One solution i do some times is to change the target value in a LaunchedEffect. Than i do have full control and it is easy to read:

LaunchedEffect(Key) {
    targetColor = Color.Red
    delay(500)
    targetColor = Color.Blue
    ....
}

[Carl Benson]

ok but you don't know if the animation has finished after 500 ms

[Carl Benson]

unless you of course set it explicitly to that. but if I want to use a spring, how do I know it has finished?

[Timo Drick]

yes that is right.

[Timo Drick]

Maybe when you do want to have full control and do the things as i recommended better use the lower level animation apis:
https://developer.android.com/jetpack/compose/animation/value-based#animatable

// Start out gray and animate to green/red based on `ok`
val color = remember { Animatable(Color.Gray) }
LaunchedEffect(ok) {
    color.animateTo(if (ok) Color.Green else Color.Red)
}
Box(Modifier.fillMaxSize().background(color.value))

[Carl Benson]

yes that is probably the route I have to explore. thanks for input!