閱讀大約需要7-8分鐘
本篇文章主要講解了何為lottie坦刀、lottie的優(yōu)勢和劣勢虽填、平臺兼容性吞彤、及簡單的教程我衬。
一、簡介
Lottie 是Airbnb開源的一個(gè)面向 iOS饰恕、Android挠羔、React Native 的動畫庫，可以實(shí)時(shí)渲染After Effects動畫埋嵌，并以Bodymovin作為json導(dǎo)出破加，允許應(yīng)用程序像使用靜態(tài)圖像一樣輕松使用動畫，一款協(xié)同合作的高效軟件莉恼。
二拌喉、lottie的優(yōu)勢和劣勢
優(yōu)勢：
1.支持通過網(wǎng)絡(luò)加載JSON文件，這對A / B測試很有用俐银。
2.開發(fā)效率高—代碼實(shí)現(xiàn)簡單尿背，更換動畫方便，易于調(diào)試和維護(hù)捶惜，可以使用動畫進(jìn)度功能通過手勢驅(qū)動田藐，并且可以通過更改簡單值來操縱動畫速度。
3.數(shù)據(jù)源多樣性—可從assets,sdcard,網(wǎng)絡(luò)加載動畫資源吱七，能做到不發(fā)版本汽久，動態(tài)更新。
4.能夠?qū)С鲆环軯SON文件踊餐，并且支持跨平臺使用景醇，android,ios,react native通用。
劣勢：
1.對設(shè)計(jì)師的要求較高吝岭，需要有一定得AE軟件基礎(chǔ)三痰。
2.一些特殊場景難以勝任，比如遮罩里面的一些效果窜管，ios平臺下的形狀運(yùn)算等等效果不是很好散劫。(后面會出詳細(xì)的支持及不支持及各個(gè)平臺的圖示)
3.相對于屬性動畫，在展示大動畫時(shí)幀率較低幕帆。
三获搏、制作動畫
1. 由于lottie是一款基于AE使用的插件，所以對設(shè)計(jì)的AE功底較為考驗(yàn)失乾，需要先安裝bodymovin常熙，為后續(xù)導(dǎo)出JSON文件做準(zhǔn)備
1.安裝bodymovin纬乍，同時(shí)需要安裝AE插件ZXP Installer。
2.在下載的文件包里找到build/extension/bodymovin.zxp症概，之后打開zxp Installer 蕾额，將插件拖入zxp中，會有步驟提示彼城，之后就安裝好了
3.打開AE在窗口/擴(kuò)展里找到插件。
4.選中需要導(dǎo)出的合成退个，點(diǎn)擊bodymovin募壕，進(jìn)入導(dǎo)出JSON的界面，選定需要導(dǎo)出的合成,（我的較多语盈，在最下面一個(gè)）舱馅，之后點(diǎn)擊Render，就可以生成一份JSON文件了刀荒，可以和開發(fā)愉快玩耍了代嗤。
5.如想在線查看還可以繼續(xù)登錄在線預(yù)覽窗口進(jìn)行查看，同時(shí)手機(jī)可以下載Lottie Preview缠借，可以掃描網(wǎng)站上的二維碼在手機(jī)上進(jìn)行預(yù)覽干毅。（如動效有問題，可回到AE繼續(xù)調(diào)整）
附件：lottie官網(wǎng)：https://airbnb.design/introducing-lottie/
四泼返、lottie在各個(gè)平臺的兼容性（多圖）
