Android Compose中HorizontalPager如何实现淡入淡出切换动画

你使用的com.google.accompanist:accompanist-pager:0.24.2-alpha版本不需要额外升级依赖，直接利用Pager作用域自带的页面偏移参数，给页面内容加透明度渲染即可实现效果，完全保留原生Pager的滑动手势逻辑，不会影响交互体验。

核心实现逻辑 #

HorizontalPager的内容lambda运行在PagerScope作用域下，自带currentPageOffset属性，取值范围为[-1f, 1f]：

• 当前页处于完全选中状态时，值为0f
• 当前页向左滑动完全离开屏幕时，值为-1f
• 当前页向右滑动完全离开屏幕时，值为1f

基于这个偏移值的绝对值计算透明度：偏移值绝对值越大，页面透明度越低，选中状态下透明度为1f，即可实现淡入淡出的切换效果。

完整可运行代码 #

val pagerState = rememberPagerState()
HorizontalPager(
    count = 3,
    state = pagerState
) { pagePosition ->
    // 获取当前页面相对选中位置的偏移比例
    val pageOffset = currentPageOffset
    // 计算透明度：偏移越大透明度越低
    val pageAlpha = 1f - kotlin.math.abs(pageOffset)
    // 可选：添加轻微缩放让过渡更柔和，不需要可删除
    val pageScale = 0.92f + (1f - kotlin.math.abs(pageOffset)) * 0.08f

    Box(
        modifier = Modifier
            .fillMaxSize()
            .graphicsLayer {
                alpha = pageAlpha
                scaleX = pageScale
                scaleY = pageScale
            }
    ) {
        PagerScreen(onBoardingData = onBoardingDataList[pagePosition])
    }
}

提示：该实现不会修改Pager原有的滑动判定、页面定位逻辑，滑动手势手感和原生HorizontalPager完全一致，仅修改页面的视觉渲染效果，不会出现交互异常。

效果自定义调整 #

• 纯淡入淡出效果：删除代码中pageScale及graphicsLayer里的scaleX、scaleY配置即可
• 调整淡入淡出速度：修改alpha计算逻辑，比如val pageAlpha = 1f - (kotlin.math.abs(pageOffset) * 1.3f).coerceIn(0f, 1f)，系数越大淡入淡出的过渡速度越快
• 避免内容被裁剪：如果你的Pager页面内容有边距，确保HorizontalPager不要加clipToBounds()修饰符，避免淡入淡出过程中边缘内容被截断

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