Lottie 中文文档 下载 App

运行时修改动效属性——动态颜色与文本

LottieProperty 系统

Lottie Android 提供了一套运行时属性修改系统——通过 LottieProperty 和 LottieValueCallback,你可以在不重新加载 JSON 的情况下动态修改动画中的元素。

修改颜色

最常见的操作——改某个图层的颜色:

animationView.addValueCallback(
    // 找到要改颜色的图层
    KeyPath("**"),           // 通配符:所有图层
    LottieProperty.COLOR,    // 修改颜色属性
    LottieValueCallback(Color.parseColor("#FF0000")) { frameInfo ->
        // 也可以根据帧号动态返回颜色
        Color.parseColor("#FF0000")
    }
)

更精确地定位图层

不要用 ** 通配符改所有颜色——性能差且容易误改。用 KeyPath 精确定位:

// 改名为 "My Shape Layer" 的图层颜色
animationView.addValueCallback(
    KeyPath("My Shape Layer"),
    LottieProperty.COLOR,
    LottieValueCallback(Color.parseColor("#00FF00"))
)

// 改特定图层里的特定填充
animationView.addValueCallback(
    KeyPath("Group Layer", "Shape Layer", "Fill 1"),
    LottieProperty.COLOR,
    LottieValueCallback(Color.BLUE)
)

修改文本

把动画里的文字图层替换成你要的内容:

animationView.addValueCallback(
    KeyPath("Name Layer"),
    LottieProperty.TEXT,
    LottieValueCallback(TextDelegate("Hello World"))
)

// TextDelegate 也可以设置字体、字号、颜色
val delegate = TextDelegate(
    text = "Hello",
    textSize = 24f,
    textColor = Color.RED,
)
animationView.addValueCallback(
    KeyPath("Name Layer"),
    LottieProperty.TEXT,
    LottieValueCallback(delegate)
)

修改不透明度和位置

// 改不透明度(0~100)
animationView.addValueCallback(
    KeyPath("Background"),
    LottieProperty.OPACITY,
    LottieValueCallback(50)
)

// 改位置
animationView.addValueCallback(
    KeyPath("Icon"),
    LottieProperty.TRANSFORM_POSITION,
    LottieValueCallback(PointF(100f, 200f))
)

在 Compose 里使用

LottieAnimation(
    composition = composition,
    progress = { progress },
    modifier = Modifier.size(200.dp),
    // LottieAnimation 不直接支持 ValueCallback,
    // 需要用 composition 的 API
)

// 或者用 updateLottieComposition 扩展
val context = LocalContext.current
val colorFilter = ColorFilter.tint(Color.Green)

// 更简单的方式:直接设置 drawable 的 color filter

使用建议