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