说起移动端 UI，“动起来”Yi经不再是奢侈，而是用户期待的基本体验。一次柔和的颜色流转，往往Neng在第一眼就抓住注意力。今天我们把这份“流光溢彩”的魔法拆解成几块拼图，用Zui原生的方式写出一个可配置、易复用的动态渐变背景。

核心思路其实hen朴素：绘制一个宽度是视图两倍的线性渐变，然后用矩阵把它平移。只要把平移距离随时间递增，就会出现kan似无尽的流动效果。

LinearGradient负责生成颜色带；

Matrix负责把颜色带在画布上滑动；

ValueAnimator提供时间轴，让滑动有节奏。

Ru果你对这些概念还稍有模糊，别担心——下面会一步步展示代码，配合图示帮你快速落地。

虽然Zui终的颜色是由代码动态生成的，但仍然建议在 res/drawable/ 下新建一个 XML 文件（比如 background_color.xml)，用于占位或后期统一管理。

这样Zuo有两个好处：

布局文件里Ke以直接引用，不需要硬编码。

后期Ru果想换成静态图片，只要改一下 XML 即可，无需改代码。

下面这段 Kotlin 代码是一套完整可运行的实现。它将前文提到的三大核心组件封装进了一个自定义 View，并暴露了颜色、强度、速度等属性供外部灵活调节。

package com.voicerobot.lottie.widget
import android.animation.ValueAnimator
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.View
import android.view.animation.LinearInterpolator
import androidx.annotation.ColorInt
import androidx.core.content.withStyledAttributes
import com.voicerobot.lottie.R
/**
 * 动态线性渐变背景 View
 *
 * 使用方法：
 * 
 */
class GradientBackgroundView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View {
    private val paint = Paint
    // 默认粉蓝组合，你Ke以随时调用 setColors 改掉它们
    @ColorInt private var colorStart = 0xFFFF4FD8.toInt   // 粉色
    @ColorInt private var colorEnd   = 0xFF3D8BFF.toInt   // 蓝色
    private var shader: LinearGradient? = null
    private val shaderMatrix = Matrix
    private var animator: ValueAnimator? = null
    /** 动画进度，由 ValueAnimator 自动geng新 */
    private var progress = 0f
    /** 强度：0 表示静止，1 表示Zui大流速 */
    private var intensity = 1f
    /** 流速，越大越快 */
    private var speedPxPerSec = 180f
    init {
        // 把自定义属性读取进来若未声明则使用默认值
        context.withStyledAttributes {
            intensity = getFloat
            speedPxPerSec = getFloat(R.styleable.GradientBackgroundView_gbvSpeedPxPerSec,
                180f)
        }
        // 当 View 被添加到窗口时自动启动动画
        startAnimIfPossible
    }
    override fun onAttachedToWindow {
        super.onAttachedToWindow
        startAnimIfPossible
    }
    override fun onDetachedFromWindow {
        stopAnim
        super.onDetachedFromWindow
    }
    /** 当尺寸变化时重新构造 LinearGradient，保证宽度足够覆盖整个循环 */
    override fun onSizeChanged {
        super.onSizeChanged
        if  return
        // 创建两倍宽度的渐变，这样即使平移到Zui右端也不会出现空白断层
        val gradientWidth = w * 2f
        shader = LinearGradient(
            0f, 0f,
            gradientWidth, h.toFloat,
            intArrayOf,   // 首尾同色，实现无缝循环
            floatArrayOf,
            Shader.TileMode.CLAMP
        )
        paint.shader = shader
        // 宽高确定后再去启动动画，否则会出现除以零异常
        startAnimIfPossible
    }
    /** 真正绘制内容的地方，把平移矩阵套进去 */
    override fun onDraw {
        super.onDraw
        if  return
        val currentShader = shader ?: return
        // 根据 progress 与强度算出本帧需要平移多少像素
        val dx =  * intensity
        shaderMatrix.reset
        shaderMatrix.setTranslate
        currentShader.setLocalMatrix
        canvas.drawRect, height.toFloat, paint)
    }
/** --------------------- 对外开放的方法 --------------------- */
   /** geng换渐变两端颜色 */
   fun setColors(@ColorInt startColor: Int,
                 @ColorInt endColor:Int){
       colorStart=startColor;colorEnd=endColor
       requestLayout;invalidate
   }
   /** 调整动画强度：< 1 → 慢速；= 1 → Zui快；= 0 → 停止 */
   fun setIntensity{
       intensity=value.coerceIn;invalidate
   }
   /** 修改滚动速度，实时生效 */
   fun setSpeedPxPerSec{
       speedPxPerSec=value.coerceAtLeast;restartAnim
   }
/** --------------------- 动画控制 --------------------- */
   /** 根据当前宽度和设定速度算出一次完整循环所需时间 */
   private fun startAnimIfPossible{
       if  return          // 防止在未测量完成前启动动画
       if  return
       val durationMs=*1000).toLong.coerceAtLeast
       animator=ValueAnimator.ofFloat.apply{
           duration=durationMs
           repeatCount=ValueAnimator.INFINITE
           repeatMode=ValueAnimator.RESTART
           interpolator=LinearInterpolator
           addUpdateListener{
               progress=it.animatedValue as Float;invalidate
           }
           start
       }
   }
   private fun restartAnim{
       stopAnim;startAnimIfPossible
   }
   private fun stopAnim{
       animator?.cancel;animator=null
   }
}

为了让使用者在 XML 中直接调节强度 intensity 和速度 speedPxPerSec , 我们需要在项目的 res/values/attrs.xml 中加入以下片段：

随后便Ke以像普通控件一样写：

创建布局文件：

    
    <!-- 放你自己的 UI 元素，比如按钮、文字等 -->

Kotlin 中获取实例并动态改色：

val bgView=findViewById
// 随机切换配色，让 UI 每次打开dou有惊喜感：
bgView.setColors(
    startColor = Color.parseColor,
    endColor   = Color.parseColor
)
// 想让它暂时停下来？只要把强度调为零即可：
bgView.setIntensity
// 想加快点儿？改改速度：
bgView.setSpeedPxPerSec

Coding 小技巧：

MVP／MVVM 项目里把上述操作封装进 ViewModel，让 UI 与业务解耦。

If you’re using Jetpack Compose you can still embed this view via AndroidView – just remember to dispose it in onDispose.

The gradient width是视图宽度两倍，Ru果你担心内存占用，可在 onSizeChanged 时判断是否真的需要这么大——大多数手机上几百 KB 完全不成问题。

七、收官——让你的 App “呼吸”起来！ 🎨🚀︎︎︎︎︎︎︎︎︎︎︎︎️️️️️️️️️️️️🪄🪄🪄🪄🪄🪄🪄🪄🪄🪄🪄🎉🎉🎉⚡⚡⚡⚡⚡⚡⚡⚡⚡🔮🔮🔮🔮🔮🔮🔮🔮🌈🌈🌈🌈🌈🌈🌈🌈🌟🌟🌟🌟💥💥💥💥💥💥💥💥✨✨✨✨✨✨✨✨✨✨❤️❤️❤️❤️❤️❤️❤️❤️❤️❗❗❗❗❗❗❗❗❗🙌🙌🙌🙌🙌🙌🙌🙌🤩🤩🤩🤩🤩🤩🤩🤩🤔🤔🤔🤔👀👀👀👀👍👍👍👍👍👍👍👍😉😉😉😉😎😎😎😎😂😂😂😂🤣🤣🤣🤣🥰🥰🥰🥰🚀🚀🚀🚀🐱‍👤🐱‍🏍🐱‍🚀🐱‍💻🐱‍🐉🐱‍🏍🐱‍📚

    "当蓝光与粉红交织，一切沉闷dou被冲刷得干干净净。" — 开源作者 QingFeng194 的实验室笔记中提到过这句感慨。