20

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

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

4

6 回答 6

45

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

  1. KeyPath（您要编辑的内容的名称）
  2. LottieProperty（您要编辑的属性的名称）
  3. 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);
            }
        }
);

添加单层颜色叠加层（称为“复选标记”的层）：

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

您可以在官方文档中阅读所有相关信息。

您还可以查看此示例存储库

这是代码片段结果的视觉效果：

例子

于 2017-08-10T07:34:42.130 回答
11

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

爪哇

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

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)
}
于 2018-07-19T11:05:41.130 回答
4

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

于 2017-04-12T18:19:02.117 回答
1

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

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

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

于 2018-04-26T19:00:02.823 回答
1

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

YOURS_LottieAnimationView.addValueCallback(
            KeyPath("**"),
            LottieProperty.COLOR_FILTER,
            { PorterDuffColorFilter(Color.parseColor("#b70101"), PorterDuff.Mode.SRC_ATOP) }
        )
于 2021-04-20T10:54:03.290 回答
-2

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

喜欢：

"sc": "#6664e7"
于 2019-07-04T15:56:13.400 回答