Question

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

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

Answer 1

要应用滤色镜，您现在需要做三件事：

KeyPath（您要编辑的内容的名称）
LottieProperty（您想要编辑的物业名称）
LottieValueCallback（为每个动画重新渲染调用回调）

图层名称可以在动画的JSON中通过标记“nm＆＃39;”找到。

添加全彩色叠加层：

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

添加单层颜色叠加层（称为＆＃34;复选标记＆＃34;层）：

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

以下是代码段结果的直观视觉效果：

Example

Answer 2

根据主要答案在彩票来源中找到（感谢@ SolveSoul ）。

首先，获取您的颜色，例如：

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);

应该工作。

Answer 3

由于您在设置动画时将包含所有绘图数据的JSONObject传递给Lottie，因此您可以在设置之前将一些颜色值替换为所需颜色值。

如果您查找颜色键c，您可能会找到类似

的颜色

...,"c":{"k":[1,0.7,0,1]},"fillEnabled":true,...

在JSONArray中更改这些浮点值会改变动画中的颜色。

当然，我并不是说找到/替换正确的值会太微不足道，但这至少应该指向那个方向。

作为旁注：一旦找到它，您可以将资产中的值设置为某种好的占位符，例如"k":[ BG_COLOR_REPLACEMENT_1 ]，然后在加载资产时，只需在字符串上运行.replace("BG_COLOR_REPLACEMENT_1", "1,0.7,1,1");在创建JSONObject并将其传递给Lottie之前。

Answer 4

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

搜索 - ＆＃34; c＆＃34;：{＆＃34; a＆＃34; - 您会在每个图像层找到这样的片段：{＆＃34 ; TY＆＃34;：＆＃34; FL＆＃34;＆＃34; C＆＃34; {＆＃34;＆＃34;：0，＆＃34; K＆＃34;：[0.4,0.4， 0.4,0.4]}

在片段中你会注意到＆＃34; c＆＃34;意味着色彩，＆＃34; a＆＃34;是指ALPHA和＆＃34; k＆＃34;是图层颜色的CMYK。只需将其更改为您想要的那个。

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 Android：为动画添加颜色叠加

6 个答案: