Lottie 是一個面向 iOS讯檐、Android 和 React Native 的開源動畫庫囊陡，能給實時繪制 After Effects 動畫并且讓原生 App 像使用靜態(tài)素材一樣使用這些動畫薄榛。
簡單來說沉桌，就是可以直接利用 AE 導出的 JSON 動畫文件，將其解析為原生代碼镜硕，并跨平臺運行在設備上茂浮。
簡介
Airbnb出了個移動端的動畫庫Lottie双谆，可以和一個名叫Bodymovin的AE插件結合起來，把在AE上做好的動畫導出為json文件席揽，然后以Android/iOS原生動畫的形式在移動設備上渲染播放顽馋。AE（Adobe After Effects）是視頻后期特效和動畫制作的行家，前段時間充斥視野的MG動畫就是用它制作的驹尼。如果真的可以實現趣避，就會大大方便前端動畫的設計。
Bodymovin的使用方式新翎。
通過插件 Bodymovin，Lottie 可以直接解析 AE 導出的 JSON 文件住练，并且插件內置的 JavaScript 圖層可以將動畫直接在 Web 上運行地啰。
自2015年2月起，Bodymovin 的創(chuàng)始人 Hernan Torrisi 就一直在優(yōu)化這個插件讲逛，以得到更好的功能亏吝，而我們整個團隊也開始了這項不同尋常的工作。（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實現。
優(yōu)點
- 通過 Canvas 繪制動畫非常非常流暢预愤，并且在 AE 動畫沒有遮罩的前提下內存控制得也非常好沟于，基本可以取代用 GIF 做動畫
- 一個 JSON 文件可以同時復用于 iOS、 Android和React Native植康，免去了動畫重復開發(fā)實現旷太，并且還原度都比較高。
總的來說销睁，這個動畫庫為跨平臺低成本動畫實現提供了非常有想象力的解決方案供璧，一旦做成了對很多前端同學會有一定的沖擊......畢竟以后做牛逼的動畫可能就不那么稀奇了。
順便榄攀，設計師們趕快去抓一抓 AE 吧嗜傅，以后實現原生動畫可能就沒那么費勁，許多好效果也都可以慢慢搬上臺面了檩赢。
以前
在 Android吕嘀、iOS、React Native 上實現一套復雜動畫是一件蠻困難而且耗時的事贞瞒。開發(fā)者們不僅要為各種屏幕尺寸加載一大堆素材偶房，還得寫成百上千行生硬、難維護的代碼军浆。正因如此棕洋，絕大部分 App 都不愿意使用動畫 —— 盡管動效對用戶體驗來說是一個強大的工具。
使用場景和效果
Lottie 讓工程師們可以輕松實現豐富的動畫效果乒融。我們所熟悉的如 Nick Butcher 的跳動進度條效果掰盘、Bartek Lipinski 的漢堡菜單欄動畫、Twitter 的愛心動效就是實現動畫費時費力的最好代表赞季。而通過 Lottie愧捕，工程師可以準確地實現設計師所要的動畫效果，并且使得那些與動畫框架做斗爭申钩、猜測動畫時間和手動重建動畫曲線等等繁復的操作成為歷史次绘。
我們的目標就是盡可能準確地實現 AE 制作出來的動畫，Lottie 提供的示例 App 將會向大家展示如何利用 AE 和 JSON 文件快速撒遣、靈活且精確地實現動效邮偎。在示例中，也提供了很多復雜動畫的源文件义黎，包括以線條為基礎的動畫禾进、以字體變形為基礎的動畫、動態(tài) Logo 以及多角度多切面的效果轩缤。
目前的 Airbnb App 中已經有不少動畫是通過 Lottie 實現的命迈，如應用內通知贩绕、全動畫引導、評價頁面等壶愤。接下來我們還打算在趣味性的動畫上進一步拓展淑倾。
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 開源出來具钥，正是希望它能成為連接開發(fā)者和設計師們的一個橋梁，讓所有喜歡動畫的人都加入進來液兽。
9 Squares, Motion Corpse, 和 Animography 等動畫交流社區(qū)的興起讓我們倍受鼓舞，它們讓全世界的動畫人連結到一起掌动，即便這些人從來沒有一起工作過四啰。雖然這個過程伴隨各個團隊之間持續(xù)幾個月的爭吵，但毫無疑問粗恢，最終的成果對動畫界來說價值非凡柑晒。
在這些人的引領下，Airbnb 接觸到這三大動畫社區(qū)眷射，并將來自它們的許多動畫增加到我們的示例 App 中匙赞。我們相信把這些驚艷的設計整合到 Lottie 強大的工程師社區(qū)中佛掖，將會點燃創(chuàng)意的火花。
Lottie 官方網站（可下載 AE 插件涌庭、三大平臺代碼和示例）
