Lottie4J：为JavaFX应用引入Lottie动画解析与播放库

什么是 Lottie？
Lottie 的复杂性
Lottie4J 项目
- 项目结构
解析 JSON
- 动画示例
如何使用 Lottie4J
持续演进
快速开始

我很自豪地向大家介绍一个新的 JavaFX 库：Lottie4J，它将 Lottie 动画引入了 JavaFX 应用程序。多年前，我在开发一个移动应用时首次接触到 Lottie。当时我们使用 Lottie 动画向用户演示如何操作物理设备，这些动画比单纯的静态图片或文字更能清晰地传达指令。

那时，我就想在 JavaFX 中实现类似的体验，但却找不到适用于 Lottie 格式的 JavaFX 播放器。于是，我决定自己动手开发一个。然而，当时我并没有意识到这段旅程竟会如此复杂……

什么是 Lottie？

Lottie 是由 Airbnb 创建的一种基于 JSON 的动画文件格式。它允许设计师从各种工具中导出动画，并像使用静态图片一样轻松地在任何平台（移动端、Web、桌面端）上使用它们。由于其文件体积小、可缩放且支持编程控制，它已成为矢量动画的行业标准。

在 Lottie 官网上，你可以找到使用 After Effects 创建动画的教程。但我希望你知道，除了 Adobe 系列软件外，还有更好且更便宜的替代方案……我多年前就放弃了 Adobe，也建议你尝试一下。视频编辑可以看看 DaVinci Resolve，绘图应用可以参考 Affinity。

Lottie 的复杂性

虽然 Lottie 格式基于 JSON，但它极其复杂且难以理解。其 JSON 使用了晦涩难懂的缩写属性名，例如 nm 代表名称（name），fr 代表帧率（frames per second），ddd 代表“是否有 3D 图层”。

该规范对图层、形状、效果和动画采用了嵌套结构。要理解每个属性的作用及其交互方式，需要深入研读文档并进行大量的试错实验。

Lottie4J 项目

我将 Lottie4J 构建为一个多模块的 Maven 项目。我从 2022 年开始这项工作，但直到最近，得益于 Claude.ai 的发展，我才能够深入理解 Lottie 格式，从而正确处理数据，使其能被准确地可视化和渲染。事实证明，我最初的数据模型解析逻辑是正确的。此外，我的第一个 JavaFX 渲染实现效果也不错。在调整了嵌套数据结构的处理方式后，我确信该库已经可以发布 1.0.0 版本了。

项目结构

Lottie4J 由三个主要模块组成：

Core：代表 Lottie 数据模型和文件加载的 Java 对象。
FXPlayer：用于播放动画的 JavaFX 组件。
FXFileViewer：一个演示应用程序，用于展示动画并可视化其结构。

解析 JSON

我的目标之一是让晦涩的 Lottie 格式变得更易于理解。在核心库的 Animation 类中，每个晦涩的 JSON 属性都被映射为清晰、易懂的名称。例如，@JsonProperty("fr") 变成了 framesPerSecond，@JsonProperty("ip") 变成了 inPoint。Java 对象使用人类可读的名称，使代码具备自文档化能力，工作起来也轻松得多。

不仅如此，fxfileviewer 应用程序还包含一个树状可视化工具，让你能够以直观的方式探索任何 Lottie 文件的结构。你可以准确看到动画内部的内容——图层、形状、属性以及它们的嵌套方式。这对于理解格式和调试动画非常有价值。

动画示例

项目中包含了一些测试动画，用以展示其功能：

java_duke_flip.json - Java Duke 吉祥物的翻转动画。
loading.json - 加载转圈动画。
sandy_loading.json - 一个极具挑战性的动画，用于测试复杂的嵌套变换。
timeline_animation.json - 时间轴动画，展示了如何协同编排多个元素。

在动画播放时，你可以在树状视图中查看完整的结构，包括每一个图层、每一个形状和每一个动画属性。

如何使用 Lottie4J

在 JavaFX 应用中使用 Lottie4J 非常简单。首先在 pom.xml 中导入 fxplayer 依赖：

$ xml

<dependency>
    <groupId>com.lottie4j</groupId>
    <artifactId>fxplayer</artifactId>
    <version>1.0.0</version>
</dependency>

然后使用以下极简代码添加动画：

$ java

LottiePlayer player = new LottiePlayer("path/to/animation.json");
parent.getChildren().add(player);

只需加载你的 Lottie JSON 文件，创建一个 LottiePlayer 组件，并将其添加到你的场景或父组件中即可！播放器会自动处理解析动画和逐帧渲染的所有复杂逻辑。

持续演进

Lottie 格式随着新功能和新特性的推出在不断演进。总有更多的功能需要实现，更多的边缘情况需要处理，更多的动画需要测试。但这正是该项目的迷人之处——它是一个持续学习的过程。

快速开始

如果你正在使用 JavaFX，并希望为你的应用程序添加精美、轻量级的动画，请查看 Lottie4J。所有代码均为开源，可在 GitHub 上获取。你可以在 lottie4j.com 找到更多文档和示例。

欢迎分享你使用该库的方式和成果。我确信并非所有动画在当前的实现中都能达到与成熟播放器完全一致的渲染效果，因此如果你发现了差异，希望能将其隔离并提交到 GitHub 仓库的问题单中，并附上 JSON 文件和详细描述。

祝动画创作愉快！

分类导航