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

问题描述 投票:0回答:1

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

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

这就是它应该的样子:

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

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

flutter flutter-animation lottie android-lottie
1个回答
0
投票

对于每个面临类似问题的人来说,它已经在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。

© www.soinside.com 2019 - 2024. All rights reserved.