https://kotlinlang.org logo
#compose
Title
# compose
a

andbapps

06/22/2020, 9:56 PM
I'm trying to animate things using a transition as following, but it snaps between the two endpoints immediately without animating any of the intermediate values. Is there something about this that I'm missing?
Copy code
@Composable
fun TestAnimation() {
    val moved = state { false }
    val offset = DpPropKey()
    val transition = transitionDefinition<Boolean> {
        state(true) {
            this[offset] = 100.dp
        }
        state(false) {
            this[offset] = 0.dp
        }
        transition {
            offset using tween {
                easing = LinearEasing
                duration = 1000
            }
        }
    }
    Transition(definition = transition, toState = moved.value) { transitionState ->
        println("transitionState[offset] = ${transitionState[offset]}")
        Box(
            modifier = Modifier
                .clickable(onClick = { moved.value = !moved.value })
                .padding(start = transitionState[offset])
                .size(56.dp),
            shape = CircleShape,
            backgroundColor = Color.Blue
        )
    }
}
z

Zach Klippenstein (he/him) [MOD]

06/22/2020, 10:02 PM
I'm not sure if this is the only problem, but you are creating a new
offset
key every time
TestAnimation
is invoked. Either
remember
it or declare as a top-level val.
a

andbapps

06/22/2020, 11:23 PM
Unfortunately that doesn't fix the issue but that's a good point
a

Andrey Kulikov

06/22/2020, 11:31 PM
you need to do the same with transitionDefinition. wrap it into remember
a

andbapps

06/23/2020, 12:13 AM
Thank you, implementing both of those worked!
2 Views