如何在 Lottie iOS 中使用 png 图像？

Posted 2023-03-16

【中文标题】如何在 Lottie iOS 中使用 png 图像？

【英文标题】：How to use png images with Lottie iOS?

【发布时间】：2017-10-16 20:19:18

【问题描述】：

我尝试使用 bodymovin 导出一个后效文件，该后效文件有一些 png 图像。我们如何在 ios 中将其与 Lottie 一起使用？我们是否将这些图像包含在资产目录中，并将它们与 json 文件一起使用？

【问题讨论】：

有一点需要考虑，如果你坚持使用 SVG，效率会大大提高。我们现在从不在应用程序中使用任何 PNG/JPG。 （当然，实际照片除外。）您创建文件的插图画家或设计师肯定有原件吗？只需让他们将其导出为 svg 并从那里进入 Lottie 管道....就像您现在只需将 PaintCode 用于 iOS（实际上是 android）中的所有图标/等一样，如果您可以避免内部的光栅文件，那将是非常理想的洛蒂也是！

我也很想知道是否可以在库中使用基于 PDF 的矢量图像。我能够相当轻松地渲染 PNG，但还没有弄清楚 PDF/SVG。

【参考方案1】：

您的问题的答案是肯定的。放入您的 JSON 文件并将图像放在资产目录中。我用这个示例 JSON/assets https://www.lottiefiles.com/1187-puppy-run 进行了尝试。需要注意的一点是，在 Xcode 上，当您放置图像资源时，您可能需要将它们移动到 2x。

这是我目前的设置：

【讨论】：

同样的解决方案也适用于 Xamarin Forms！我看了很多地方，直到我最终来到这里！很好的解释！

【参考方案2】：

根据这个函数

https://github.com/airbnb/lottie-ios/blob/973c08da8ccf3dbc171bcd9e8748e6368c5a2107/lottie-ios/Classes/AnimatableLayers/LOTLayerContainer.m#L126

它尝试以不同的方式加载它，包括从资产目录—— 这就是该文件中的第 147 行要做的事情：

  NSArray *components = [asset.imageName componentsSeparatedByString:@"."];
  image = [UIImage imageNamed:components.firstObject inBundle:asset.assetBundle compatibleWithTraitCollection:nil];

【参考方案3】：

您可以将所有图像放在json旁边。

之后你就可以播放动画了：

let animation = LOTAnimationView(name: "LogoAnimation")
animation.play()