Jetpack Compose中Shimmer动画失效问题排查求助

你的Shimmer动画失效的核心原因有两点：

1. 初始size为IntSize.Zero，导致动画的起始/目标值均为0，无任何位移变化；后续size更新后，已初始化的rememberInfiniteTransition不会重新计算动画范围，动画仍处于静止状态。
2. 渐变的偏移逻辑设置错误，未覆盖控件的滑动范围，无法形成流动效果。

修改后的Shimmer效果代码 #

fun Modifier.shimmerEffect(): Modifier = composed {
    var size by remember { mutableStateOf(IntSize.Zero) }
    val transition = rememberInfiniteTransition()
    
    val startOffsetX by transition.animateFloat(
        initialValue = -size.width.toFloat(),
        targetValue = size.width.toFloat(),
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 1500, easing = LinearEasing),
            repeatMode = RepeatMode.Restart
        )
    )

    background(
        brush = Brush.linearGradient(
            colors = listOf(
                Color(0xFFB5B5B5),
                Color(0xFFEBEBEB),
                Color(0xFFB5B5B5)
            ),
            start = Offset(startOffsetX, 0f),
            end = Offset(startOffsetX + size.width.toFloat(), size.height.toFloat())
        )
    ).onGloballyPositioned {
        size = it.size
    }
}

关键修改说明 #

• 调整动画范围：将起始值设为-size.width，目标值设为size.width，让渐变从控件左侧外部滑入，到右侧外部滑出，完全覆盖控件区域，形成连贯的流动效果。
• 适配尺寸更新：动画依赖size变量，当onGloballyPositioned获取到真实控件尺寸后，动画会自动调整偏移范围，无需额外重启逻辑。
• 优化动画参数：添加LinearEasing实现匀速滑动，调整时长为1500ms，让动画效果更自然流畅。

验证其他代码 #

你的ShimmerItem、HomeScreen和ViewModel代码逻辑无问题，修改shimmerEffect后即可正常显示流动的Shimmer动画。

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