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

Doris Liu

07/16/2020, 2:09 AM
Hello everyone, I work on Compose Animation. I would love to collect feature requests from you guys on layout animation in compose. 😀 The more specific the better! If you have run into the cases where layout changes happen so fast and instantaneously that you wish it would slow down and get smoothed over, this would be a perfect opportunity to bring it up! 😉
🙏 5
t

Timo Drick

07/16/2020, 9:34 AM
In my opinion the DSL for defining the Prop keys is not so clean:
Copy code
val colorKey = ColorPropKey()
val widthKey = DpPropKey()
val heightKey = DpPropKey()

val definition = transitionDefinition {
    state(State.First) {
        this[colorKey] = Color.Red
        this[widthKey] = 200.dp
        this[heightKey] = 400.dp
    }
    state(State.Second) {
        this[colorKey] = Color.Green
        this[widthKey] = 300.dp
        this[heightKey] = 300.dp
    }
}
maybe it would be possible using delegates to get a DSL like this:
Copy code
val colorKey by ColorPropKey()
val widthKey by DpPropKey()
val heightKey by DpPropKey()

val definition = transitionDefinition {
    state(State.First) {
        colorKey = Color.Red
        widthKey = 200.dp
        heightKey = 400.dp
    }
    state(State.Second) {
        colorKey = Color.Green
        widthKey = 300.dp
        heightKey = 300.dp
    }
}
f

Fudge

07/16/2020, 10:12 AM
the keys would need to be
var
d

Doris Liu

07/16/2020, 8:57 PM
Thanks for the feedback @Timo Drick. We have in fact experimented with having `PropKey`s as extension properties on TransitionState, and came to the exact syntax as you posted above. The challenge is that we can't use these properties to define animations in transition as we would here:
Copy code
transition (State.First to State.Second) {
colorKey using tween(..)
}
I'd love to hear your thoughts on perhaps working around that limitation though. 🙂