本篇文章是給一定基礎(chǔ)的UI設(shè)計寫的

Lottie 是Airbnb開源的一個面向Android、 iOS、React Native 、Web的動畫庫，能分析 Adobe After Effects 導(dǎo)出的json文件并生成動畫，使靜態(tài)素材一樣使用這些動畫，完美實現(xiàn)動畫效果。

你需要安裝好插件，可以裝Bodymovin或者LottieFile（https://lottiefiles.com/plugins/after-effects）

目前版本是5.6.10

以下是開發(fā)流程

動畫序列幀避坑篇

①當(dāng)你需要做序列幀動畫時，切記需要對每個圖層進(jìn)行英文命名，在安卓和IOS系統(tǒng)內(nèi)的圖片命名都是全局命名。不用在兩個文件夾里出現(xiàn)同樣名字的圖片。

為了方便識別，可以在名字命名前加個英文前綴，如下圖。xxx_xx_001，方便開發(fā)。

導(dǎo)出設(shè)置，可以在bodymovie內(nèi)選擇復(fù)制資源組，保持原來的命名，確保圖片命名正確

不然就變成默認(rèn)命名img_xxx，當(dāng)不規(guī)范導(dǎo)出，多個json動畫時會出現(xiàn)圖片命名重復(fù)，而導(dǎo)致播放異常的現(xiàn)象。

批量命名操作可以在os系統(tǒng)內(nèi)批量命名。

②現(xiàn)在安卓開發(fā)JS序列幀需要支持舊版本的選項，不然需要重構(gòu)來對AndroidX兼容，然后三方又不支持AndroidX，所以還是老老實實兼容舊版本的JSON格式。

操作如下

③做序列幀的圖片當(dāng)然都需要壓縮，推薦工具用【圖壓】，方便快捷，適用于大批量操作。可以為你的圖片壓縮掉70%的空間，同時保持圖像質(zhì)量。

④每次導(dǎo)出時，必須導(dǎo)出一個演示Demo文件，來查看文件的動畫完整性。

⑤空對象問題

空對象需要被轉(zhuǎn)換為【可見】即打開小眼睛，和【0%透明度】才能運行。

禮物直播動畫避坑篇

禮物直播的JSON動畫開發(fā)流程一直感興趣，就是沒法真正接觸到，以下不知道哪里摘抄到的開發(fā)流程，如有更好的方法，可以告知我。

有了Lottie這個庫，開發(fā)也不用費精力去斟酌動畫的實現(xiàn)，只需調(diào)用api完成實現(xiàn)，但是這樣產(chǎn)生一個問題：當(dāng)動畫數(shù)量比較多時，如果都放在bundle下，會造成app體積增大。所以我們的做法是把所有的json和圖片資源放在服務(wù)器分別打包成zip包，然后download下來放在library/caches下解壓，播放時根據(jù)禮物的id去尋找資源播放。
每次啟動app時，動畫管理類都會去請求api獲取當(dāng)前所有禮物id，version和url，如果有新的禮物或者禮物需要更新動畫，則根據(jù)url下載zip包。
下載完zip包，使用zipZap去完成解壓操作，并解壓到指定的路徑下.

更優(yōu)秀的動畫導(dǎo)出方式可以嘗試

SVG動畫（適合小動畫，時間短的動效）

需要配合SVGAConverter_AE插件使用

APNG動畫（高級版GIF圖片，也同樣適合小動畫）

總結(jié)

以上是生活随笔為你收集整理的ae导出json_关于AE转json动画开发避坑指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。