Lottie Animation JSON找不到颜色

neekobn8 于 2023-05-08 发布在其他

关注(0)|答案(6)|浏览(279)

因此，我有以下json（它是Lottie的动画）。我试图找到动画本身的颜色，我找不到它。任何帮助都将是真正的赞赏！要在浏览器中查看动画，请单击here。它的JSON是这样的，我不能发布美化的JSON，因为StackOverflow的字符限制是30 k：

{"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}

JSON

来源：https://stackoverflow.com/questions/59380353/lottie-animation-json-cannot-find-the-color

6条答案

按热度按时间

nle07wnf1#

@Mikayel Saghyan的回答之后，我想出了如何改变颜色。我用这个动画，我改变了黄色的红色。只要找到你的目标颜色的RGB数字。255，203，33是我箱子上的黄色。计算颜色/255，例如203/255为0.79607843137。在android studio的文件中搜索该号码。你会看到颜色写在哪里。之后，用255改变具有所需颜色划分结果的数字。255，82，82是我想要的颜色，这是结果：

赞(0）回复(0）举报 2023-05-08

p8h8hvxi2#

您可以使用lottie-colorify库来获取颜色或从代码中更改它们。
颜色本身保存在obj.c.k中的数组中，格式为[r，g，B]，但这些是color/255格式，因此您将获得0-1范围内的数组中的每种颜色。
例如，[255，255，255]在Lottie JSON中变成了[1，1，1]。

赞(0）回复(0）举报 2023-05-08

s4n0splo3#

Mikayel解决方案效果很好。
您也可以像这样定位要更改的路径：

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

赞(0）回复(0）举报 2023-05-08

k4ymrczo4#

我今天也碰到了这个。我不知道为什么我们需要像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。在React中：

<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;
    }

赞(0）回复(0）举报 2023-05-08

fkvaft9z5#

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

赞(0）回复(0）举报 2023-05-08

wrrgggsh6#

在你的json文件中搜索“fl”，并尝试通过将你选择的颜色的每个rgb值除以255来改变值“fl”下的k值

赞(0）回复(0）举报 2023-05-08