lottie.js入门

Web 动画的十年变革：从 Flash 陨落到 Lottie 的崛起

大约十年前，网页动画面临巨大挑战。Adobe Flash 逐渐衰落，却缺乏合适的替代方案。我们需要一种快速、易于创作、对网页友好的格式，能够制作大型动画演示、卡通和横幅广告。

幸运的是，2014 年 Airbnb 为我们提供了解决方案——Lottie.JS。

关键要点：

1. Lottie.js 作为 Flash 的替代品出现: 大约十年前，由于 Adobe Flash 的衰落，网页动画领域处于变革之中，缺乏清晰的替代方案来创建对网页友好的动画。2014 年，Airbnb 推出了 Lottie.js，这是一种基于矢量的动画格式，旨在创建快速、低带宽的动画，可在 Web、iOS、Android、Windows 和 React Native 等多个平台上无缝运行。由 Airbnb 的 Salih Abdul-Karim 开发的 Lottie 旨在为矢量图形动画提供可扩展且高效的解决方案，作为 GIF、MPEG 或 CSS 动画的替代方案。
2. Lottie.js 的优势和生态系统: 在众多网页动画选项中，Lottie.js 凭借其不断壮大的高质量视觉动画工具生态系统以及制作流畅、快速且可编写脚本的动画的能力而脱颖而出。通过利用 JSON 文件进行动画指令，Lottie 提供了简化的工作流程，可以创建高质量且性能高效的动画，让人联想起 Adobe Flash 的创作和部署优势的结合。
3. 创建 Lottie 动画的工具和实际用例: 通过各种“支持 Lottie”的动画工具可以创建 Lottie 动画，需要同时考虑动画工具的质量和部署 Lottie 代码的难易程度。从 Adobe After Effects 到 Keyshape 和 LottieFiles，每种工具都提供独特的特性、定价和平台支持，以满足动画的不同需求和专业水平。Keyshape 凭借其一次性定价，代表了不经常进行动画制作的用户的经济高效的解决方案，而 Flow 为经常进行动画制作的工作提供了全面的软件包。LottieFiles 通过提供社区、市场和简单的编辑实用程序来进一步丰富生态系统，以支持 Lottie 动画的创建和共享。

Lottie 是什么？

Lottie.js 是 Airbnb 体验和动态设计师 Salih Abdul-Karim 创建的一种开源、基于矢量的动画格式。Lottie 引擎旨在在 Web、iOS、Android、Windows 和 React Native 上以相同的方式渲染快速、清晰、低带宽的矢量动画。

简而言之，如果您喜欢使用 SVG 来制作图像，Lottie 是一种为这些矢量图形制作动画的好方法。如果您想用更轻、更快、更可扩展的东西来替换 GIF、MPEG 或 CSS 动画，Lottie 可能是您最好的答案。

如 Bashir Ahmed 的精美示例所示，Lottie 可以从微小的文件中生成丰富的角色、轻盈流畅的动作——此动画由 54kb 的文件生成。

最基本的 Lottie 动画（如 Bashir 的动画）只需要两个文件：

1. Lottie 动画播放器 (Lottie.js)
2. JSON 动画指令文件

我为什么要选择 Lottie？

有很多方法可以为网页矢量制作动画——从 CSS 动画到 SVG 的 SMIL，再到 GreenSock、AnimeJS 和其他 JavaScript 库。

但是，Lottie 具有杀手级的“一加一大于二”的优势：

• 不断壮大的高质量视觉动画工具生态系统
• 能够导出流畅、快速、高效且可编写脚本的动画

尽管 Adobe Flash 存在许多众所周知的缺点，但其长期成功是基于将良好的创作工具与简单的跨平台部署相结合。我认为 Lottie 具有 Flash 的一些优势。

如何创建 Lottie 动画？

由于 Lottie 文件只不过是 JSON 文本文件，因此从技术上讲，您可以直接在任何 IDE 中编写动画代码。实际上，您需要选择一个“支持 Lottie”的动画工具。以下是我对尝试和测试过的几种工具的看法。

Lottie 工具综述

• Adobe After Effects
• Haiku Animator
• Flow
• Keyshape
• LottieFiles

在我看来，选择 Lottie 动画制作工具时需要考虑两个因素：

1. 它是一个好的动画工具吗？
2. 部署 Lottie 代码是否容易？

我将分别针对每种工具介绍这两个方面。

...(以下内容对原文中各个工具的介绍部分进行了精简和改写，保留了核心信息，并调整了结构，使其更流畅易读。由于篇幅限制，此处省略部分细节描述。)

总结

如果您经常需要创建轻量级的矢量动画，Flow 可能是目前最专注和最完整的 Lottie 开发工具。它具有清晰的工作流程，并且导出选项与大多数竞争对手一样好或更好。

如果您已经了解并喜欢 Adobe After Effects，请使用您所了解的工具。

就我而言，我喜欢动画，但这并不是我工作时间的主要部分。几个月过去了，我可能都不会接触动画项目。我真的想要另一个每月订阅吗？可能……不。

对我来说，Keyshape（29 美元）似乎是一个令人惊叹的物超所值的工具，即使它隐藏得很好。

Lottie.js 常见问题解答

...(对原文FAQ部分进行了精简，保留核心信息)

What is Lottie.js? Lottie.js 是 Airbnb 创建的一个 JavaScript 库，允许开发人员使用名为 Bodymovin 的轻量级 JSON 格式轻松地在 Web 和移动应用程序中嵌入和播放 Adobe After Effects 动画。

How does Lottie.js work? Lottie.js 通过使用 Bodymovin 插件将 Adobe After Effects 中创建的动画导出到 JSON 格式来工作。然后，Lottie.js 库实时解析和渲染这些 JSON 文件，从而可以轻松地将高质量动画集成到 Web 和移动应用程序中。

What are the advantages of using Lottie.js? Lottie.js 简化了将复杂的动画集成到 Web 和移动应用程序中的过程，无需使用繁重的 GIF 或大型视频文件。它提供高质量、可缩放且交互式动画，可以通过 JavaScript 轻松控制。

In which environments can I use Lottie.js? Lottie.js 多功能且可在各种环境中使用，包括 Web 浏览器、React Native 和其他基于 Web 的项目。它支持各种平台和框架。

Are there any size or performance considerations when using Lottie.js? 与传统的 GIF 或视频相比，Lottie.js 动画的文件大小通常较小，因此更节省带宽。但是，必须优化 After Effects 动画以进行 Lottie 导出，才能获得最佳性能。

以上是lottie.js入门的详细内容。更多信息请关注PHP中文网其他相关文章！