AE 動畫直接變原生代碼：Airbnb 發布開源動畫庫 Lottie

Airbnb 發布的 Lottie 是一個面向 iOS、Android 和 React Native 的開源動畫庫。

簡單來說，就是可以直接利用 AE 導出的 JSON 動畫文件，將其解析為原生代碼，並跨平台運行在設備上。

根據身邊朋友的試用，通過 Canvas 繪製動畫非常非常流暢，並且在 AE 動畫沒有遮罩的前提下內存控制得也非常好，基本可以取代用 GIF 做動畫。

一個 JSON 文件可以同時復用於 iOS 和 Android ，免去了動畫重複開發實現，並且還原度都比較高。

唯獨當 AE 動畫大量使用遮罩時，內存管理似乎還有些 Bug。

名字 Lottie 好像來源於一個德國以剪輯電影出名的導演。

總的來說，這個動畫庫為跨平台低成本動畫實現提供了非常有想像力的解決方案，一旦做成了對很多前端同學會有一定的衝擊......畢竟以後做牛逼的動畫可能就不那麼稀奇了。

順便，設計師們趕快去抓一抓 AE 吧，以後實現原生動畫可能就沒那麼費勁，許多好效果也都可以慢慢搬上檯面了。

我翻譯的 Airbnb Design 博客原文如下：

一直以來，在 Android、iOS、React Native 上實現一套複雜動畫是一件蠻困難而且耗時的事。開發者們不僅要為各種屏幕尺寸載入一大堆素材，還得寫成百上千行生硬、難維護的代碼。正因如此，絕大部分 App 都不願意使用動畫 —— 儘管動效對用戶體驗來說是一個強大的工具。為此，從一年前開始，我們就想要改變這件事。

一年後的今天，很高興和向大家介紹我們的解決方案——Lottie。Lottie 是一個面向 iOS、Android、React Native 的動畫庫，能給實時繪製 After Effects 動畫並且讓原生 App 像使用靜態素材一樣使用這些動畫。

通過插件 Bodymovin，Lottie 可以直接解析 AE 導出的 JSON 文件，並且插件內置的 JavaScript 圖層可以將動畫直接在 Web 上運行。自2015年2月起，Bodymovin 的創始人 Hernan Torrisi 就一直在優化這個插件，以得到更好的功能，而我們整個團隊也開始了這項不同尋常的工作。（Brandon Withrow 負責 iOS, Gabriel Peal 負責 Android, Leland Richardson 負責 React Native, 以及我負責設計和體驗。）

Lottie 讓工程師們可以輕鬆實現豐富的動畫效果。我們所熟悉的如 Nick Butcher 的跳動進度條效果、Bartek Lipinski 的漢堡菜單欄動畫、Twitter 的愛心動效就是實現動畫費時費力的最好代表。而通過 Lottie，工程師可以準確地實現設計師所要的動畫效果，並且使得那些與動畫框架做鬥爭、猜測動畫時間和手動重建動畫曲線等等繁複的操作成為歷史。

我們的目標就是儘可能準確地實現 AE 製作出來的動畫，Lottie 提供的示例 App 將會向大家展示如何利用 AE 和 JSON 文件快速、靈活且精確地實現動效。在示例中，也提供了很多複雜動畫的源文件，包括以線條為基礎的動畫、以字體變形為基礎的動畫、動態 Logo 以及多角度多切面的效果。

目前的 Airbnb App 中已經有不少動畫是通過 Lottie 實現的，如應用內通知、全動畫引導、評價頁面等。接下來我們還打算在趣味性的動畫上進一步拓展。

靈活、高效的解決方案

Airbnb 是一家全球化的公司，服務於數百萬旅行者和房主，因此我們的動畫也將運行在各種各樣的設備和平台上。儘管 Marcus Eckert 的 Squall 和 Facebook 的 Keyframes 庫和 Lottie 很相似，但我們各自的目標略有不同。

Facebook 為專註於響應式布局，只選擇支持了少數 AE 動效，Lottie 則打算儘可能多的實現效果本身。Squall 的 AE 預覽 App 是非常有用的工具，但它目前只支持 iOS，所以我們的工程師需要跨平台的解決方案。

Lottie 的 API 中集成了許多很棒的功能，讓整體變得更佳高效和易用：它支持通過網路載入 JSON 文件，這對 A/B 測試方案非常有用；它有可選的緩存機制，能支持調用緩存中的動畫；動畫的速度、相關聯的手勢都可以通過簡單的參數來控制；甚至 iOS 中還支持在 Runtime 中添加額外的原生 UI ，從而實現複雜的過渡動畫。

除了目前已有的各個功能之外，未來我們還打算為 Lottie 動畫增加 mapping 視圖、轉場視圖等功能。

搭建社區

Airbnb 將 Lottie 在 GitHub 開源出來，正是希望它能成為連接開發者和設計師們的一個橋樑，讓所有喜歡動畫的人都加入進來。

9 Squares, Motion Corpse, 和 Animography 等動畫交流社區的興起讓我們倍受鼓舞，它們讓全世界的動畫人連結到一起，即便這些人從來沒有一起工作過。雖然這個過程伴隨各個團隊之間持續幾個月的爭吵，但毫無疑問，最終的成果對動畫界來說價值非凡。

在這些人的引領下，Airbnb 接觸到這三大動畫社區，並將來自它們的許多動畫增加到我們的示例 App 中。我們相信把這些驚艷的設計整合到 Lottie 強大的工程師社區中，將會點燃創意的火花。

我們非常樂意收到來自用戶的反饋——無論你是設計師、動畫製作者、工程師，都可以通過 lottie@airbnb.com 的郵箱和我們聯繫。我們也無比期待看到全世界使用 Lottie 的用戶所匯聚成的團體能給創造出怎樣的奇蹟。

Lottie 官方網站（可下載 AE 插件、三大平台代碼和示例）

Airbnb 官網博文

我的微信公眾號：zhenlei_pd