如何重置Jetpack Compose视图的动画状态，实现页面切换重放渐入效果？

问题描述 #

我正在开发一个引导页Fragment，用于向用户展示各页面的使用提示，包含两个页面：

• 页面1：展示两个图标功能说明，底部有Next按钮
• 页面2：展示两个图标功能说明，底部有Finish按钮

需求是页面上的每个视图能从上到下依次淡入；切换到新页面时，所有元素重置并再次从上到下淡入。

尝试使用AnimatedVisibility实现，但元素会保留状态，导致第二页无法播放淡入效果。以下是当前的Line组件代码，希望能在每次重组时重置状态对象，或获得更优实现建议：

@Composable
private fun Line(line: ActionResources, modifier: Modifier) {
    val state = remember {
        MutableTransitionState(false).apply {
            // Start the animation immediately.
            targetState = true
        }
    }
    AnimatedVisibility(state,
        enter = fadeIn(animationSpec = tween(durationMillis = 1000)),
        exit = fadeOut(animationSpec = tween(durationMillis = 1000))
    ) {
        Row(
            modifier = modifier
                .padding(16.dp)
        ) {
            val color = line.color?.let { colorResource(it) } ?: MaterialTheme.colors.onSurface
            line.icon?.also {
                Icon(
                    painter = painterResource(it),
                    tint = color,
                    contentDescription = stringResource(id = R.string.menu_search),
                    modifier = Modifier.padding(end = 8.dp).size(24.dp)
                )
            }
            line.label?.also {
                Text(
                    modifier = Modifier,
                    style = MaterialTheme.typography.body1,
                    color = color,
                    text = it
                )
            }
        }
    }
}

解决方案 #

1. 重置AnimatedVisibility状态 #

问题核心是remember会保留状态对象，页面切换时Line组件并未销毁，所以MutableTransitionState不会重新初始化。解决方法是给remember添加key参数，当页面切换时key值变化，状态就会重新创建：

修改Line组件，添加一个pageKey参数（比如当前页面的索引或唯一标识），作为remember的key：

@Composable
private fun Line(
    line: ActionResources,
    modifier: Modifier,
    pageKey: Any // 新增：用于触发状态重置的页面标识
) {
    val state = remember(pageKey) { // 加入pageKey作为remember的依赖
        MutableTransitionState(false).apply {
            targetState = true
        }
    }
    AnimatedVisibility(state,
        enter = fadeIn(animationSpec = tween(durationMillis = 1000)),
        exit = fadeOut(animationSpec = tween(durationMillis = 1000))
    ) {
        // 原有Row内容不变
        Row(
            modifier = modifier
                .padding(16.dp)
        ) {
            val color = line.color?.let { colorResource(it) } ?: MaterialTheme.colors.onSurface
            line.icon?.also {
                Icon(
                    painter = painterResource(it),
                    tint = color,
                    contentDescription = stringResource(id = R.string.menu_search),
                    modifier = Modifier.padding(end = 8.dp).size(24.dp)
                )
            }
            line.label?.also {
                Text(
                    modifier = Modifier,
                    style = MaterialTheme.typography.body1,
                    color = color,
                    text = it
                )
            }
        }
    }
}

调用Line时传入当前页面的key（比如页面索引）：

// 假设当前页面索引是currentPage
Line(line = line1, modifier = Modifier, pageKey = currentPage)
Line(line = line2, modifier = Modifier, pageKey = currentPage)

2. 实现从上到下依次淡入 #

要让元素按顺序淡入，只需给每个Line的动画添加延迟，延迟时间基于元素在列表中的位置：

修改fadeIn的动画参数，加入delayMillis：

@Composable
private fun Line(
    line: ActionResources,
    modifier: Modifier,
    pageKey: Any,
    index: Int // 新增：元素在列表中的索引
) {
    val state = remember(pageKey) {
        MutableTransitionState(false).apply {
            targetState = true
        }
    }
    AnimatedVisibility(state,
        enter = fadeIn(animationSpec = tween(
            durationMillis = 1000,
            delayMillis = index * 300 // 每个元素延迟300ms，依次触发
        )),
        exit = fadeOut(animationSpec = tween(durationMillis = 1000))
    ) {
        // 原有Row内容不变
    }
}

调用时传入元素索引：

val lines = listOf(line1, line2)
lines.forEachIndexed { index, line ->
    Line(line = line, modifier = Modifier, pageKey = currentPage, index = index)
}

3. 替代方案：使用AnimatedContent #

如果希望更简洁的页面切换动画，可以用AnimatedContent包裹整个页面内容，配合页面key自动触发过渡动画，同时内部元素的顺序淡入逻辑保持不变：

AnimatedContent(targetState = currentPage, transitionSpec = {
    fadeIn() with fadeOut()
}) { page ->
    Column {
        // 根据page加载对应页面的Line列表
        val lines = if (page == 1) page1Lines else page2Lines
        lines.forEachIndexed { index, line ->
            Line(line = line, modifier = Modifier, index = index)
        }
        // 底部按钮
        Button(onClick = { /* 切换页面逻辑 */ }) {
            Text(text = if (page == 1) "Next" else "Finish")
        }
    }
}

这种方式下，页面切换时整个内容会先淡出再淡入，同时内部Line的依次淡入动画也会重新触发，无需额外处理状态重置。

内容的提问来源于stack exchange，提问作者siliconeagle