Android Compose实现XML 270°渐变的平滑全屏动画问询

一、XML 270°渐变与Compose的对应关系 #

XML中android:angle="270"的线性渐变是从上到下的垂直渐变（起始色#b20811到结束色#FFFFFF），Compose的Brush.verticalGradient默认就是从上到下的垂直渐变，二者效果完全一致。无需手动指定固定的startY/endY，当Brush应用在fillMaxSize的组件上时，会自动填充整个可用空间。

二、现有代码的问题 #

你之前的动画实现通过endY = screenHeightDp * animatedProgress动态缩短渐变范围，导致animatedProgress < 1时，渐变无法覆盖整个屏幕，底部区域直接显示结束色（白色），出现"无法铺满"的问题。

三、正确实现方案 #

通过偏移渐变的整体位置实现平滑滚动动画，保证渐变范围始终覆盖屏幕：

完整代码示例 #

@Composable
fun FullScreenAnimatedGradient() {
    val gradientColors = listOf(Color(0xFFB20811), Color.White)
    val screenHeight = LocalConfiguration.current.screenHeightDp.dp.toPx()

    // 无限滚动动画
    val transition = rememberInfiniteTransition(label = "gradientScroll")
    val offset by transition.animateFloat(
        initialValue = 0f,
        targetValue = screenHeight,
        animationSpec = infiniteRepeatable(
            animation = tween(1500, easing = LinearEasing),
            repeatMode = RepeatMode.Restart
        ),
        label = "offset"
    )

    // 偏移后的垂直渐变Brush
    val brush = Brush.verticalGradient(
        colors = gradientColors,
        startY = -screenHeight + offset,
        endY = offset
    )

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(brush)
    ) {
        // 你的内容布局
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            // ... 这里放你的UI元素
        }
    }
}

关键要点说明 #

1. 使用像素坐标：通过screenHeightDp.dp.toPx()获取屏幕实际像素高度，避免Dp与Px转换导致的错位。
2. 扩大渐变范围：将渐变的起始/结束位置设置为超出屏幕（startY = -screenHeight + offset），确保动画过程中屏幕始终被渐变覆盖。
3. 偏移动画逻辑：offset从0滚动到屏幕高度，带动渐变整体向下移动，实现平滑的滚动效果，且不会出现空白区域。

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