Lottie Animation JSON 找不到颜色答案

【问题标题】：Lottie Animation JSON cannot find the colorLottie Animation JSON 找不到颜色
【发布时间】：2019-12-17 18:48:09
【问题描述】：

所以，我有以下 json（它是 Lottie 的动画）。我试图找到动画本身的颜色所在的位置，但我找不到。任何帮助将不胜感激！要在浏览器中查看动画，请单击here。它的 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}

【问题讨论】：

是 SVG 被分配了这些颜色，它们不在那个 JSON 中。如果你在那个蓝色之后，它在主 g 中第三个 g 的路径填充中！... (rgb(57,131,220))
@Stuart 抱歉，我不太明白，主 g 中的第三个 g？
我没有发布任何 SVG，只有一个 JSON，你的意思是制作一个 SVG 并填充它@Stuart？
我关注了您的链接，您要更改的蓝色已在 SVG 中设置...

标签： javascript json lottie

【解决方案1】：

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

颜色本身以 [r, g, b] 格式保存在 obj.c.k 的数组中，但是这些颜色是 color/255 格式，因此您将获得 0-1 范围内的数组的每种颜色。

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

【讨论】：

【解决方案2】：

在@Mikayel Saghyan 的回答之后，我想出了如何改变颜色。我使用this 动画并将黄色更改为红色。只需找到目标颜色的 RGB 数字即可。 255、203、33 是我机箱上的黄色。计算颜色/255，例如 203/255 是 0.79607843137。在 android studio 的文件中搜索该号码。你会看到颜色写在哪里。之后将所需颜色除法结果的数字更改为 255。255、82、82 是我想要的颜色，结果如下：

【讨论】：

谢谢，数字计算帮助我在下面找到了我的代码

【解决方案3】：

我今天也碰到了这个。我不知道为什么我们需要像lottie-colorify 这样的 24k npm 库来解决它（旁注：它对我不起作用，它挖了一个依赖兔子洞）。就这样做吧：


    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。在反应中：

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

第 2 层定义了更多颜色（索引：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;
    }

【讨论】：

【解决方案4】：

Mikayel 解决方案效果很好。

你也可以像这样定位你想要改变的路径：

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

【讨论】：

【解决方案5】：

您可以在 Lottie 编辑器的帮助下编辑 Lottie json 文件

lottie editor

【讨论】：