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

Question

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

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

Answer 1

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

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

添加单层颜色叠加层(称为“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

下面是代码 fragment 结果的可视化: