Lottie 文件在 flutter 中无法正确显示/渲染

Question

在 flutter 上使用 Lottie 文件时，它似乎改变了它的外观。

Container(
  child: Lottie.asset('assets/animations/location_lottie.json'),
)

这就是它应该的样子：

这就是应用程序中的结果：

尝试降级lottie，尝试使用不同的文件，但只是这样..

Answer 1

对于每个面临类似问题的人来说，它已经在github中提出了，问题基本上是由于lottie文件的渲染问题而发生的。当您为lottie 文件选择自定义颜色时，就会出现渲染问题。

所以，我刚刚找到了解决该问题的临时解决方法，只要您使用自定义颜色的 JSON 文件，基本上就会出现该问题。相反，请下载原始文件，然后手动编辑 JSON 文件以更改颜色。

如何编辑：

在lottie 文件中，这是lottie 文件中颜色的结构方式：

{
"ty": "fl",
"nm": "Fill",
"o": {
    "a": 0,
    "k": 100
},
"c": {
    "a": 0,
    "k": [
        0.710,
        0.192,
        0.278
    ]
},
"r": 1

• 因此，在代码编辑器中打开 json，并在每个形状组的“形状”部分中找到“填充”对象。这些对象定义每个形状的填充颜色。

• 在每个“填充”对象中，找到代表颜色的“c”属性。它将是一个 RGB 值数组，表示为 0 到 1 之间的分数。

• 修改 RGB 值以更改颜色。例如，如果要将颜色更改为红色，可以将 RGB 值设置为 [1, 0, 0]。如果你想把它变成蓝色，你可以将 RGB 值设置为 [0, 0, 1]。

• 如果您注意到 rgb 的值将是所有小于的值，那么要获得颜色，例如：- RGB(207, 248, 11, 1)，您必须将每个值除以 255： R: 207 / 255 ≈ 0.8118 重力加速度：248 / 255 ≈ 0.9725 B: 11 / 255 ≈ 0.0431

• 您必须将其应用到您想要更改的每种颜色，然后只需使用该文件即可。

上述步骤实际上对我有用，感谢 gpt 分解了 json。