前言
最近在優(yōu)化Loading動(dòng)畫，翻看了很多關(guān)于Lottie的神奇之處，既免去了使用序列幀丟幀情況又不必?fù)?dān)心AE導(dǎo)出的GIF文件各種失真的悲具，又可以減少開發(fā)成本讓開發(fā)小哥哥直接使用，下面就說(shuō)一下交互設(shè)計(jì)師該如何與開發(fā)小哥哥配合使用Lottie把AE動(dòng)畫轉(zhuǎn)換成HTML5/Android/iOS原生動(dòng)畫
搜羅了各種Lottie相關(guān)資料，但大多數(shù)都是把設(shè)計(jì)師的部分和開發(fā)小哥哥負(fù)責(zé)的部分混在一起介紹的，可是作為一枚代碼小白的UE，看的也是全程蒙蒙噠，只能叫來(lái)開發(fā)小哥哥一起研究，各司其責(zé)，各取所長(zhǎng)才能更快的輸出，所以就把設(shè)計(jì)師負(fù)責(zé)的這一部步驟單獨(dú)拿出來(lái)詳細(xì)說(shuō)明，如果了解過(guò)，可直接到文末看步驟總結(jié)
Lottie是個(gè)什么
Lottie 是一個(gè)可應(yīng)用于Andriod和iOS的動(dòng)畫庫(kù)，它通過(guò)bodymovin插件來(lái)解析Adobe After Effects 動(dòng)畫并導(dǎo)出為json文件，通過(guò)手機(jī)端原生的方式或者通過(guò)React Native的方式渲染出矢量動(dòng)畫
其實(shí)就是設(shè)計(jì)師只需要使用 AE設(shè)計(jì)出動(dòng)畫之后，使用 Lottic 提供的 Bodymovin 插件，將設(shè)計(jì)好的動(dòng)畫導(dǎo)出成json格式，然后把這個(gè)文件交給開發(fā)小哥哥，后面的全部交給萬(wàn)能開發(fā)小哥哥就可以搞定啦，中間會(huì)涉及到動(dòng)畫速度或者顏色相關(guān)的問(wèn)題，這個(gè)建議設(shè)計(jì)師在AE里進(jìn)行調(diào)節(jié)再次導(dǎo)出就可以了
具體步驟如下：
1、首先在sketch中確定好需要制作loading動(dòng)畫的整體形象
2、如果形象只是簡(jiǎn)單的形狀可以在AE中直接用鋼筆直接畫出；如果是比較復(fù)雜的形象，可以使用Google的Sketch2AE工具導(dǎo)入AE，選中需要導(dǎo)入所有圖層，到“Plugins-Sketch2AE”點(diǎn)擊“Cope Selected Layers”
下載地址如下：
百度云盤: https://pan.baidu.com/s/16x9eWkLUk51COXvMVfHzkg? 密碼:5jf7
官方詳細(xì)教程：https://google.github.io/sketch2ae/
3、打開AE，點(diǎn)擊“文件-腳本-運(yùn)行腳本文件...”，找到上述插件中的“Sketch2AE.jsx”，點(diǎn)擊“打開”，AE中就會(huì)看到Sketch2AE的操作面板，點(diǎn)擊右邊紅色button就可導(dǎo)入在Sketch中已復(fù)制的所有圖層了（如果已運(yùn)行過(guò)此腳本，下次打開AE時(shí)到“窗口”菜單最下面就可以看到“Sketch2AE.jsx”）
4、在AE中設(shè)計(jì)動(dòng)畫，動(dòng)畫設(shè)計(jì)好，需要安裝Lottie的配套插件Bodymovin插件（Bodymovin就是After Effects的一個(gè)插件，可以將json數(shù)據(jù)格式的動(dòng)畫導(dǎo)出為L(zhǎng)ottie使用），以下鏈接是已經(jīng)過(guò)西西大神漢化過(guò)的版本及原文安裝過(guò)程：
百度云盤:https://pan.baidu.com/s/11gMfiaYG_6XNtpJbWo6e6w? 密碼:jmm8?
5、在AE中到“窗口-擴(kuò)展”找到已安裝好的Bodymovin插件，按以下步驟操作，就可以導(dǎo)出json數(shù)據(jù)格式的動(dòng)畫了
6、最后一步，把json文件發(fā)送給開發(fā)小哥哥，配合開發(fā)小哥哥調(diào)節(jié)一些細(xì)節(jié)，坐等驗(yàn)收最終效果即可
補(bǔ)充
另外官方有單獨(dú)給出動(dòng)畫中含有圖片導(dǎo)出資源的方法，其實(shí)總結(jié)來(lái)說(shuō)按照上述步驟，就可以提前把圖片整合到j(luò)son文件中，以省去后期開發(fā)小哥哥許多開發(fā)量
官方方案：http://airbnb.io/lottie/after-effects/artwork-to-lottie-walkthrough.html
大概總結(jié)一下，分為以下步驟：
1、如果是sketch設(shè)計(jì)的可以使用上文提到的Google的Sketch2AE工具導(dǎo)入AE；如果是AI設(shè)計(jì)，直接導(dǎo)入AE即可
2、在AE中使用導(dǎo)入的圖層進(jìn)行制作動(dòng)畫
3、然后通過(guò) Bodymovin 插件，輸出json文件
4、把json文件發(fā)送給開發(fā)小哥哥
希望對(duì)大家有所幫助，如有任何疑問(wèn)都可留言給我哦，后期會(huì)跟陸續(xù)更新交互相關(guān)小心得
