Lottie (文档)

https://airbnb.fullstack.org.cn/lottie 的 Lottie 文档
2,876
作者Lottie 团队

Lottie 文档

Lottie 是一个适用于 Android、iOS、Web 和 Windows 的库，它可以解析使用 Adobe After Effects 导出为 json 格式（通过 Bodymovin）的动画，并在移动端和 Web 端原生渲染它们！

这是第一次，设计师可以**创建和交付**精美的动画，而无需工程师费力地手动重新创建它们。俗话说，一图胜千言，这里有 13000 字的说明。

Lottie Logo animation

Example1

Example2

Example3

Example4

所有这些动画都是在 After Effects 中创建的，使用 Bodymovin 导出，并以原生方式渲染，无需额外的工程工作。

Bodymovin 是 Hernan Torrisi 创建的一个 After Effects 插件，它可以将 After Effects 文件导出为 json 格式，并包含一个 JavaScript 网页播放器。我们在他的优秀作品基础上进行了扩展，使其能够用于 Android、iOS、React Native 和 Windows。

在我们的博客文章中了解更多信息，或通过 GitHub 或 lottie@airbnb.com 与我们联系。

其他平台

示例应用

您可以自己构建 Android 示例应用，也可以从 Play 商店 下载。示例应用包含一些内置动画，还可以让您从内部存储或 URL 加载动画。

对于 Windows，您可以获取 Lottie 查看器应用 来预览 Lottie 动画和代码生成类，以及 Lottie 示例应用 来开始使用代码示例和简单的教程。

使用 Lottie 发布产品？

请发送邮件至 lottie@airbnb.com，我们将很快创建一个包含来自世界各地 Lottie 真实用例的案例和使用说明页面。我们还有一个内部回归测试库，可以用来防止您的动画出现回归问题。

替代方案

  1. 手动构建动画。手动构建动画需要在 Android 和 iOS 上投入大量的设计和工程时间。通常很难甚至无法证明花费这么多时间来正确制作动画是合理的。
  2. Facebook Keyframes。Keyframes 是 Facebook 为其反应式设计构建的一个很棒的新库。但是，Keyframes 不支持 Lottie 的一些功能，例如蒙版、遮罩、修剪路径、虚线图案等等。
  3. Gif。Gif 的大小是 Bodymovin JSON 的两倍多，并且以固定的尺寸渲染，无法缩放以匹配大型和高密度屏幕。
  4. Png 序列。Png 序列比 Gif 更差，因为它们的文件大小通常是 Bodymovin json 的 30-50 倍，而且也无法缩放。
  5. 动画矢量可绘制对象 (仅限 Android)。性能更高，因为它运行在 RenderThread 而不是主线程上。仅支持 Lottie 功能的子集。无法手动设置进度。不支持文本或动态颜色。无法以编程方式或通过互联网加载。

为什么叫 Lottie？

Lottie 的名字来源于一位德国电影导演，也是剪影动画的先驱。她最著名的电影是《王子艾哈迈德历险记》(1926)——现存最古老的长篇动画电影，比华特·迪士尼的长篇电影《白雪公主和七个小矮人》(1937) 早十年多。Lotte Reiniger 的艺术

文章、访谈和播客

以下是一些来自 Airbnb Lottie 团队的文章和播客。

社区文章和视频

以下是一些来自社区的链接。

链接