从 Flash 到 Lottie 再到状态机：Web 矢量动画的演变
Web 矢量动画如何从 Flash 和 ActionScript 转移到 Lottie 的 After Effects 导出，然后转移到状态机运行时，以及每个步骤发生的变化。
核心要点
Flash 将矢量动画和交互性结合在一个工具中，但它运行在一个插件中，Adobe 在 2020 年 12 月 31 日后停止支持。Lottie 通过播放 After Effects 动画恢复了矢量动画，并与 Bodymovin 一起导出为 JSON，原生在 Web 和移动设备上，但这些动画只能播放。 Rive 和 ExodeUI 等状态机运行时将交互性重新添加到设计文件中。
Flash：动画和逻辑位于一处
Flash 让设计人员可以绘制矢量、在时间轴上为它们设置动画并使用 ActionScript 添加行为，所有这些都在一个文件中。它为游戏、广告和整个网站提供动力。它的弱点是插件：它在浏览器自己的技术之外运行，存在持续的安全和性能问题。 Adobe于2020年12月31日后终止对Flash播放器的支持，并从2021年1月12日起阻止Flash内容运行。
Lottie：没有插件的向量
来自 Airbnb 的 Lottie 使用 Bodymovin 插件解析导出为 JSON 的 Adobe After Effects 动画，并在 Web、iOS、Android 和 React Native 上本地渲染它们。它使丰富的矢量运动再次在应用程序中变得实用，并且它仍然是简单播放的动画最广泛支持的格式。
缺失的部分：交互性
Lottie 文件描述时间线，而不是行为。让 Lottie 动画响应悬停、加载或成功意味着围绕播放器编写代码。 Flash 内置了这种行为；无插件的世界失去了它。
状态机：再次在文件中行为
状态机运行时在没有插件的情况下恢复了 Flash 的想法。 Rive 允许您设计矢量动画并将其连接到由您的代码控制输入的状态机。我们制作的 ExodeUI 将相同的想法应用于产品 UI，在一个打开的 JSON 文件中添加布局、弹簧物理和逻辑，该文件由 React、SwiftUI、Flutter 等运行时播放。
要记住的关键 Principle
- Flash 在插件中结合了矢量动画和交互性
- Adobe 于 2020 年 12 月 31 日后结束 Flash 播放器支持
- Lottie 原生播放用 Bodymovin 导出的 After Effects 动画
- Lottie动画播放；交互需要额外的代码
- 状态机运行时将编写的行为带回到文件中
常见问题解答
来源
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub（爱彼迎）
- State Machine Playback — Rive 文档