android 如何在Lottie中为动画添加颜色覆盖?

xcitsw88  于 2022-11-03  发布在  Android
关注(0)|答案(7)|浏览(545)

我正在使用Lottie for Android在一个应用程序中添加一些动画。在这个应用程序中,主颜色和强调颜色可以通过设置来选择。我正在使用一个带有透明背景的动画。为了使动画适合所选的颜色,我想在动画中添加一个颜色叠加,这样我就可以有一个动画文件,但我可以通过编程来设置颜色。
有人知道我如何通过添加颜色覆盖来操纵动画吗?

bq3bfh9z

bq3bfh9z1#

要应用颜色过滤器,您需要三件东西:

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

你可以在官方文件中读到所有关于它的内容。
您也可以查看此sample repository
下面是代码片段的结果:

laximzn5

laximzn52#

根据主要答案(感谢@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);

Kotlin

首先,获得您的颜色,例如:

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

i34xakig3#

由于在设置动画时要将包含所有绘图数据的JSONObject传递给Lottie,因此可以在设置之前将一些颜色值替换为所需的颜色值。
如果您查找颜色键c,您可能会找到类似于
...,"c":{"k":[1,0.7,0,1]},"fillEnabled":true,...
其中更改JSONArray中的那些浮点值将更改动画中的颜色。
当然,我并不是说查找/替换正确的值太琐碎,但这至少应该为您指明方向。
作为旁注:一旦找到它,就可以将资产中的值设置为某种合适的占位符,如"k":[ BG_COLOR_REPLACEMENT_1 ],然后在加载资产时,只需在创建JSONObject并将其传递给Lottie之前对String运行.replace("BG_COLOR_REPLACEMENT_1", "1,0.7,1,1");即可。

ua4mk5z4

ua4mk5z44#

我看到了瓜尔达尼斯的回答,并详细说明了一种安全的方法来查找包含Lottie动画的JSON中的颜色:
搜索-“c”:{“a”-,您将在图像的每一层中找到如下片段:{“ty”:“fl”,“c”:{“a”:0,“k”:[0.4,0.4,0.4,0.4]}
在这个片段中,你会注意到“c”代表颜色,“a”代表阿尔法,“k”代表图层的CMYK颜色。只要把它改成你想要的颜色就可以了。

o7jaxewo

o7jaxewo5#

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

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

ojsjcaue6#

作曲+洛蒂

@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,
    )
}
xxb16uws

xxb16uws7#

如果您的JSON有一个sc:字段,那么您应该能够直接设置十六进制颜色
例如:

"sc": "#6664e7"

相关问题