如何在 Lottie 中为动画添加颜色叠加？

Question

我正在使用 Lottie for Android 在应用程序中添加一些动画。在此应用程序中，可以通过设置选择主色和强调色。我正在使用具有透明背景的动画。为了使动画适合所选颜色，我想向动画添加颜色叠加层，这样我可以拥有一个动画文件，但我可以通过编程方式设置颜色。

有谁知道如何通过添加颜色叠加来操纵动画？

Answer 1

由于您在设置动画时将包含所有绘图数据的 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 之前在您的字符串上。

Answer 2

要应用滤色器，您现在需要三样东西：

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

下面是代码片段结果的可视化：

Answer 3

我看到了 Guardanis 的回答并阐述了一种安全的方法来找到包含 Lottie 动画的 JSON 中的颜色：

搜索 - "c":{"a" - 您会在图像的每一层找到这样的片段：{"ty":"fl","c":{"a":0,"k":[0.4,0.4,0.4,0.4]}

在片段中，您会注意到 "c" 表示颜色，"a" 表示 ALPHA，"k" 是图层颜色的 CMYK。只需将其更改为您想要的那个即可。

Answer 4

在 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)
}

Answer 5

如果您的 JSON 有一个 sc: 字段，那么您应该可以直接设置十六进制颜色

喜欢：

"sc": "#6664e7"

Answer 6

在 Kotlin(v1.4.32) 中，要在所有层中设置完整动画，只需执行以下操作：

YOURS_LottieAnimationView.addValueCallback(
            KeyPath("**"),
            LottieProperty.COLOR_FILTER,
            { PorterDuffColorFilter(Color.parseColor("#b70101"), PorterDuff.Mode.SRC_ATOP) }
        )

如何在 Lottie 中为动画添加颜色叠加？

How to add a color overlay to an animation in Lottie?

android

animation

lottie

Java

科特林

Kotlin 扩展