Android Compose Material 3如何实现迷你播放器共享转场效果

组件选择：放弃标准Sheet，用自定义组件 #

这种带底部导航栏协同隐藏动画的全屏转场，不适合用标准Sheet组件：

• 标准ModalBottomSheet的默认定位是底部弹窗，无法实现全屏级别的页面覆盖与转场逻辑；
• 它的动画系统独立，很难和底部导航栏的显隐动画做精准同步，达不到Material 3示例里的连贯效果。
  自定义组件能完全掌控页面层级、动画时序和交互逻辑，是更合适的选择。

具体实现步骤（以Jetpack Compose为例） #

1. 统一状态管理 #

用单个布尔状态控制详情页显示状态和导航栏显隐，确保动画触发源一致：

var isDetailScreenActive by remember { mutableStateOf(false) }

2. 底部导航栏的显隐动画 #

用AnimatedVisibility包裹导航栏，匹配Material 3标准动画参数：

AnimatedVisibility(
    visible = !isDetailScreenActive,
    exit = slideOutVertically(animationSpec = tween(300, easing = FastOutSlowInEasing)) + fadeOut(),
    enter = slideInVertically(animationSpec = tween(300, easing = FastOutSlowInEasing)) + fadeIn()
) {
    BottomNavigation {
        // 你的导航项实现
    }
}

3. 全屏页面转场动画 #

通过层级叠加+偏移动画实现页面从底部滑入的效果，和导航栏动画保持同步：

Box(modifier = Modifier.fillMaxSize()) {
    // 主页内容区域
    HomeScreen(onItemTap = { isDetailScreenActive = true })

    // 详情页（带转场动画）
    if (isDetailScreenActive) {
        DetailScreen(
            modifier = Modifier
                .fillMaxSize()
                .offset {
                    val yOffset = animateDpAsState(
                        targetValue = if (isDetailScreenActive) 0.dp else 1000.dp,
                        animationSpec = tween(300, easing = FastOutSlowInEasing)
                    ).value
                    IntOffset(0, yOffset.roundToPx())
                }
                .clickable(indication = null, interactionSource = remember { MutableInteractionSource() }) {
                    isDetailScreenActive = false
                },
            onBackPressed = { isDetailScreenActive = false }
        )
    }
}

4. 共享元素转场优化（对应示例中的卡片到详情页联动） #

利用Compose的SharedTransitionScope实现共享元素的平滑过渡：

val transitionState = rememberSharedTransitionState()
SharedTransitionScope {
    Box(modifier = Modifier.fillMaxSize()) {
        HomeScreen(
            onItemTap = { selectedItem ->
                isDetailScreenActive = true
                launchSharedTransition {
                    sharedContent(key = selectedItem.id) {
                        // 主页的卡片组件
                        ItemCard(selectedItem)
                    }
                }
            }
        )

        if (isDetailScreenActive) {
            DetailScreen(selectedItem) {
                // 详情页中与卡片对应的共享元素组件
                sharedContent(key = selectedItem.id) {
                    DetailHeader(selectedItem)
                }
            }
        }
    }
}

常见动画问题排查 #

• 动画不同步：确保导航栏和详情页的动画时长、缓动曲线完全一致（Material 3推荐tween(300, FastOutSlowInEasing)）；
• 触摸穿透：给详情页添加空交互的clickable，避免下层主页接收触摸事件；
• 层级混乱：详情页必须放在主页之后，确保绘制层级更高。

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