Lottie Android:为动画添加颜色叠加

Question

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

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

Answer 1

更新02/07/2018

Lottie图书馆现在可以不同地处理不断变化的颜色

要应用滤色器,您现在需要三件事:

1. KeyPath(您要编辑的内容的名称)
2. LottieProperty(您要编辑的房产名称)
3. LottieValueCallback(回调调用每个动画重新渲染)

以下代码使用通配符作为键路径并完全为动画着色:

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

您可以在官方文档中阅读所有相关内容.

老答案:

您可以向或添加ColorFilter.这是一个将动画颜色更改为红色的示例.__CODE____CODE__

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

图层名称可以通过标签"nm"在动画的JSON中找到.

以下是代码片段结果的视觉效果:

原版的:

覆盖:

图层叠加:

Answer 2

根据主要答案，在 lottie 的来源中找到（感谢 @ 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);

科特林

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

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 3

作曲+洛蒂

@Composable
fun LottieAnimation(isPlaying: Boolean = false) {
    val composition by rememberLottieComposition(LottieCompositionSpec.Asset(LOTTIE_FILE_NAME))
    val progress by animateLottieCompositionAsState(
        composition,
        iterations = LottieConstants.IterateForever,
        isPlaying = isPlaying,
    )
    val dynamicProperties = rememberLottieDynamicProperties(
        rememberLottieDynamicProperty(
            property = LottieProperty.COLOR_FILTER,
            value = SimpleColorFilter(MaterialTheme.colors.primary.toArgb()),
            keyPath = arrayOf("**")
        ),
    )
    LottieAnimation(
        composition = composition,
        progress = { progress },
        dynamicProperties = dynamicProperties,
    )
}