如何在 Lottie 中为动画添加颜色叠加?
How to add a color overlay to an animation in Lottie?
我正在使用 Lottie for Android 在应用程序中添加一些动画。在此应用程序中,可以通过设置选择主色和强调色。我正在使用具有透明背景的动画。为了使动画适合所选颜色,我想向动画添加颜色叠加层,这样我可以拥有一个动画文件,但我可以通过编程方式设置颜色。
有谁知道如何通过添加颜色叠加来操纵动画?
由于您在设置动画时将包含所有绘图数据的 JSONObject 传递给 Lottie,因此您可以在设置之前将一些颜色值替换为您想要的值。
如果您查找颜色键 c
,您可能会找到类似
的内容
...,"c":{"k":[1,0.7,0,1]},"fillEnabled":true,...
更改 JSONArray 中的那些浮点值会更改动画中的颜色。
当然,我并不是说 find/replace 正确的值太微不足道了,但这至少应该为您指出那个方向。
附带说明:找到它后,您可以将资产中的值设置为某种不错的占位符,例如 "k":[ BG_COLOR_REPLACEMENT_1 ]
,然后在加载资产时,只需 运行 .replace("BG_COLOR_REPLACEMENT_1", "1,0.7,1,1");
在创建 JSONObject 并将其传递给 Lottie 之前在您的字符串上。
要应用滤色器,您现在需要三样东西:
- KeyPath(您要编辑的内容的名称)
- LottieProperty(您要编辑的 属性 的名称)
- LottieValueCallback(为每次动画重新渲染调用的回调)
层名可以在动画的JSON中通过标签'nm'找到。
添加全色叠加层:
LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.addValueCallback(
new KeyPath("**"),
LottieProperty.COLOR_FILTER,
new SimpleLottieValueCallback<ColorFilter>() {
@Override
public ColorFilter getValue(LottieFrameInfo<ColorFilter> frameInfo) {
return new PorterDuffColorFilter(Color.GREEN, PorterDuff.Mode.SRC_ATOP);
}
}
);
添加单层颜色叠加(层名为 "checkmark"):
LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.addValueCallback(
new KeyPath("checkmark", "**"),
LottieProperty.COLOR_FILTER,
new SimpleLottieValueCallback<ColorFilter>() {
@Override
public ColorFilter getValue(LottieFrameInfo<ColorFilter> frameInfo) {
return new PorterDuffColorFilter(Color.CYAN, PorterDuff.Mode.SRC_ATOP);
}
}
);
删除所有颜色叠加层:
LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.addValueCallback(new KeyPath("**"), LottieProperty.COLOR_FILTER,
new SimpleLottieValueCallback<ColorFilter>() {
@Override
public ColorFilter getValue(LottieFrameInfo<ColorFilter> frameInfo) {
return null;
}
}
);
您可以在 the official documentation 中阅读所有相关信息。
你也可以看看这个sample repository
下面是代码片段结果的可视化:
我看到了 Guardanis 的回答并阐述了一种安全的方法来找到包含 Lottie 动画的 JSON 中的颜色:
搜索 - "c":{"a" - 您会在图像的每一层找到这样的片段:{"ty":"fl","c":{"a":0,"k":[0.4,0.4,0.4,0.4]}
在片段中,您会注意到 "c" 表示颜色,"a" 表示 ALPHA,"k" 是图层颜色的 CMYK。只需将其更改为您想要的那个即可。
在 lottie 的来源中找到,基于主要答案(感谢@SolveSoul)。
Java
首先,得到你的颜色,例如:
int yourColor = ContextCompat.getColor(getContext(),R.color.colorPrimary);
然后像这样设置滤色器:
SimpleColorFilter filter = new SimpleColorFilter(yourColor);
KeyPath keyPath = new KeyPath("**");
LottieValueCallback<ColorFilter> callback = new LottieValueCallback<ColorFilter>(filter);
animationView.addValueCallback(keyPath, LottieProperty.COLOR_FILTER, callback);
科特林
首先,得到你的颜色,例如:
val yourColor = ContextCompat.getColor(context, R.color.colorPrimary)
然后像这样设置滤色器:
val filter = SimpleColorFilter(yourColor)
val keyPath = KeyPath("**")
val callback: LottieValueCallback<ColorFilter> = LottieValueCallback(filter)
animationView.addValueCallback(keyPath, LottieProperty.COLOR_FILTER, callback)
Kotlin 扩展
fun LottieAnimationView.changeLayersColor(
@ColorRes colorRes: Int
) {
val color = ContextCompat.getColor(context, colorRes)
val filter = SimpleColorFilter(color)
val keyPath = KeyPath("**")
val callback: LottieValueCallback<ColorFilter> = LottieValueCallback(filter)
addValueCallback(keyPath, LottieProperty.COLOR_FILTER, callback)
}
如果您的 JSON 有一个 sc:
字段,那么您应该可以直接设置十六进制颜色
喜欢:
"sc": "#6664e7"
在 Kotlin(v1.4.32) 中,要在所有层中设置完整动画,只需执行以下操作:
YOURS_LottieAnimationView.addValueCallback(
KeyPath("**"),
LottieProperty.COLOR_FILTER,
{ PorterDuffColorFilter(Color.parseColor("#b70101"), PorterDuff.Mode.SRC_ATOP) }
)
我正在使用 Lottie for Android 在应用程序中添加一些动画。在此应用程序中,可以通过设置选择主色和强调色。我正在使用具有透明背景的动画。为了使动画适合所选颜色,我想向动画添加颜色叠加层,这样我可以拥有一个动画文件,但我可以通过编程方式设置颜色。
有谁知道如何通过添加颜色叠加来操纵动画?
由于您在设置动画时将包含所有绘图数据的 JSONObject 传递给 Lottie,因此您可以在设置之前将一些颜色值替换为您想要的值。
如果您查找颜色键 c
,您可能会找到类似
...,"c":{"k":[1,0.7,0,1]},"fillEnabled":true,...
更改 JSONArray 中的那些浮点值会更改动画中的颜色。
当然,我并不是说 find/replace 正确的值太微不足道了,但这至少应该为您指出那个方向。
附带说明:找到它后,您可以将资产中的值设置为某种不错的占位符,例如 "k":[ BG_COLOR_REPLACEMENT_1 ]
,然后在加载资产时,只需 运行 .replace("BG_COLOR_REPLACEMENT_1", "1,0.7,1,1");
在创建 JSONObject 并将其传递给 Lottie 之前在您的字符串上。
要应用滤色器,您现在需要三样东西:
- KeyPath(您要编辑的内容的名称)
- LottieProperty(您要编辑的 属性 的名称)
- LottieValueCallback(为每次动画重新渲染调用的回调)
层名可以在动画的JSON中通过标签'nm'找到。
添加全色叠加层:
LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.addValueCallback(
new KeyPath("**"),
LottieProperty.COLOR_FILTER,
new SimpleLottieValueCallback<ColorFilter>() {
@Override
public ColorFilter getValue(LottieFrameInfo<ColorFilter> frameInfo) {
return new PorterDuffColorFilter(Color.GREEN, PorterDuff.Mode.SRC_ATOP);
}
}
);
添加单层颜色叠加(层名为 "checkmark"):
LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.addValueCallback(
new KeyPath("checkmark", "**"),
LottieProperty.COLOR_FILTER,
new SimpleLottieValueCallback<ColorFilter>() {
@Override
public ColorFilter getValue(LottieFrameInfo<ColorFilter> frameInfo) {
return new PorterDuffColorFilter(Color.CYAN, PorterDuff.Mode.SRC_ATOP);
}
}
);
删除所有颜色叠加层:
LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.addValueCallback(new KeyPath("**"), LottieProperty.COLOR_FILTER,
new SimpleLottieValueCallback<ColorFilter>() {
@Override
public ColorFilter getValue(LottieFrameInfo<ColorFilter> frameInfo) {
return null;
}
}
);
您可以在 the official documentation 中阅读所有相关信息。
你也可以看看这个sample repository
下面是代码片段结果的可视化:
我看到了 Guardanis 的回答并阐述了一种安全的方法来找到包含 Lottie 动画的 JSON 中的颜色:
搜索 - "c":{"a" - 您会在图像的每一层找到这样的片段:{"ty":"fl","c":{"a":0,"k":[0.4,0.4,0.4,0.4]}
在片段中,您会注意到 "c" 表示颜色,"a" 表示 ALPHA,"k" 是图层颜色的 CMYK。只需将其更改为您想要的那个即可。
在 lottie 的来源中找到,基于主要答案(感谢@SolveSoul)。
Java
首先,得到你的颜色,例如:
int yourColor = ContextCompat.getColor(getContext(),R.color.colorPrimary);
然后像这样设置滤色器:
SimpleColorFilter filter = new SimpleColorFilter(yourColor);
KeyPath keyPath = new KeyPath("**");
LottieValueCallback<ColorFilter> callback = new LottieValueCallback<ColorFilter>(filter);
animationView.addValueCallback(keyPath, LottieProperty.COLOR_FILTER, callback);
科特林
首先,得到你的颜色,例如:
val yourColor = ContextCompat.getColor(context, R.color.colorPrimary)
然后像这样设置滤色器:
val filter = SimpleColorFilter(yourColor)
val keyPath = KeyPath("**")
val callback: LottieValueCallback<ColorFilter> = LottieValueCallback(filter)
animationView.addValueCallback(keyPath, LottieProperty.COLOR_FILTER, callback)
Kotlin 扩展
fun LottieAnimationView.changeLayersColor(
@ColorRes colorRes: Int
) {
val color = ContextCompat.getColor(context, colorRes)
val filter = SimpleColorFilter(color)
val keyPath = KeyPath("**")
val callback: LottieValueCallback<ColorFilter> = LottieValueCallback(filter)
addValueCallback(keyPath, LottieProperty.COLOR_FILTER, callback)
}
如果您的 JSON 有一个 sc:
字段,那么您应该可以直接设置十六进制颜色
喜欢:
"sc": "#6664e7"
在 Kotlin(v1.4.32) 中,要在所有层中设置完整动画,只需执行以下操作:
YOURS_LottieAnimationView.addValueCallback(
KeyPath("**"),
LottieProperty.COLOR_FILTER,
{ PorterDuffColorFilter(Color.parseColor("#b70101"), PorterDuff.Mode.SRC_ATOP) }
)