名詞解解釋
AE：adobe After Effects，adobe公司的專業(yè)視頻制作軟件。
Bodymovin：是一個AE的插件，它可以把動畫直接輸出成代碼，直接給程序員使用放在各個終端上使用,是airbnb團(tuán)隊開發(fā)的一個插件，其原理是將動畫轉(zhuǎn)成json文件格式，然后通過JS程序輸出，轉(zhuǎn)換成svg、canvas或html5動畫。
Lottie：是集成BodyMovin一系列服務(wù)的總稱，其官網(wǎng)是https://airbnb.design/lottie/
你可以稱這一系列技術(shù)為lottie庫，其官網(wǎng)如此介紹：
Lottie is the native engine that Airbnb’s awesome team built. It uses Bodymovin as the animation exporter and is the ideal complement for getting animations to play natively everywhere.
它是一款由Airbnb團(tuán)隊開發(fā)出的，完美地依托Bodymovin作為動畫輸出、幫助我們在項目中更自然便捷呈現(xiàn)動畫的原生引
技術(shù)背景
前段時間聽部門老大說，Airbnb出了個移動端的動畫庫Lottie，可以和一個名叫Bodymovin的AE插件結(jié)合起來，把在AE上做好的動畫導(dǎo)出為json文件，然后以Android/iOS原生動畫的形式在移動設(shè)備上渲染播放。AE（Adobe After Effects）是視頻后期特效和動畫制作的行家，前段時間充斥視野的MG動畫就是用它制作的。如果真的可以實現(xiàn)，就會大大方便前端動畫的設(shè)計。
2017年4月8日，第二屆中國前端開發(fā)者大會（FDCon2017），有日程提到了Lottie和Bodymovin。渚薰的主題是“H5互動的正確打開方式”，有作相關(guān)推薦。
下面是一個PPT截圖，講解了其中原理：
這個AE插件可以把AE上做好的合成（Composition，類似于Pr里的剪輯序列）導(dǎo)出成帶有矢量動畫信息的json文件，并可以在以下平臺播放：
- Web頁面，以svg/canvas/html+js的形式。Airbnb提供了作為Player的js庫——lottie-web；
- Android原生，通過Airbnb的開源項目“lottie-android”實現(xiàn)；
- iOS原生，通過Airbnb的開源項目“lottie-ios”實現(xiàn)；
- React Native，通過Airbnb的開源項目“lottie-react-native”實現(xiàn)。
詳細(xì)使用指引
下面就分步驟總結(jié)下Bodymovin的安裝和使用，以及導(dǎo)出的動畫如何在Web頁面上播放：
1. 如果電腦上沒有AE的話，需要安裝AE CC2014或更高版本。以AE CC2019為例：
2. AE安裝完成后，安裝Bodymovin插件。
安裝插件有幾種方法，比如直接到Adobe的插件中心下載插件（鏈接：Adobe Add-ons，一般不是最新版），也可以到Bodymovin的GitHub首頁下載最新版的插件并安裝。我推薦第二種方法，這個方法步驟如下：
2.1 到Bodymovin的GitHub首頁（鏈接：[airbnb/lottie-web](https://github.com/airbnb/lottie-web）克隆項目到本地，或者下載.zip包。
小技巧：有朋友反饋從github下載過慢，你可以注冊一個gitee碼云的帳號，將github的倉庫克隆到gitee再下載，速度會有很大的改善。
2.2 git到文件包后，在項目目錄的“/build/extension”目錄下找到“bodymovin.zxp”文件，這個就是插件包了。
2.3 獲取到了插件，你可能是無法打開的，這時需要安裝一個ZXP install插件工具。
點擊http://aescripts.com/learn/zxp-installer/ 根據(jù)網(wǎng)站界面，選擇你的操作系統(tǒng)版本（windows或mac）下載ZXP install插件工具。
下載完成，打開它，點擊“File”>“Open”菜單項載入上述.zxp插件包，ZXP Installer會自動開始安裝。安裝完成后的軟件主頁面如下圖所示，表示插件已成功安裝。
3. 打開AE，點擊“編輯”>“首選項”>“常規(guī)”菜單項，選中“允許腳本寫入文件和訪問網(wǎng)絡(luò)”，點擊確定。
如果是舊版，則可能是在：“編輯”>“首選項”>“腳本和表達(dá)式”菜單項，選中“允許腳本寫入文件和訪問網(wǎng)絡(luò)”中，如下圖
[圖片上傳失敗...(image-abe546-1582519383050)]
4. 點擊“窗口”>“擴(kuò)展”>“Bodymovin”菜單項，就可以打開Bodymovin的界面使用插件了。
5. 我們在空的AE項目里，新建一個名為“合成1”的合成，并制作一段簡單的動畫：
6. 打開Bodymovin插件窗口，可以發(fā)現(xiàn)“合成1”出現(xiàn)在了下面的列表中。選中“合成1”，設(shè)置好json文件輸出位置，點擊“Render”。
7. Bodymovin還為生成出的json文件提供了預(yù)覽功能，點擊插件界面上的“Preview”按鈕，點擊“Browse”載入剛剛生成的json文件，就會看到，動畫被原汁原味地導(dǎo)出了：
可以從上圖看到，預(yù)覽中還提示該動畫有多少幀。
8. 接下來我們新建一個網(wǎng)頁來播放這段動畫
你需要進(jìn)入剛剛從Github下載的lottie-web項目目錄下“\build\player\lottie.min.js”和剛剛生成的json文件復(fù)制到網(wǎng)頁根目錄，新建一個html文件。
下面的代碼則提供了CDN的lottie.min.js地址：代碼如下：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Bodymovin Demo</title>
<meta name="Generator" content="Zoomla!逐浪?CMS">
<meta name="Author" content="去上云73ic.com">
<meta name="Others" content="字體呈現(xiàn)基于逐浪字庫f.ziti163.com">
<script src="http://code.z01.com/lottie.min.js"></script>
</head>
<body>
<div id="animation"></div>
<script>
lottie.loadAnimation({
path:'data.json', //json文件路徑
loop:true,
autoplay:true,
renderer:'canvas', //渲染方式，有"html"、"canvas"和"svg"三種
container:document.getElementById('animation')
});
//lottie-web的完整api文檔見GitHub項目首頁(https://github.com/airbnb/lottie-web)
</script>
</body>
</html>
9 用http方式打開這個頁面，就會發(fā)現(xiàn)動畫成功跑起來了，是不是很黑科技？
記得，這時你要用http或https的方式將你的這個靜態(tài)Html頁面跑起來，才能看到動畫，如果直接點擊這個html用file模式是無法看到動畫的。
為何推薦
記得在FDCon2017大會上，演講完畢后，有個人提出了我一直想問的問題：
Adobe已經(jīng)推出HTML5動畫設(shè)計軟件An（Adobe Animate CC），為什么不用An而要用這種方式？
主講人答道，An的前身就是Flash，它生成出來的H5動畫是用js寫的（使用CreateJS庫），后期修改和維護(hù)會更復(fù)雜。
確實如此，用過Lottie之后，不難看出它的靈活性的確很高，而且json形式的動畫也遠(yuǎn)比js寫出來的動畫更適合跨平臺。實在嘆服，為Lottie點10086個贊。
學(xué)習(xí)總結(jié)
缺點：
1，Bodymovin渲染的動畫，如果是在AE里面創(chuàng)建的矢量元素，則直接生產(chǎn)json代碼。如果動畫里有導(dǎo)入位圖，則會導(dǎo)出編號后的圖片文件到image文件夾里。
2，AE里里制作動畫注意不要有太多的合成嵌套，原生環(huán)境下有些會出現(xiàn)渲染不出的情況。
3，用AE的朋友可能留意到上面的WD動畫使用了修剪路徑的效果，這里要提醒使用該效果時，不宜同時修改start和End等多個參數(shù)，渲染出來的效果會有些許偏差。然后路徑動畫的stroke值越大，誤差可能會越大，需要人為調(diào)整。
4，原生環(huán)境下運行json動畫時，出現(xiàn)了起步延遲的狀況。所以也不太適合對動畫時間有精密要求的項目里使用。
5，安卓Android 5.0以下的機(jī)型會不支持SVG動畫，所以對接安卓的時候需要做好兩手準(zhǔn)備。
優(yōu)點：
所謂凱撒的還給凱撒，上帝的還給上帝。Bodymovin讓設(shè)計開發(fā)各自專注在自己的領(lǐng)域而不用去在意動畫實現(xiàn)過程中的一些繁縟細(xì)節(jié)。而且只要保存好AE源文件我們可以隨時導(dǎo)出替換json文件，方便動畫調(diào)試。懂一些基礎(chǔ)前端代碼的小伙伴們，甚至可以自己發(fā)揮腦洞，自己調(diào)試出一些有趣的原型動畫出來。一套json文件，就能同時滿足web 原生 reactNative不同環(huán)境的動畫制作需求。
相信Bodymoivn還會不斷的迭代升級，開放更多的定制化參數(shù)。有興趣下載試玩起來。
制作要領(lǐng)
由于lottie是用來適配移動庫的，如果你只是PC上使用要好些，如果要在多個安卓版本中使用，則需要選擇正確的版本。
下面這一節(jié)如果你不是做移動開發(fā)可以忽略半部份，但后面的制圖要領(lǐng)建議要看
開始的開始，使用前需要確認(rèn)的事情
? 請確認(rèn)好你們使用的bodymovin版和兩個客戶端不同的版本
并不是最新版就一定適用，這個是個誤區(qū)。因為是多端協(xié)同工作的，可能bodymovin這里有5.5.6的最新版本，但并不代表安卓端可以調(diào)配并使用到最新版本的json文件，所以使用之前，一定要先確認(rèn)好設(shè)計師和客戶端可以使用的版本。下面貼上我自己最后找到的版本確認(rèn)作為例子給大家參考。那么在哪里可以找到并測試適合自己的版本呢？接下來也會和大家說明。
[圖片上傳失敗...(image-6a9369-1582519383050)]
? 如何找到適合的bodymovin插件版本？
AE使用的bodymovin的各個版本可以在github上面找到。具體各個版本的下載，只需要下載對應(yīng)的壓縮包，然后解壓后找到你要的對應(yīng)的bodymovin插件即可。
??bodymovin插件下載：https://github.com/airbnb/lottie-web/releases
? 程序怎么找到適合自己的版本？
其實這個具體我也不清楚，但我們自己程序那邊都是看他們的GitHub相關(guān)信息啦，相信程序猿們總有辦法。這里奉上他們對應(yīng)的github網(wǎng)址。
??安卓：https://github.com/airbnb/lottie-android
??iOS：https://github.com/airbnb/lottie-ios
? 怎么測試版本之間的兼容？
大原則：一個版本的bodymovin輸出的json文件可以在兩個客戶端app上運行，并且它的動畫和設(shè)計效果是一樣的，就代表它們兼容。
測試的時候，你需要準(zhǔn)備iOS和安卓兩個不同機(jī)型的手機(jī)，然后分別下載他們對應(yīng)的軟件即可。iOS的叫「Lottie preview」，安卓的叫「Lottie」。若最終手機(jī)上看到的效果是和自己原效果一樣，那就代表這個動畫生成的json文件可以在這些版本的客戶端上使用。因為手機(jī)可以看到，就代表當(dāng)前客戶端app的版本可以編譯到這個版本的json文件。
如果高版本的bodymovin輸出的json文件客戶端app運行不到，那就試試低一點的版本吧。
? 怎么下載較早之前的iOS/安卓Lottie app？
當(dāng)我們遇到官方發(fā)布在應(yīng)用市場的app版本并不適合我們動畫json文件的版本，我們怎么樣找到之前的app包測試使用呢？答案還是上github上面找。因為iOS第一次測試最新版本就完美匹配版本了lol，所以我就沒怎么查過。這里奉上找安卓app包的方法：
1. 找到Lottie-Android的GitHub網(wǎng)址，點擊release
??：https://github.com/airbnb/lottie-android
2.查看對應(yīng)的版本有無apk包下載
? 怎么查看當(dāng)前的這個json文件版本是多少？
再次強(qiáng)調(diào)一下～json文件的版本等于bodymovin的版本。那么如果你當(dāng)前只有一個json文件而你不知道它是什么版本，那怎么查看呢？很簡單，使用代碼編輯器打開它，你就知道它的版本是多少了。如果你電腦沒有安裝任何代碼編輯器，使用筆記本打開方式也可以查看到。
??作圖前
? 認(rèn)真觀看官方文檔，bodymovin并不支持所有動畫特效的輸出
試用之前大佬和我說先試試我們常規(guī)做法的動畫有什么是bodymovin輸出不了的。然后我把我們自己做動畫常用的漸變、描邊、透明度、模糊這幾個都嘗試了一遍。結(jié)果發(fā)現(xiàn)插件最后的導(dǎo)出支持只有兩個。所以，使用bodymovin前，一定要先試一下你的效果能否實現(xiàn)。而且一定要看官網(wǎng)寫的特效支持文檔！看清楚不同終端它支持的效果是否一樣！
??bodymovin支持導(dǎo)出效果：http://airbnb.io/lottie/#/supported-features
? bodymovin不支持AE表達(dá)式輸出
其實這個和第二點說的是一樣的，而且官方那個文檔也說了。只不過因為這個很重要，所以務(wù)必提醒大家不要踩坑～如果要做抖動的效果還是自己乖乖K幀吧。如果是做循環(huán)效果的話就交給程序吧！因為轉(zhuǎn)化成json文件之后，程序有更大的發(fā)揮空間。（循環(huán)、改顏色等程序都可以幫到你）如果是要和程序員溝通的話，強(qiáng)烈建議不同客戶端都看一下文檔。拋個網(wǎng)站給你們，到時候給你們的客戶端各取所需吧。
??文檔官網(wǎng)：http://airbnb.io/lottie/#/
? 檢查測試一下特別的圖片特效是否支持
這里說的圖片特效是指你在sketch或者ai里面畫的圖片是否可以支持導(dǎo)出，圖片導(dǎo)出后是否會出現(xiàn)錯位的效果。這一步很重要，如果你沒有搞清楚自己常用的特效能否支持就急急忙忙開始弄了，這樣以后浪費的時間更多。下面貼上我大佬叫我確認(rèn)的東西，大家可以參考一下。（此處照例膜拜大佬）。
??創(chuàng)作動畫前
? 使用AE里面的「從矢量圖層創(chuàng)建形狀」，使動畫素材可代碼化
動畫的圖片我們一般都是使用sketch或者AI畫好以后再導(dǎo)進(jìn)去AE。但是最好的解決方案把圖片重新在AE里面重新繪制。而在AE里面重新繪制就需要用到「從矢量圖層創(chuàng)建形狀」這個了。因為設(shè)計師把圖片“畫”進(jìn)AE之后，連圖片包都不需要了，直接一個動畫一段代碼就完成了。這樣就省去很多溝通時間和解決適配的問題了。這里提供兩個方法給大家。
1. sketch導(dǎo)出svg格式后轉(zhuǎn)成.ai文件
第一種方法比較復(fù)雜，但不會踩雷。其實就是把切圖轉(zhuǎn)成ai格式導(dǎo)進(jìn)去ae再創(chuàng)建形狀?？墒沁@樣處理后導(dǎo)入AE，形狀可以保留更多編輯。具體步驟如下：
1.sketch里面把切圖導(dǎo)出svg格式
2.svg轉(zhuǎn)成.ai格式導(dǎo)進(jìn)去AE
3.使用AE的「從矢量圖層創(chuàng)建形狀」重新繪制
2. 使用「AEUX」插件
這個對于比較簡單的圖形還是支持導(dǎo)出的。但是遇到相對應(yīng)復(fù)雜的圖形，例如使用了布爾運算繪制的圖形，就會有一些效果缺失等奇奇怪怪的問題，所以各位還是看看哪個對你們方便了。下面會奉上插件鏈接下載和教程網(wǎng)址。
??：https://oursketch.com/plugin/aeux
? 切圖之前請確定好@1x的尺寸時的動畫大小
因為是矢量動畫，程序可以自動根據(jù)不同機(jī)型去做適配。所以就要養(yǎng)好一些設(shè)計習(xí)慣，確定好素材之后，把動畫@1x時候的尺寸確定好動畫尺寸。
??導(dǎo)出動畫后
? 如何查看自己的動畫效果是否完美輸出？
當(dāng)你把動畫導(dǎo)出一個json文件之后，你可以把自己的json文件放到LottieFiles上面查看效果。進(jìn)去后下載了Lottie的客戶端后直接掃碼就可以看到自己動畫在手機(jī)上的效果，超方便的！
給
??LottieFiles：https://lottiefiles.com/
? 提高動畫通過率的小tips
你以為這個網(wǎng)站只能丟一個json文件上去嗎？把含有圖片和json文件的壓縮包丟上去，它也可以跑起來，只不過你在網(wǎng)站上可以看到那些圖片文件，但在掃描二維碼后再客戶端上就看不到圖片了。這個方法最適合交貨給PM和老板的時候給他們看了，越高保真越容易提高通過率嘛～
附參考信息：
https://airbnb.design/lottie/
https://zhuanlan.zhihu.com/p/26304609
http://sjnk88.com/design/32.html
https://www.zcool.com.cn/article/ZOTk2MDgw.html
