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