https://kotlinlang.org logo
#compose-desktop
Title
# compose-desktop
g

Guilherme Delgado

07/20/2022, 10:12 AM
Is it possible to animate Window/WindowState size? I’ve tried the following (code in thread):
Copy code
fun main() = application {
    var expand by remember { mutableStateOf(false) }
    val width: Dp by animateDpAsState(
        targetValue = if (expand) 1024.dp else 600.dp,
        animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing),
    )
    val height: Dp by animateDpAsState(
        targetValue = if (expand) 1024.dp else 600.dp,
        animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing),
    )
    val dpSize: DpSize by remember { mutableStateOf(DpSize(width, height)) }
    val windowState = rememberWindowState(size = dpSize)

    Window(state = windowState) {
            MyComposable(
                onSomething = {
                    expand = !expand
                    //windowState.size = dpSize
                })
    }
}
To make it work I’ve to change the size here:
//windowState.size = dpSize
directly, but this will not animate 🤔
I’m lost, any hint?
s

Sean Proctor

07/24/2022, 8:08 PM
Did you figure this out? I think you want to do the
windowState.size = dpSize
immediately after
val windowState = ...
It might be better to update the size in a launched effect:
Copy code
LaunchedEffect(dpSize) {
    windowState.size = dpSize
}
g

Guilherme Delgado

07/25/2022, 9:12 AM
I did not 😞 and the
onSomething
- in this case - it’s actually being called inside a
LaunchedEffect
, but the key is not the dpSize 🤔 will try to add it as key to see what happens (edit: nothing 😢).
I think the animations for some reason are not running/changing the window state. The same code animates a “normal” composable 🤷
Copy code
LaunchedEffect(animate) {
    repeat(5) {
        delay(1000)
        windowState.size = DpSize(windowState.size.width + 100.dp, windowState.size.height)
    }
}
quick test and this is the only way I can “animate” the
windowState.size
🤮
@Sean Proctor maybe this is why:
Copy code
/**
 * Creates a [WindowState] that is remembered across compositions.
 *
 * Changes to the provided initial values will **not** result in the state being recreated or
 * changed in any way if it has already been created.
 *
 * @param placement the initial value for [WindowState.placement]
 * @param isMinimized the initial value for [WindowState.isMinimized]
 * @param position the initial value for [WindowState.position]
 * @param size the initial value for [WindowState.size]
 */
🤔
s

Sean Proctor

07/27/2022, 11:28 PM
That makes sense. The window isn't a normal composable, so state hoisting won't work. I'm not very fluent with the animation APIs, so maybe there's something that looks a bit more elegant than what you have, but what you have is pretty close to what I was thinking. How does the animation itself look with that code? Maybe if you decrease the delay to something like 20ms or so it would look nicer?
g

Guilherme Delgado

07/28/2022, 9:26 AM
It doesn’t feel smooth and pretty like animation API, specially because I was thinking about using spring() or something non linear, but well, it does the job considering all constraints.
24 Views