如何在HorizontalPager中实现页面滚动时的卡片偏移量动画效果

你现有代码仅使用pagerState.currentPage判断当前选中页，该状态仅在页面完全切换结束后才会更新，因此滑动过程中卡片偏移是突变的，无法实现连贯的跟随滑动升降效果。

修正后代码 #

import kotlin.math.abs

val pagerState = rememberPagerState(pageCount = 3)
HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize()
) { page ->
    // 计算当前页面相对于滑动位置的偏移比例，范围[-1, 1]
    val pageOffset = (page - pagerState.currentPage).toFloat() + pagerState.currentPageOffsetFraction
    // 用偏移比例的绝对值计算y轴偏移，离选中页越远偏移越大
    val yOffset = abs(pageOffset) * 70.dp
    // 可选：同步调整卡片阴影，提升视觉匹配度
    val cardElevation = (1 - abs(pageOffset)) * 110.dp

    Card(
        modifier = Modifier
            .fillMaxWidth(0.7f)
            .fillMaxHeight(0.7f)
            .padding(22.dp)
            .offset(y = yOffset),
        shape = RoundedCornerShape(30.dp),
        elevation = cardElevation
    ) {}
}

实现逻辑说明 #

• pagerState.currentPageOffsetFraction会返回当前选中锚点到目标页面的滑动偏移比例，滑动过程中会实时更新
• 计算得到的pageOffset代表当前页距离最终选中位置的比例：完全选中时值为0，完全滑出屏幕时值为±1
• 用pageOffset的绝对值线性映射y轴偏移和阴影高度，即可实现滑动过程中卡片平缓升降、阴影同步变化的效果，完全匹配你需要的交互效果。

提示：如果使用的是旧版本Accompanist Pager库，可直接调用pagerState.offsetForPage(page)获取上述pageOffset值，逻辑完全一致。

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