Lottie 是一個面向 iOS、Android 和 React Native 的開源動畫庫，能給實時繪制 After Effects 動畫并且讓原生 App 像使用靜態素材一樣使用這些動畫。

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

簡介

Airbnb出了個移動端的動畫庫Lottie，可以和一個名叫Bodymovin的AE插件結合起來，把在AE上做好的動畫導出為json文件，然后以Android/iOS原生動畫的形式在移動設備上渲染播放。AE（Adobe After Effects）是視頻后期特效和動畫制作的行家，前段時間充斥視野的MG動畫就是用它制作的。如果真的可以實現，就會大大方便前端動畫的設計。

14979597539457.png

Bodymovin的使用方式。

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

支持平臺

json文件可以在以下平臺播放：

• Web頁面，以svg/canvas/html+js的形式。Bodymovin自己提供了作為Player的js庫——bodymovin.js；
• Android原生，通過Airbnb的開源項目lottie-android實現；
• iOS原生，通過Airbnb的開源項目lottie-ios實現；
• React Native，通過Airbnb的開源項目lottie-react-native實現。

優點

1. 通過 Canvas 繪制動畫非常非常流暢，并且在 AE 動畫沒有遮罩的前提下內存控制得也非常好，基本可以取代用 GIF 做動畫
2. 一個 JSON 文件可以同時復用于 iOS、 Android和React Native，免去了動畫重復開發實現，并且還原度都比較高。

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

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

以前

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

使用場景和效果

14979608110448.gif

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

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

14979610569405.gif

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

14979611089236.gif

Airbnb簡介

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 強大的工程師社區中，將會點燃創意的火花。

14979613771552.gif

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

Airbnb 官網博文