[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-0ZhASTmc-1582519420194)(http://www.z01.com/UploadFiles/Anony/content/md/BsGniyv47Y.jpg)]

#名詞解解釋

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-xxKbuO5g-1582519420196)(http://www.z01.com/UploadFiles/Anony/content/md/kKKqc3xQWY.jpg “adobe After Effects”)]
AE：adobe After Effects，adobe公司的專業(yè)視頻制作軟件。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-4eh9Smly-1582519420197)(http://www.z01.com/UploadFiles/Anony/content/md/DeYMtcSITO.jpg “Bodymovin插件預(yù)覽”)]
Bodymovin：是一個AE的插件，它可以把動畫直接輸出成代碼，直接給程序員使用放在各個終端上使用,是airbnb團(tuán)隊開發(fā)的一個插件，其原理是將動畫轉(zhuǎn)成json文件格式，然后通過JS程序輸出，轉(zhuǎn)換成svg、canvas或html5動畫。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-fjPXG1Ib-1582519420198)(http://www.z01.com/UploadFiles/Anony/content/md/YdBrXdadgn.jpg “Lottie官網(wǎng)界面”)]
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截圖，講解了其中原理：
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Crgde22g-1582519420199)(http://www.z01.com/UploadFiles/Anony/content/md/6uQ3O326Gi.jpg)]

這個AE插件可以把AE上做好的合成（Composition，類似于Pr里的剪輯序列）導(dǎo)出成帶有矢量動畫信息的json文件，并可以在以下平臺播放：

• Web頁面，以svg/canvas/html+js的形式。Airbnb提供了作為Player的js庫——lottie-web；
• Android原生，通過Airbnb的開源項目“l(fā)ottie-android”實現(xiàn)；
• iOS原生，通過Airbnb的開源項目“l(fā)ottie-ios”實現(xiàn)；
• React Native，通過Airbnb的開源項目“l(fā)ottie-react-native”實現(xiàn)。

#詳細(xì)使用指引
下面就分步驟總結(jié)下Bodymovin的安裝和使用，以及導(dǎo)出的動畫如何在Web頁面上播放：

1. 如果電腦上沒有AE的話，需要安裝AE CC2014或更高版本。以AE CC2019為例：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-aCBeV9oB-1582519420200)(http://www.z01.com/UploadFiles/Anony/content/md/992yZ5Wnp3.jpg “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包。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-6jU4cOXX-1582519420201)(http://www.z01.com/UploadFiles/Anony/content/md/xfcoxeyKyk.jpg “l(fā)ottie-web倉庫”)]

小技巧：有朋友反饋從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插件工具。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-OLYKJzmc-1582519420202)(http://www.z01.com/UploadFiles/Anony/content/md/2zmo7crtmF.jpg “zxp-installer下載界面”)]

下載完成，打開它，點擊“File”>“Open”菜單項載入上述.zxp插件包，ZXP Installer會自動開始安裝。安裝完成后的軟件主頁面如下圖所示，表示插件已成功安裝。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-X9AdkOIg-1582519420203)(http://www.z01.com/UploadFiles/Anony/content/md/rsV4Ww1AxV.jpg “安裝ZXP install插件”)]

3. 打開AE，點擊“編輯”>“首選項”>“常規(guī)”菜單項，選中“允許腳本寫入文件和訪問網(wǎng)絡(luò)”，點擊確定。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-nhyHSzAC-1582519420204)(http://www.z01.com/UploadFiles/Anony/content/md/iGxNvgurxh.jpg “ae 2019中的設(shè)置”)]

如果是舊版，則可能是在：“編輯”>“首選項”>“腳本和表達(dá)式”菜單項，選中“允許腳本寫入文件和訪問網(wǎng)絡(luò)”中，如下圖

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-EZA8ABFK-1582519420205)(http://www.z01.com/UploadFiles/Anony/content/md/OJyVOrol5R.jpg “ae 2017等舊版設(shè)置”)]

4. 點擊“窗口”>“擴(kuò)展”>“Bodymovin”菜單項，就可以打開Bodymovin的界面使用插件了。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-pfogAkUq-1582519420206)(http://www.z01.com/UploadFiles/Anony/content/md/vMaX3kqsMX.jpg “在ae中調(diào)用插件”)]

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)動畫成功跑起來了，是不是很黑科技？

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-DIMvXb3D-1582519420210)(http://www.z01.com/UploadFiles/Anony/content/md/WFqT1DsqpF.jpg “在http中運(yù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)境下運(yù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)作為例子給大家參考。那么在哪里可以找到并測試適合自己的版本呢？接下來也會和大家說明。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-qMFqOnpG-1582519420211)(http://www.z01.com/UploadFiles/Anony/content/md/0YvXL3ALjz.jpg)]
? 如何找到適合的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上運(yùn)行，并且它的動畫和設(shè)計效果是一樣的，就代表它們兼容。測試的時候，你需要準(zhǔn)備iOS和安卓兩個不同機(jī)型的手機(jī)，然后分別下載他們對應(yīng)的軟件即可。iOS的叫「Lottie preview」，安卓的叫「Lottie」。若最終手機(jī)上看到的效果是和自己原效果一樣，那就代表這個動畫生成的json文件可以在這些版本的客戶端上使用。因為手機(jī)可以看到，就代表當(dāng)前客戶端app的版本可以編譯到這個版本的json文件。如果高版本的bodymovin輸出的json文件客戶端app運(yùn)行不到，那就試試低一點的版本吧。? 怎么下載較早之前的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)去AE3.使用AE的「從矢量圖層創(chuàng)建形狀」重新繪制2. 使用「AEUX」插件

這個對于比較簡單的圖形還是支持導(dǎo)出的。但是遇到相對應(yīng)復(fù)雜的圖形，例如使用了布爾運(yùn)算繪制的圖形，就會有一些效果缺失等奇奇怪怪的問題，所以各位還是看看哪個對你們方便了。下面會奉上插件鏈接下載和教程網(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

總結(jié)

以上是生活随笔為你收集整理的看逐浪CMS技术小哥做SVG动画（附使用Bodymovin和Lottie将Adobe After Effects(AE)程式转为 HTML5/Android/iOS原生的动画全过程-即AE转svg\c的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。