自開始工作後，我就養成了一個習慣，那就是每天閒來無事去 Github 中瀏覽一些比較熱門的開源項目，就在最近我發現了一個比較niubility的開源動畫庫項目 ----Lottie。
正式開始之前先簡單的介紹一下， Lottie是 Airbnb 發佈的一個面向 iOS、Android 和 React Native 的開源動畫庫。Lottie 的使用流程很簡單，就是在AE中設計完成你的動畫後，通過bodymoving插件導出一份記錄動畫信息的JSON文件，然後開發人員使用 Lottie 的Android，iOS，React Native apps開源動畫庫讀取這份JSON文件進行解析和渲染。
動畫對於我們做客戶端開發的人來說並不陌生，動畫對於提升app的用戶體驗絕對是不容置疑的，如果你能在客戶端用代碼實現複雜的動畫效果，那麼你在找工作的時候絕對很受歡迎，但是不巧的是Airbnb開源的這個動畫庫，可能會讓你失去這種優勢。
爲什麼說他niubility呢！先來看幾張動圖吧~
效果是不是很贊，相比於我們用代碼去實現這些複雜的動畫，簡直就是前端程序員的福音。
那如何去看待 Airbnb 的 lottie 呢！
我搜羅了來自知乎的一些答案：
優點
從代碼上看，Android 端的實現是基於 Drawable、iOS 端是基於 Layer —— 最終都是對 canvas 的操作，中間除去解析 json 外，基本無耗費性能的行爲。（官方文檔有提到，masks 和 mattes 動畫較爲耗費性能，原因是需要額外的 Bitmap 輔助，這點需注意）
而存儲上，動畫由 json 文件描述，佔用空間不多。
也是因爲動畫由 json 文件描述，所以它的第三個優點是動畫的更新及其方便。在之前，假如我們要完成動畫動態更新需求，要麼使用上述所說的 GIF、幀動畫等方案，要麼就自定義動畫描述文件或用笨重的xml來完成動畫。那麼現在用 json 文件，簡直再方便不過了。
計即所見。 設計師AE導出Json文件，Lotti 解析Json文件後調Core Animation的API繪製渲染。複雜的幀動畫如此實現還原度更好，開發成本更低。
跨平臺: 支持iOS、Android、React Native。
性能：Lotti對於從AE導出的Json文件，用Core Animation做矢量動畫, 性能較佳。Lotti 對解析後的數據模型有內存緩存。
靈活高效的API: 控制動畫進度、播放、暫停。
支持動畫屬性多：比起臉書的Keyframes，Lotti支持了更多AE動畫屬性，比如Mask, Trim Paths,Stroke (shape layer)等。
仍然存在的問題
Bodymovin 插件待完善，仍然有部分 AE 效果無法成功導出；
Lottie 對 json 文件的支持待完善，目前有部分能成功導出成 json 文件的效果在移動端上無法很好的展現；
目前不支持文字，所有文字必須轉成矢量圖才能正常展現動畫；
動畫無法被編輯，即移動端無法更改遠端下載到本地的動畫；
文檔需要跟進。。現在的 json 文件內容看的好蛋疼。。根本沒法開開心心提PR；
如何使用Lottie
Lottie支持iOS 8及以上版本。 Lottie動畫可以通過JSON 文件或從URL地址加載。 只需要將AE導出的JSON以及所需要的圖片資源添加到工程中。
使用它的最簡單的方法是使用LOTAnimationView：
如果你在多個bundle中穿插工作：
以URL的方式加載：
最後，Lottie庫的開源地址在這裏：
Android: https://github.com/airbnb/lottie-android
iOS: https://github.com/airbnb/lottie-ios
ReactNative: https://github.com/airbnb/lottie-react-native
感興趣的可以試試哦！
好了。祝大家生活愉快。多多收穫友誼和愛情。如果想獲取更多的訊息，請掃描下方二維碼關注我的微信公衆號：
