AirBnb 开源动画引擎 Lottie：采用 Core Animation 提高性能

作者 | Sergio De Simone

译者 | 刘雅梦

策划 | 丁晓昀  

AirBnb 宣布了其开源矢量动画引擎 Lottie 的第四次主要迭代。AirBnb iOS 工程师 Cal Stephens 表示，由于采用了核心动画（Core Animation），Lottie 4.0 提供了显著的性能改进，并降低了 CPU 负载。

Lottie 是一个用于 iOS 和 Android 的库，可以实时渲染 After Effects 动画。Lottie 中的动画是通过 JSON 文件描述的，可以使用 Bodymovin 插件从 After Effects 中导出。Lottie 将对 JSON 进行解码，并访问渲染动画所需的所有资源，就像它只是应用程序中的另一个静态资源一样。

在 Lottie 4.0 中，AirBnb 放弃了使用 CADisplayLink 在主 CPU 线程上制作图形动画的原始方法：

每帧一次，Lottie 将在主线程上执行代码，以推进动画的进度并重新渲染其内容。这意味着动画在播放时将消耗 5–20% 以上的 CPU，从而减少了用于应用程序其余部分的可用 CPU 周期。

根据 Stephens 的说法，这使得 Lottie 在更复杂的情况下无法维持所需的帧速并且开始丢弃帧会变得相对常见。此外，当主线程忙于一些昂贵的任务时，动画可能会出现一些抖动。

切换到核心动画（Core Animation）意味着动画被卸载到 GPU 上，这有三个好处：利用硬件加速，减少 CPU 负载，并在 CPU 繁忙时提高帧速。

例如，Airbnb 应用程序在首次启动时显示 Lottie 动画。我们在这里进行了一项实验，发现切换到新的渲染引擎可以缩短应用程序的总启动时间，同时还可以提高启动动画的帧速和用户体验。

除了新的基于核心动画（Core Animation）的渲染引擎外，Lottie 4.0 还带来了一种新的文件格式，它使用压缩将一个或多个 Lottie JSON 文件及其相关资源聚合到一个文件中。JSON 解码管道已被重写，速度提高了约 2 倍。

Lottie 最初是用 Objective-C 编写的，两年前在 Swift 中被完全重写，最终发布了第 3 版。你可以从 GitHub repo 或使用包管理器（如 CocoaPods、Carthage 或 Swift 包管理器）安装它。

作者简介：

Sergio De Simone 是一名软件工程师。Sergio 已经在一系列不同的项目和公司担任软件工程师超过 15 年，其中包括西门子、惠普和小型创业公司等不同的工作环境。在过去的几年里，他一直专注于移动平台和相关技术的开发。他目前就职于 BigML，Inc.，负责 iOS 和 OS X 的开发。

原文链接：

https://www.infoq.com/news/2022/12/airbnb-lottie-4/

相关阅读：

React 源码解读之 React Fiber （https://xie.infoq.cn/article/c69eeb94f0023cde7bc0bf80a）

虚拟角色赛道的新“闯入者”：3D 引擎 Cocos 和它的新故事 （https://www.infoq.cn/article/jEs0tEhfmkjbQ1LGPkbI）

声明：本文为 InfoQ 翻译，未经许可禁止转载。

点击底部阅读原文访问 InfoQ 官网，获取更多精彩内容！

今日好文推荐

市场增速超20%，国产操作系统“浴火重生” | 解读操作系统的 2022

直面成本“刺客”、拒绝繁杂技术花样，压力之下云厂商改变方向｜解读云原生的 2022

马化腾内部开炮：有些业务都活不下去了，周末还打球；阿里云香港服务器“史诗级”宕机；马斯克萌生退意 ｜ Q资讯

奇点已来，推进All on Serverless有哪些困难、如何破局？｜ 解读Serverless的2022