在Compose中实现线性渐变画笔的无限反向动画问题

问题说明 #

需要实现Linear Gradient（画笔）的无限反向动画：

• 初始状态（animatedOffset = 0f）：蓝→黄的45度线性渐变
• 目标状态（animatedOffset = 1f）：黄→蓝的反向45度线性渐变
  此前调整渐变终点时出现颜色突变的问题，以下是修正方案。

核心修正思路 #

问题根源在于渐变的起点和终点未保持相同长度的渐变向量进行平滑过渡。我们需要让渐变的起点从(0,0)逐步移动到(endX, endY)，同时终点从(endX, endY)逐步移动到(0,0)，这样就能实现渐变方向的平滑反转，避免颜色突变。

完整修正代码 #

val transition = rememberInfiniteTransition(label = "NavIconGradientAnim")

val animatedOffset by transition.animateFloat(
    initialValue = 0f, 
    targetValue = 1f,
    label = "NavIconGradientAnimOffset",
    animationSpec = infiniteRepeatable(
        animation = tween(1500, easing = LinearEasing),
        repeatMode = RepeatMode.Reverse
    )
)

Image(
    painter = painterResource(id = item.icon),
    contentDescription = null,
    modifier = Modifier.drawWithCache {
        onDrawWithContent {
            val angle = 45f
            val size = drawContext.size
            val endX = size.width
            val endY = (endX * kotlin.math.tan(Math.toRadians(angle.toDouble()))).toFloat()

            // 保存图层，实现渐变与图标混合
            val layerId = saveLayer(Rect(Offset.Zero, size), null)
            drawContent()
            
            // 计算渐变的起点和终点，实现平滑反向过渡
            val gradientStart = Offset(animatedOffset * endX, animatedOffset * endY)
            val gradientEnd = Offset(endX * (1 - animatedOffset), endY * (1 - animatedOffset))
            
            val gradient = Brush.linearGradient(
                colors = listOf(Color.Blue, Color.Yellow),
                start = gradientStart,
                end = gradientEnd
            )
            
            drawRect(
                brush = gradient,
                blendMode = BlendMode.SrcIn
            )
            restoreToCount(layerId)
        }
    }
)

关键修改点 #

• 渐变向量的平滑过渡：通过animatedOffset同时控制起点和终点的位置，确保渐变的长度始终一致，方向逐步反转
• 修正坐标计算：统一使用size获取画布尺寸，避免冗余变量；渐变终点使用计算出的endY而非硬编码的endX（角度非45度时更通用）
• 简化图层操作：使用Compose原生的saveLayer替代nativeCanvas的调用，代码更简洁且符合Compose最佳实践

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