如何通过Kotlin代码实现LinearLayout背景渐变的切换动画？

核心思路 #

利用ValueAnimator对两个GradientDrawable的颜色数组、渐变方向进行插值计算，在动画每一帧动态更新LinearLayout的背景GradientDrawable，实现平滑过渡效果。

具体实现代码 #

1. 封装动画工具方法 #

fun animateLinearLayoutBackground(linearLayout: LinearLayout, startGradient: GradientDrawable, endGradient: GradientDrawable, duration: Long = 3000) {
    // 获取起始与结束渐变的颜色数组
    val startColors = startGradient.colors ?: intArrayOf(Color.WHITE, Color.BLACK)
    val endColors = endGradient.colors ?: intArrayOf(Color.BLACK, Color.WHITE)
    
    // 将渐变方向转为角度值，方便插值计算
    val startOrientationAngle = getOrientationAngle(startGradient.orientation)
    val endOrientationAngle = getOrientationAngle(endGradient.orientation)

    // 创建从0到1的插值动画
    val animator = ValueAnimator.ofFloat(0f, 1f).apply {
        this.duration = duration
        addUpdateListener { animation ->
            val progress = animation.animatedValue as Float
            
            // 插值计算过渡颜色数组
            val interpolatedColors = IntArray(startColors.size)
            val colorEvaluator = ArgbEvaluator()
            for (i in startColors.indices) {
                interpolatedColors[i] = colorEvaluator.evaluate(progress, startColors[i], endColors[i]) as Int
            }
            
            // 插值计算过渡角度，再转回GradientDrawable.Orientation
            val interpolatedAngle = startOrientationAngle + (endOrientationAngle - startOrientationAngle) * progress
            val interpolatedOrientation = getOrientationFromAngle(interpolatedAngle)
            
            // 创建过渡用的GradientDrawable
            val transitionGradient = GradientDrawable(interpolatedOrientation, interpolatedColors)
            // 同步原渐变的其他属性（如圆角、形状）
            transitionGradient.cornerRadius = startGradient.cornerRadius
            transitionGradient.shape = startGradient.shape
            transitionGradient.setStroke(startGradient.strokeWidth, startGradient.strokeColor)
            
            // 更新LinearLayout背景
            linearLayout.background = transitionGradient
        }
    }
    
    animator.start()
}

// 辅助方法：将渐变方向转为对应角度
private fun getOrientationAngle(orientation: GradientDrawable.Orientation): Float {
    return when (orientation) {
        GradientDrawable.Orientation.TOP_BOTTOM -> 0f
        GradientDrawable.Orientation.TR_BL -> 45f
        GradientDrawable.Orientation.RIGHT_LEFT -> 90f
        GradientDrawable.Orientation.BR_TL -> 135f
        GradientDrawable.Orientation.BOTTOM_TOP -> 180f
        GradientDrawable.Orientation.BL_TR -> 225f
        GradientDrawable.Orientation.LEFT_RIGHT -> 270f
        GradientDrawable.Orientation.TL_BR -> 315f
    }
}

// 辅助方法：将角度转回渐变方向
private fun getOrientationFromAngle(angle: Float): GradientDrawable.Orientation {
    val normalizedAngle = angle % 360f
    return when {
        normalizedAngle < 22.5f -> GradientDrawable.Orientation.TOP_BOTTOM
        normalizedAngle < 67.5f -> GradientDrawable.Orientation.TR_BL
        normalizedAngle < 112.5f -> GradientDrawable.Orientation.RIGHT_LEFT
        normalizedAngle < 157.5f -> GradientDrawable.Orientation.BR_TL
        normalizedAngle < 202.5f -> GradientDrawable.Orientation.BOTTOM_TOP
        normalizedAngle < 247.5f -> GradientDrawable.Orientation.BL_TR
        normalizedAngle < 292.5f -> GradientDrawable.Orientation.LEFT_RIGHT
        else -> GradientDrawable.Orientation.TL_BR
    }
}

2. 调用示例 #

在Activity/Fragment中直接使用：

// 你已创建的两个渐变实例
val gradient = GradientDrawable(
    GradientDrawable.Orientation.TOP_BOTTOM,
    intArrayOf(
        Color.argb(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),
        Color.argb(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),
    )
)

val gradient2 = GradientDrawable(
    GradientDrawable.Orientation.RIGHT_LEFT,
    intArrayOf(
        Color.argb(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),
        Color.argb(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),
    )
)

// 绑定目标LinearLayout
val linearLayout = findViewById<LinearLayout>(R.id.target_linear_layout)

// 启动过渡动画，时长3秒
animateLinearLayoutBackground(linearLayout, gradient, gradient2, 3000)

补充说明 #

• 如果不需要渐变方向的过渡，可直接删除方向插值相关代码，只保留颜色过渡逻辑。
• 若你的渐变有描边、圆角等自定义属性，需在创建过渡GradientDrawable时同步复制这些属性，保证动画前后样式统一。
• 动画时长可根据需求自由调整，示例中设置为3000毫秒。

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