COMPOSE - 带动画的渐变？

Question

我用这个

drawable

作为参考：

<shape
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <gradient
    android:type="linear"
    android:startColor="#b20811"
    android:endColor="#FFFFFF"
    android:angle="270" />
</shape>

我所得到的是我可以创建一个

Brush

，但我不确定是否具有相同的角度。

val brush = Brush.verticalGradient(
        colors = listOf(Color(android.graphics.Color.parseColor("#b20811"),
                        Color(android.graphics.Color.parseColor("#FFFFFF")),
        startY = 0f,
        endY = 1000f,
    )

然后我尝试为渐变添加动画，我找到了一些方法，但问题是渐变不是全屏的。我正在做这个

val transition = rememberInfiniteTransition(label = "")
    val animatedProgress by transition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(1500, easing = LinearEasing),
            repeatMode = RepeatMode.Restart
        ), label = ""
    )
val brush = Brush.verticalGradient(
        colors = listOf(Color(android.graphics.Color.parseColor("#b20811"),
                        Color(android.graphics.Color.parseColor("#FFFFFF")),
        startY = 0f,
        endY = LocalConfiguration.current.screenHeightDp.toFloat() * animatedProgress
    )

然后我还有其他可组合项

Box(
        modifier = Modifier
            .fillMaxSize()
            .background(brush)
    ) {
        Column(
            modifier = modifier,
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
          ....
         }
      }

如何在渐变平滑中添加动画并遵循 xml 的

shape

270º

Answer 1

尝试用这个来更新你Y

val screenHeight = LocalConfiguration.current.screenHeightDp.dp
val density = LocalDensity.current

并按照 Y 结尾更新你的画笔

val brush = Brush.verticalGradient(
colors = listOf(
    Color(android.graphics.Color.parseColor("#b20811")),
    Color(android.graphics.Color.parseColor("#FFFFFF"))
),
startY = 0f,
endY = with(density) { screenHeight.toPx() * animatedProgress })