运行时修改动效属性——动态颜色与文本
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
使用建议
- 优先用 dotLottie + Motion Tokens(如果你的动画是 dotLottie 格式)——比 ValueCallback 更优雅、类型安全。
- ValueCallback 会在每一帧被调用,如果回调里做了复杂计算会影响性能。
- 用完记得用
removeValueCallback(keyPath, property)移除——特别是在 RecyclerView 里。