如何将ColorFilter与结合使用？

Question

我似乎无法让colorFilter支柱与我的.json文件一起工作。没有错误，但颜色显然没有变化。

<LottieView
     style={{
         width: 90,
         height: 90,
     }}
     colorFilters={
       [
         {
         keypath: "asdf",
         color: "#abcdef",
         }
       ]
     }
     source={badge.icon}
     loop={false}
/>

我正在使用.json从事后效果导入BodyMovin，但我是否正确地更改了层名？如果不是的话，这究竟为什么不起作用呢？

​

Answer 1

我无法让colorFilters工作，但您可以尝试执行以下操作：

import myAnimation from "./../img/myAnimation.json";

在呈现部分中，将LottieView与导入一起使用，而不是在需要内联时使用

<LottieView        
  //source={require("./../img/radius.json")}
  source={myAnimation}
/>

现在您可以直接从json对象操作属性，例如，这里我根据实际颜色(从黑色到白色或从白色到黑色)操作颜色。

myAnimation.layers[1].shapes[0].it[1].c.k = myAnimation.layers[1].shapes[0].it[1].c.k[0] == 0 ?  [1,1,1,1] : [0,0,0,1];

要找出您需要的属性，请检查json，它不是很清楚，但通过一些尝试和错误，您可以了解结构。

Answer 2

试着反应本土化，这对我来说很好

    <LottieView
                style={style.heartLootie}
                source={require("../../assets/animations/favorite_animation.json")}
                progress={animationProgress}
                colorFilters={[
                    { keypath: "Red Heart", color: themeColors.PRIMARY },
                    { keypath: "Grey Heart", color: themeColors.SECONDARY },
                ]}
            />

Answer 3

这是一个突出的问题，我已经打开了一个问题这里，并将与devs合作，希望解决这个问题。这可能是目前反应本地收养的最大瓶颈。