如何将 ColorFilter 与 React-Native-Lottie 一起使用?

How do I use ColorFilter with React-Native-Lottie?

我似乎无法让 colorFilter 道具与我的 .json 文件一起使用。 没有错误,但颜色明显没有变化。

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

我正在使用 BodyMovin 从 After Effects 导入 .json 但我是否正确更改了图层名称?如果不是,为什么这不起作用?

我无法使用 colorFilters,但您可以尝试执行以下操作:


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

在渲染部分使用 LottieView 导入而不是 require 内联

<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,它不是很清楚,但通过反复试验您可以理解结构。

这是一个悬而未决的问题,我已经提出了一个问题 here 并将与开发人员合作以期解决此问题。这可能是目前采用 React Native 的最大瓶颈。

尝试使用 React Native,它对我来说很好用

    <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 },
                ]}
            />