如何将 ColorFilter 与 React-Native-Lottie 一起使用？答案

【问题标题】：How do I use ColorFilter with React-Native-Lottie?如何将 ColorFilter 与 React-Native-Lottie 一起使用？
【发布时间】：2020-04-29 11:21:29
【问题描述】：

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

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

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

【问题讨论】：

您好，您找到解决方案了吗？
不，还是什么都没有
我找到了解决办法，现在贴出来，希望对你有帮助

标签： react-native expo lottie bodymovin

【解决方案1】：

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


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

在渲染部分使用 LottieView 和 import 而不是 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，它不是很清楚，但通过一些试验和错误你可以理解结构。

【讨论】：

谢谢。是的，我想这会奏效。可惜没有更简单的方法了。
不幸的是，我认为这就是方式。所以我做了一个工具来帮忙——colorize-react-native-lottie.netlify.app
@Noitidart 这是迄今为止我见过的最好的东西（考虑到图层的名称有时多么奇怪）！非常感谢！！！
谢谢@denistepp！

【解决方案2】：

这是一个悬而未决的问题，我已经打开了一个问题 here 并将与开发人员合作，希望能解决这个问题。这可能是目前 React Native 采用的最大瓶颈。

【讨论】：

【解决方案3】：

尝试使用 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 },
                ]}
            />

【讨论】：