作者 | 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 翻譯，未經許可禁止轉載。

炒股開戶享福利，入金抽188元紅包，100%中獎！

開啟App看更多精彩內容