Lottie动画JSON找不到颜色

Question

所以，我有以下json（它是Lottie的动画）。我正在尝试找到动画本身颜色所在的位置，但我找不到。真正赞赏任何帮助！要在浏览器中查看动画，请单击此处。 它的JSON如下，我无法发布格式化的JSON，因为StackOverflow的字符限制是30k：

{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"flip","ip":0,"st":0,"ind":4,"hix":2,"ks":{"o":{"a":1,"k":[{"t":0,"s":[0],"e":[0],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"t":11,"s":[0],"e":[100],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":12}]},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[13,13,0]},"p":{"s":true,"x":{"a":1,"k":[{"t":0,"s":[13.000000000000002],"e":[13],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":25}]},"y":{"a":1,"k":[{"t":0,"s":[13],"e":[13],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":25}]}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[100,100]}},"shapes":[{"ty":"gr","nm":"flip shape group","it":[{"ty":"sh","ks":{"a":1,"k":[{"t":0,"s":[{"c":true,"v":[[16.305638023935934,16.791295705480064],[9.69337294159993,10.082096893728064],[0,0],[26,26]],"i":[[0,0],[2.665677558939981,2.6058615175920092],[0,0],[0,0]],"o":[[-2.993586435256004,-3.150346206019975],[0,0],[0,0],[0,0]]}],"e":[{"c":true,"v":[[16.305638023935934,16.791295705480064],[9.69337294159993,10.082096893728064],[0,0],[26,26]],"i":[[0,0],[2.665677558939981,2.6058615175920092],[0,0],[0,0]],"o":[[-2.993586435256004,-3.150346206019975],[0,0],[0,0],[0,0]]}],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"t":12,"s":[{"c":true,"v":[[16.305638023935934,16.791295705480064],[9.69337294159993,10.082096893728064],[0,0],[26,26]],"i":[[0,0],[2.665677558939981,2.6058615175920092],[0,0],[0,0]],"o":[[-2.993586435256004,-3.150346206019975],[0,0],[0,0],[0,0]]}],"e":[{"c":true,"v":[[7,26],[0,19],[0,0],[26,26]],"i":[[0,0],[0,3.8659999999999997],[0,0],[0,0]],"o":[[-3.86599,0],[0,0],[0,0],[0,0]]}],"i":{"x":[0.22],"y":[1]},"o":{"x":[0.19],"y":[1]}},{"t":25}]}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[0.2235294117647059,0.5137254901960784,0.8627450980392157,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}}]}],"op":25},{"ty":4,"nm":"non-flipped","ip":0,"st":0,"ind":2,"hix":1,"ks":{"o":{"a":1,"k":[{"t":0,"s":[100],"e":[100],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"t":10,"s":[100],"e":[0],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":12}]},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[13,13,0]},"p":{"s":true,"x":{"a":1,"k":[{"t":0,"s":[13],"e":[13],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":25}]},"y":{"a":1,"k":[{"t":0,"s":[12.999999999999998],"e":[13],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":25}]}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[100,100]}},"shapes":[{"ty":"gr","nm":"non-flipped shape group","it":[{"ty":"sh","ks":{"a":1,"k":[{"t":0,"s":[{"c":true,"v":[[19,0],[26,7],[26,26],[0,0]],"i":[[0,0],[0,-3.86599],[0,0],[0,0]],"o":[[3.8659999999999997,0],[0,0],[0,0],[0,0]]}],"e":[{"c":true,"v":[[9.909566681238312,9.824443462512633],[19.224521749991286,19.02647389376546],[26,26],[0,0]],"i":[[-2.145568112502759,-2.2020304312528305],[-3.287074506362524,-3.2999372823432562],[0,0],[0,0]],"o":[[2.255829134412066,2.3821960695170787],[0,0],[0,0],[0,0]]}],"i":{"x":[0.675],"y":[0.19]},"o":{"x":[0.55],"y":[0.055]}},{"t":12}]}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[0.9058823529411765,0.8901960784313725,0.8745098039215686,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}}]}],"op":25},{"ty":4,"nm":"back","ip":0,"st":0,"ind":1,"hix":3,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[13,13,0]},"p":{"s":true,"x":{"a":0,"k":13},"y":{"a":0,"k":13}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[100,100,100]}},"shapes":[{"ty":"gr","nm":"back shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[0,26],[26,26],[0,0]],"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]]}}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[0.9058823529411765,0.8901960784313725,0.8745098039215686,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}}]}],"op":25}],"op":25,"w":26,"h":26}

- r00t -

---

这些颜色已经被分配给SVG了，不是在JSON中。如果你想要那个蓝色，在主g的第3个g的路径填充中可以找到！（rgb(57,131,220)） - Stuart

@Stuart 抱歉，我没太明白，主要 g 中的第三个 g 是指哪一个？ - r00t -

我还没有发布任何SVG文件，只有一个JSON文件，你是指制作一个SVG并填充它吗，@Stuart？ - r00t -

我跟随您的链接，您想要更改的蓝色颜色设置在SVG中... - Stuart

Answer 1

在 @Mikayel Saghyan 的回答之后，我找到了如何更改颜色的方法。我使用了 this 动画，并将黄色改成了红色。只需要找到目标颜色的 RGB 数值。255、203、33 是我的情况下的黄色。例如计算 203/255 的结果为 0.79607843137。在 Android Studio 的文件中搜索该数字。您将看到颜色写在哪里。之后，用所需颜色的除法结果除以 255 更改数字。255、82、82 是我想要的颜色，这是结果:

- CanerGures

---

谢谢，数字计算帮助我编写出了以下代码。 - kyr0

Answer 2

你可以使用 lottie-colorify 库从代码中获取颜色或更改颜色。

颜色本身以 [r, g, b] 格式存储在 obj.c.k 中的数组中，但这些颜色以 color/255 的格式表示，因此你将在 0-1 范围内获取每个颜色的数组。

例如，[255, 255, 255] 在 Lottie JSON 中变为 [1, 1, 1]。

- Mikayel Saghyan

Answer 3

Mikayel 的解决方案非常有效。

您也可以像这样针对您想要更改的路径进行定位：

svg {
  path[fill="rgb(0,51,161)"] {
    fill: red;      
  }
}

- Giovanni Di Maggio

Answer 4

在你的 JSON 文件中搜索 "fl"，并尝试通过将所选颜色的每个 RGB 值除以 255 来更改值 "fl" 下的 k 值。

- lakjeewa Wijebandara

---

不确定为什么这个被踩了，这是完全正确的。虽然有4个值：[红色，绿色，蓝色，透明度]。所有值都在0-1之间标准化，所以除以255是正确的。Lottie只允许使用他们的编辑器进行10次上传编辑。如果你已经超过了这个限制，觉得每年240美元有点贵，这就是如何直接编辑Lottie的json文件颜色的方法。 - undefined

这对我有效 - undefined

Answer 5

今天我也遇到了这个问题。我不知道为什么我们需要一个24k的npm库，比如“lottie-colorify”来解决它（顺便说一句：它对我没用，而且还会引入其他依赖）。只需要按照以下方式处理即可：

    import { Lottie, unwrapJsonModule } from 'react-lottie-v2';

    // your Lottie JSON object (deserialized and unwrapped) is "animation"    
    const animation = unwrapJsonModule(animationJSON);

    // in case we're dealing with a HEX color as a string like #ffffff
    // we need to transform it into numeric, decimal rgb
    const rgbPrimaryColor = hexToRgb('#ffffff');
    

    // if you've got numeric, decimal rgb values like [255, 255, 255] already, we need to divide by 255 to get a factor value that is Lottie compatible
    const targetColor = {
        r: rgbPrimaryColor.r / 255,
        g: rgbPrimaryColor.g / 255,
        b: rgbPrimaryColor.b / 255,
    }

    if (animation.layers && animation.layers[1]) {
        // ef[0] -> primary color
        // ef[0].ef[0] -> data vector for effective values
        animation.layers[1].ef[0].ef[0].v.k = [targetColor.r, targetColor.g, targetColor.b];

        // ef[1] -> secondary color
        // ef[1].ef[0] -> data vector for effective values
        animation.layers[1].ef[1].ef[0].v.k = [targetColor.r, targetColor.g, targetColor.b];
    }

现在你可以将animation作为animationData使用。在React中像这样:

<Lottie
    animationData={animation}
     {...props}
/>

在第二层中定义了更多的颜色（索引：1）。您可以在那里进行各种更改。只需记录：

console.log(animation.layers[1])

深入数据模型。

手头上的hexToRgb函数：

    export const hexToRgb = (hexColor: string) => {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }

- kyr0

Answer 6

您可以使用 Lottie 编辑器来编辑 Lottie json 文件。

Lottie 编辑器

- CharlyKeleb