前言
最近在優(yōu)化Loading動(dòng)畫亡问，翻看了很多關(guān)于Lottie的神奇之處蒲障，既免去了使用序列幀丟幀情況又不必?fù)?dān)心AE導(dǎo)出的GIF文件各種失真的悲具召噩，又可以減少開發(fā)成本讓開發(fā)小哥哥直接使用立帖，下面就說一下交互設(shè)計(jì)師該如何與開發(fā)小哥哥配合使用Lottie把AE動(dòng)畫轉(zhuǎn)換成HTML5/Android/iOS原生動(dòng)畫
搜羅了各種Lottie相關(guān)資料单山，但大多數(shù)都是把設(shè)計(jì)師的部分和開發(fā)小哥哥負(fù)責(zé)的部分混在一起介紹的碍现，可是作為一枚代碼小白的UE，看的也是全程蒙蒙噠米奸，只能叫來開發(fā)小哥哥一起研究昼接，各司其責(zé)，各取所長才能更快的輸出悴晰，所以就把設(shè)計(jì)師負(fù)責(zé)的這一部步驟單獨(dú)拿出來詳細(xì)說明慢睡，如果了解過，可直接到文末看步驟總結(jié)
Lottie是個(gè)什么
Lottie 是一個(gè)可應(yīng)用于Andriod和iOS的動(dòng)畫庫铡溪，它通過bodymovin插件來解析Adobe After Effects 動(dòng)畫并導(dǎo)出為json文件漂辐，通過手機(jī)端原生的方式或者通過React Native的方式渲染出矢量動(dòng)畫
其實(shí)就是設(shè)計(jì)師只需要使用 AE設(shè)計(jì)出動(dòng)畫之后，使用 Lottic 提供的 Bodymovin 插件棕硫，將設(shè)計(jì)好的動(dòng)畫導(dǎo)出成json格式髓涯，然后把這個(gè)文件交給開發(fā)小哥哥，后面的全部交給萬能開發(fā)小哥哥就可以搞定啦哈扮，中間會(huì)涉及到動(dòng)畫速度或者顏色相關(guān)的問題纬纪，這個(gè)建議設(shè)計(jì)師在AE里進(jìn)行調(diào)節(jié)再次導(dǎo)出就可以了
具體步驟如下：
1、首先在sketch中確定好需要制作loading動(dòng)畫的整體形象
2滑肉、如果形象只是簡單的形狀可以在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)行過此腳本，下次打開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)出為Lottie使用）柒凉，以下鏈接是已經(jīng)過西西大神漢化過的版本及原文安裝過程：
百度云盤: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é)來說按照上述步驟林艘，就可以提前把圖片整合到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、然后通過 Bodymovin 插件蚊俺，輸出json文件
4懈涛、把json文件發(fā)送給開發(fā)小哥哥
希望對大家有所幫助，如有任何疑問都可留言給我哦泳猬，后期會(huì)跟陸續(xù)更新交互相關(guān)小心得
