is there an obvious way that I m missing to animate a value kotlinlang #compose

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?

what I'm basically looking for is something like

Copy code

@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 
    }
}

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

Copy code

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

09/25/2023, 5:20 PM

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:

Copy code

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

plus1 1

Carl Benson

09/26/2023, 12:28 PM

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

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

09/26/2023, 12:29 PM

yes that is right.

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

Copy code

// 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

09/26/2023, 12:51 PM

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

2 Views