IssueTracker

Jetpack Compose version: 1.7.5 Jetpack Compose component used: Animation

I'm using AnimatedVisibility as a core navigation component, and as such, some of the content lambdas it receives have expensive first compositions. In Enter transitions, I noticed different frame timing characteristics when a SeekableTransitionState vs MutableTransitionState drives the AnimatedVisibility of slow content.

With MutableTransitionState, the content is composed, and the animation starts after the content is composed. This is desirable, as even though my content drops frames, the animation is smooth.

But with SeekableTransitionState, the animation seems to start in the same frame my content is composed, and so every dropped frame is dropped from the animation as well. This results in much more perceptible jank, as even though the same amount of frames are dropped as in the other case, the animation itself doesn't get to play all of its frames.

Weirdly, if I trigger the SeekableTransitionState::animateTo inside a withFrameNanos { }, I get the desired timing again. That's a workaround I'm using for now, but I have no idea why it works.

Here's a sample demonstrating the frame timing behaviors:

@Preview
@Composable
private fun AnimatedVisibilityTransitionTimingSample() {
    @Composable
    fun SlowContent() {
        if (currentComposer.inserting) Thread.sleep(250)
        Surface(
            Modifier
                .fillMaxWidth()
                .height(100.dp),
            color = MaterialTheme.colorScheme.primaryContainer
        ) {
            Text("I am laggy!")
        }
    }

    @Composable
    fun GoodTimingWithMutableTransitionState(modifier: Modifier = Modifier) {
        Column(modifier) {
            val mutableTransitionState = remember { MutableTransitionState(false) }
            val transition = rememberTransition(mutableTransitionState)
            ToggleButton(
                checked = transition.targetState,
                onCheckedChange = { value -> mutableTransitionState.targetState = value }
            ) { Text("Visible") }
            transition.AnimatedVisibility(visible = { it }) {
                SlowContent()
            }
        }
    }

    @Composable
    fun BadTimingWithSeekableTransitionState(modifier: Modifier = Modifier) {
        Column(modifier) {
            val scope = rememberCoroutineScope()
            val seekableTransitionState = remember { SeekableTransitionState(false) }
            val transition = rememberTransition(seekableTransitionState)
            ToggleButton(
                checked = transition.targetState,
                onCheckedChange = { value ->
                    scope.launch {
                        seekableTransitionState.animateTo(value)
                    }
                }
            ) { Text("Visible") }
            transition.AnimatedVisibility(visible = { it }) {
                SlowContent()
            }
        }
    }

    @Composable
    fun GoodTimingWithSeekableTransitionStateAndWeirdStuff(modifier: Modifier = Modifier) {
        Column(modifier) {
            val scope = rememberCoroutineScope()
            val seekableTransitionState = remember { SeekableTransitionState(false) }
            val transition = rememberTransition(seekableTransitionState)
            ToggleButton(
                checked = transition.targetState,
                onCheckedChange = { value ->
                    scope.launch {
                        withFrameNanos {
                            launch(Dispatchers.Main.immediate) {
                                seekableTransitionState.animateTo(value)
                            }
                        }
                    }
                }
            ) { Text("Visible") }
            transition.AnimatedVisibility(visible = { it }) {
                SlowContent()
            }
        }
    }

    Column {
        Text("Good timing with MutableTransitionState")
        GoodTimingWithMutableTransitionState(Modifier.weight(1f))
        Spacer(Modifier.height(32.dp))

        Text("Bad timing with SeekableTransitionState")
        BadTimingWithSeekableTransitionState(Modifier.weight(1f))
        Spacer(Modifier.height(32.dp))

        Text("Good timing with SeekableTransitionState and weird stuff")
        GoodTimingWithSeekableTransitionStateAndWeirdStuff(Modifier.weight(1f))
    }
}