使用原生代碼在各平臺(tái)實(shí)現(xiàn)復(fù)雜的動(dòng)效是一件性價(jià)比較低的事，還要考慮到適配不同屏幕尺寸。無(wú)論對(duì)設(shè)計(jì)師還是開(kāi)發(fā)人員都是比較繁瑣的。
而使用了lottie之后，可以做到同一個(gè)文件能應(yīng)用到不同的平臺(tái)，還能極大地減少開(kāi)發(fā)成本。
一：什么是lottie
Lottie 是Airbnb開(kāi)源的一個(gè)面向 iOS、Android、React Native 的動(dòng)畫(huà)庫(kù)，能分析 Adobe After Effects 導(dǎo)出的動(dòng)畫(huà)。
不僅使用簡(jiǎn)單，還能很好地實(shí)現(xiàn)動(dòng)效設(shè)計(jì)師設(shè)計(jì)的動(dòng)畫(huà)效果。
而怎樣才能將設(shè)計(jì)師在AE里制作好的較為復(fù)雜的動(dòng)畫(huà)轉(zhuǎn)換成lottie？
這時(shí)候今天的主角Bodymovin就要出場(chǎng)啦~~
就是這個(gè)叫Bodymovin的AE插件，是一個(gè)可以把動(dòng)效設(shè)計(jì)師在AE里做好的動(dòng)畫(huà)導(dǎo)出為json格式，然后以Android/iOS原生動(dòng)畫(huà)的形式在移動(dòng)設(shè)備上渲染播放。
能幫助設(shè)計(jì)同學(xué)很容易的將AE動(dòng)畫(huà)導(dǎo)出成代碼文件提供給開(kāi)發(fā)同學(xué)使用。
現(xiàn)在我用工作中使用到的案例給大家分享Bodymovin這個(gè)插件具體的應(yīng)用。
二：Bodymovin導(dǎo)出案例
針對(duì)設(shè)計(jì)師在AE里做動(dòng)畫(huà)會(huì)遇到用到外部圖片素材和完全只使用圖形層制作動(dòng)畫(huà)的兩種情況，分別分享這兩種情況的區(qū)別。
1.有用到外部圖片素材制作動(dòng)畫(huà)
設(shè)計(jì)師在制作動(dòng)畫(huà)的過(guò)程中有時(shí)候不可避免會(huì)遇到用到圖片素材的情況（個(gè)人建議盡可能少的去使用圖片素材，后面會(huì)講到具體原因）
我用騰訊動(dòng)漫APP里的下拉刷新動(dòng)效為例：
動(dòng)畫(huà)預(yù)覽：
制作這個(gè)動(dòng)畫(huà)的時(shí)候，動(dòng)畫(huà)里只有黑子眼睛和飛碟下面的線條做了細(xì)節(jié)動(dòng)畫(huà)，所以其余不用做細(xì)節(jié)動(dòng)畫(huà)的部分我用到了其他設(shè)計(jì)師提供的素材圖去制作。
AE里的截圖如下：
檢查好動(dòng)畫(huà)無(wú)誤后即可使用Bodymovin插件進(jìn)行導(dǎo)出。
（導(dǎo)出方法后面會(huì)有具體闡述~）
這時(shí)候需要注意，由于用到了圖片素材，導(dǎo)出來(lái)的結(jié)果除了json文件還會(huì)多一個(gè)名字為“images” 的文件夾。如下圖所示：
這個(gè)文件夾就是用來(lái)存放你在AE里所使用的圖片素材，你所使用到的圖片會(huì)被命名為“img_0”
是不是已經(jīng)猜到了，如果我用了兩張，三張，四張…….圖片，
那么在導(dǎo)出的json文件夾里就會(huì)出現(xiàn)“img_1” “img_2” “img_3”……以此類推。
這就是我剛剛說(shuō)為什么要盡量控制使用外部圖片素材，用了更多的圖片就會(huì)增加導(dǎo)出json文件的體積，給開(kāi)發(fā)造成困擾。
2：只用到圖形層制作動(dòng)畫(huà)
下面我用騰訊動(dòng)漫海外版搜索頁(yè)面的交互動(dòng)效為例。
AE中只使用圖形層做出以下動(dòng)畫(huà)：
AE里截圖：
AE里動(dòng)畫(huà)制作完成后就可以打開(kāi)Bodymovin神器啦~~
找到你導(dǎo)出的json文件和你在AE里生成出來(lái)的動(dòng)畫(huà)預(yù)覽一并給到開(kāi)發(fā)小哥哥小姐姐，
方便他們檢查實(shí)現(xiàn)的效果是否完美還原了設(shè)計(jì)同學(xué)做出來(lái)的效果。
還要記得同時(shí)給到標(biāo)注哦~~
用在界面的效果展示：
三：Bodymovin插件的安裝和使用
那這么好用的代碼轉(zhuǎn)換神器是如何安裝和使用的呢？
準(zhǔn)備工具：
1.Adobe After Effects CC 2017以上，舊版本不支持
2.Bodymovin 插件（lottie-web-master壓縮包里面）
3.ZXP Installer 軟件（用來(lái)安裝Bodymovin 插件到AE使用）
由于時(shí)間關(guān)系，我已經(jīng)打包好方便各位看官享用！啊！真香~
https://share.weiyun.com/552FVF9
安裝方法：
1.安裝好Adobe After Effects（這個(gè)不用多說(shuō)了吧！）
2.安裝ZXP Installer 軟件?。。c(diǎn)點(diǎn)點(diǎn)點(diǎn)點(diǎn)，非常簡(jiǎn)單）
3.打開(kāi)ZXP Installer，點(diǎn)擊“File”—“Open”菜單項(xiàng)載入?？旖萱I win：Ctrl+O mac：cmd+O
在lottie-web-master文件夾—build—extension—bodymovin.zxp，這個(gè)就是插件包了，ZXP Installer會(huì)自動(dòng)開(kāi)始安裝。
安裝完成后的軟件主頁(yè)面如下圖所示，表示插件已成功安裝。
4. 打開(kāi)AE，要先對(duì)AE進(jìn)行允許AE使用腳本設(shè)置，路徑如下：
win：Edit（編輯）—preferences（首選項(xiàng)）—general（常規(guī)），
勾選Allow scripts to Write Files and Access Network（允許腳本寫入文件和訪問(wèn)網(wǎng)絡(luò)）
mac：after effect—preference（首選項(xiàng)）—general（常規(guī)），
勾選Allow scripts to Write Files and Access Network（允許腳本寫入文件和訪問(wèn)網(wǎng)絡(luò)）
5. 點(diǎn)擊 window（窗口）--extensions（擴(kuò)展）--Bodymovin 就可以打開(kāi)Bodymovin插件的界面使用插件了。
選擇你要導(dǎo)出的合成和存儲(chǔ)路徑，再點(diǎn)擊渲染即可輸出當(dāng)前選擇的合成動(dòng)畫(huà)json文件。
輸出后設(shè)計(jì)師想要檢查一下json文件是否和我們做的動(dòng)畫(huà)一致，Bodymovin插件也是很貼心的提供了預(yù)覽功能，
具體操作如下：
點(diǎn)擊左上角的“preview”按鈕
檢查完json文件正確無(wú)誤后，接下來(lái)就可以給到程序猿小哥哥去實(shí)現(xiàn)啦~~~不過(guò)要記得給小哥哥準(zhǔn)確的標(biāo)注哦~！
四：存在的問(wèn)題（ 測(cè)試版本：5.4.4 2019.2.25更新 ）
Bodymovin插件方便了設(shè)計(jì)師和開(kāi)發(fā)，但是它也并不是完美能支持所有AE動(dòng)畫(huà)的導(dǎo)出，
這里給大家總結(jié)了目前我在工作中所遇到的Bodymovin插件存在的一些不支出導(dǎo)出的問(wèn)題。
先說(shuō)說(shuō)關(guān)于表達(dá)式，親測(cè)是支持導(dǎo)出的?。?！
1：圖形層屬性不支持列表：
Gradient fill（漸變填充）
Gradient stroke (漸變描邊)
Merge paths （合并路徑）
Twist （旋轉(zhuǎn)）
Wiggle paths （扭動(dòng)路徑）
Wiggle transform （扭動(dòng)變換）
2：自帶特效大多不支持，最常用的目前遇到的不支持的如下：
Gaussian Blur（高斯模糊）
Echo（殘影）
Gradient Ramp（漸變填充）
CC bent it （彎曲變形）
3：常用的融球效果
（圖片來(lái)源于網(wǎng)絡(luò)）
融球所用到的兩個(gè)特效：Rolling Shutter Repair 果凍效應(yīng)修復(fù) 和simple choker 簡(jiǎn)易阻塞均不支持導(dǎo)出。
所以要用到融球效果的設(shè)計(jì)師就要慎重了，這里提供兩個(gè)解決方法：
1，和開(kāi)發(fā)同學(xué)溝通是否可以使用序列幀，雪碧圖，apng，gif等圖片格式。
2，萬(wàn)能的手動(dòng)Key幀，使用路徑動(dòng)畫(huà)去做。（認(rèn)真臉.jpg）
最后說(shuō)說(shuō)我目前遇到的能導(dǎo)出但是開(kāi)發(fā)實(shí)現(xiàn)中有問(wèn)題的特例：
ios端實(shí)現(xiàn)的時(shí)候不能識(shí)別json文件中反向蒙版信息（正向蒙版支持），但是Android是都可以識(shí)別。
所以還是要盡量避免反向蒙版的使用。希望各位設(shè)計(jì)同學(xué)在工作中多注意這樣的特例。遇到了也希望能分享給大家。
五：總結(jié)
雖然有很多常用的屬性和特效不支持導(dǎo)出，總體來(lái)說(shuō)已經(jīng)為設(shè)計(jì)同學(xué)和開(kāi)發(fā)同學(xué)提供了很多很多的方便，相信以后這些不支持的屬性都會(huì)得到很好的解決！！~
目前在工作中已經(jīng)使用到了WEB頁(yè) ios開(kāi)發(fā) android開(kāi)發(fā) 整體都挺順利。
實(shí)現(xiàn)過(guò)程中設(shè)計(jì)同學(xué)要積極主動(dòng)和開(kāi)發(fā)同學(xué)去溝通你想要實(shí)現(xiàn)的動(dòng)畫(huà)效果和方式，并且
針對(duì)插件存在的不完美去選擇動(dòng)畫(huà)的制作方法，避免因?yàn)閯?dòng)效的復(fù)雜而增加開(kāi)發(fā)成本。
