看逐浪CMS技术小哥做SVG动画（附使用Bodymovin和Lottie将Adobe After Effects(AE)程式转为 HTML5/Android/iOS原生的动画全过程-即AE转svg\c
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-0ZhASTmc-1582519420194)(http://www.z01.com/UploadFiles/Anony/content/md/BsGniyv47Y.jpg)]
#名詞解解釋
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-xxKbuO5g-1582519420196)(http://www.z01.com/UploadFiles/Anony/content/md/kKKqc3xQWY.jpg “adobe After Effects”)]
AE：adobe After Effects，adobe公司的專業視頻制作軟件。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-4eh9Smly-1582519420197)(http://www.z01.com/UploadFiles/Anony/content/md/DeYMtcSITO.jpg “Bodymovin插件預覽”)]
Bodymovin：是一個AE的插件，它可以把動畫直接輸出成代碼，直接給程序員使用放在各個終端上使用,是airbnb團隊開發的一個插件，其原理是將動畫轉成json文件格式，然后通過JS程序輸出，轉換成svg、canvas或html5動畫。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-fjPXG1Ib-1582519420198)(http://www.z01.com/UploadFiles/Anony/content/md/YdBrXdadgn.jpg “Lottie官網界面”)]
Lottie：是集成BodyMovin一系列服務的總稱，其官網是https://airbnb.design/lottie/
你可以稱這一系列技術為lottie庫，其官網如此介紹：
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團隊開發出的，完美地依托Bodymovin作為動畫輸出、幫助我們在項目中更自然便捷呈現動畫的原生引
#技術背景
前段時間聽部門老大說，Airbnb出了個移動端的動畫庫Lottie，可以和一個名叫Bodymovin的AE插件結合起來，把在AE上做好的動畫導出為json文件，然后以Android/iOS原生動畫的形式在移動設備上渲染播放。AE（Adobe After Effects）是視頻后期特效和動畫制作的行家，前段時間充斥視野的MG動畫就是用它制作的。如果真的可以實現，就會大大方便前端動畫的設計。
2017年4月8日，第二屆中國前端開發者大會（FDCon2017），有日程提到了Lottie和Bodymovin。渚薰的主題是“H5互動的正確打開方式”，有作相關推薦。
下面是一個PPT截圖，講解了其中原理：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Crgde22g-1582519420199)(http://www.z01.com/UploadFiles/Anony/content/md/6uQ3O326Gi.jpg)]
這個AE插件可以把AE上做好的合成（Composition，類似于Pr里的剪輯序列）導出成帶有矢量動畫信息的json文件，并可以在以下平臺播放：
- Web頁面，以svg/canvas/html+js的形式。Airbnb提供了作為Player的js庫——lottie-web；
- Android原生，通過Airbnb的開源項目“lottie-android”實現；
- iOS原生，通過Airbnb的開源項目“lottie-ios”實現；
- React Native，通過Airbnb的開源項目“lottie-react-native”實現。
#詳細使用指引
下面就分步驟總結下Bodymovin的安裝和使用，以及導出的動畫如何在Web頁面上播放：
1. 如果電腦上沒有AE的話，需要安裝AE CC2014或更高版本。以AE CC2019為例：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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包。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6jU4cOXX-1582519420201)(http://www.z01.com/UploadFiles/Anony/content/md/xfcoxeyKyk.jpg “lottie-web倉庫”)]
小技巧：有朋友反饋從github下載過慢，你可以注冊一個gitee碼云的帳號，將github的倉庫克隆到gitee再下載，速度會有很大的改善。
2.2 git到文件包后，在項目目錄的“/build/extension”目錄下找到“bodymovin.zxp”文件，這個就是插件包了。
2.3 獲取到了插件，你可能是無法打開的，這時需要安裝一個ZXP install插件工具。
點擊http://aescripts.com/learn/zxp-installer/ 根據網站界面，選擇你的操作系統版本（windows或mac）下載ZXP install插件工具。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-OLYKJzmc-1582519420202)(http://www.z01.com/UploadFiles/Anony/content/md/2zmo7crtmF.jpg “zxp-installer下載界面”)]
下載完成，打開它，點擊“File”>“Open”菜單項載入上述.zxp插件包，ZXP Installer會自動開始安裝。安裝完成后的軟件主頁面如下圖所示，表示插件已成功安裝。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-X9AdkOIg-1582519420203)(http://www.z01.com/UploadFiles/Anony/content/md/rsV4Ww1AxV.jpg “安裝ZXP install插件”)]
3. 打開AE，點擊“編輯”>“首選項”>“常規”菜單項，選中“允許腳本寫入文件和訪問網絡”，點擊確定。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nhyHSzAC-1582519420204)(http://www.z01.com/UploadFiles/Anony/content/md/iGxNvgurxh.jpg “ae 2019中的設置”)]
如果是舊版，則可能是在：“編輯”>“首選項”>“腳本和表達式”菜單項，選中“允許腳本寫入文件和訪問網絡”中，如下圖
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-EZA8ABFK-1582519420205)(http://www.z01.com/UploadFiles/Anony/content/md/OJyVOrol5R.jpg “ae 2017等舊版設置”)]
4. 點擊“窗口”>“擴展”>“Bodymovin”菜單項，就可以打開Bodymovin的界面使用插件了。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-pfogAkUq-1582519420206)(http://www.z01.com/UploadFiles/Anony/content/md/vMaX3kqsMX.jpg “在ae中調用插件”)]
5. 我們在空的AE項目里，新建一個名為“合成1”的合成，并制作一段簡單的動畫：
6. 打開Bodymovin插件窗口，可以發現“合成1”出現在了下面的列表中。選中“合成1”，設置好json文件輸出位置，點擊“Render”。
7. Bodymovin還為生成出的json文件提供了預覽功能，點擊插件界面上的“Preview”按鈕，點擊“Browse”載入剛剛生成的json文件，就會看到，動畫被原汁原味地導出了：
可以從上圖看到，預覽中還提示該動畫有多少幀。
8. 接下來我們新建一個網頁來播放這段動畫
你需要進入剛剛從Github下載的lottie-web項目目錄下“\build\player\lottie.min.js”和剛剛生成的json文件復制到網頁根目錄，新建一個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="字體呈現基于逐浪字庫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方式打開這個頁面，就會發現動畫成功跑起來了，是不是很黑科技？
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-DIMvXb3D-1582519420210)(http://www.z01.com/UploadFiles/Anony/content/md/WFqT1DsqpF.jpg “在http中運行的效果”)]
記得，這時你要用http或https的方式將你的這個靜態Html頁面跑起來，才能看到動畫，如果直接點擊這個html用file模式是無法看到動畫的。
為何推薦
記得在FDCon2017大會上，演講完畢后，有個人提出了我一直想問的問題：
Adobe已經推出HTML5動畫設計軟件An（Adobe Animate CC），為什么不用An而要用這種方式？
主講人答道，An的前身就是Flash，它生成出來的H5動畫是用js寫的（使用CreateJS庫），后期修改和維護會更復雜。
確實如此，用過Lottie之后，不難看出它的靈活性的確很高，而且json形式的動畫也遠比js寫出來的動畫更適合跨平臺。實在嘆服，為Lottie點10086個贊。
學習總結
缺點：
1，Bodymovin渲染的動畫，如果是在AE里面創建的矢量元素，則直接生產json代碼。如果動畫里有導入位圖，則會導出編號后的圖片文件到image文件夾里。
2，AE里里制作動畫注意不要有太多的合成嵌套，原生環境下有些會出現渲染不出的情況。
3，用AE的朋友可能留意到上面的WD動畫使用了修剪路徑的效果，這里要提醒使用該效果時，不宜同時修改start和End等多個參數，渲染出來的效果會有些許偏差。然后路徑動畫的stroke值越大，誤差可能會越大，需要人為調整。
4，原生環境下運行json動畫時，出現了起步延遲的狀況。所以也不太適合對動畫時間有精密要求的項目里使用。
5，安卓Android 5.0以下的機型會不支持SVG動畫，所以對接安卓的時候需要做好兩手準備。
優點：
所謂凱撒的還給凱撒，上帝的還給上帝。Bodymovin讓設計開發各自專注在自己的領域而不用去在意動畫實現過程中的一些繁縟細節。而且只要保存好AE源文件我們可以隨時導出替換json文件，方便動畫調試。懂一些基礎前端代碼的小伙伴們，甚至可以自己發揮腦洞，自己調試出一些有趣的原型動畫出來。一套json文件，就能同時滿足web 原生 reactNative不同環境的動畫制作需求。
相信Bodymoivn還會不斷的迭代升級，開放更多的定制化參數。有興趣下載試玩起來。
制作要領
由于lottie是用來適配移動庫的，如果你只是PC上使用要好些，如果要在多個安卓版本中使用，則需要選擇正確的版本。
下面這一節如果你不是做移動開發可以忽略半部份，但后面的制圖要領建議要看
開始的開始，使用前需要確認的事情
? 請確認好你們使用的bodymovin版和兩個客戶端不同的版本并不是最新版就一定適用，這個是個誤區。因為是多端協同工作的，可能bodymovin這里有5.5.6的最新版本，但并不代表安卓端可以調配并使用到最新版本的json文件，所以使用之前，一定要先確認好設計師和客戶端可以使用的版本。下面貼上我自己最后找到的版本確認作為例子給大家參考。那么在哪里可以找到并測試適合自己的版本呢？接下來也會和大家說明。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-qMFqOnpG-1582519420211)(http://www.z01.com/UploadFiles/Anony/content/md/0YvXL3ALjz.jpg)]
? 如何找到適合的bodymovin插件版本？
AE使用的bodymovin的各個版本可以在github上面找到。具體各個版本的下載，只需要下載對應的壓縮包，然后解壓后找到你要的對應的bodymovin插件即可。
🌍bodymovin插件下載：https://github.com/airbnb/lottie-web/releases
? 程序怎么找到適合自己的版本？
其實這個具體我也不清楚，但我們自己程序那邊都是看他們的GitHub相關信息啦，相信程序猿們總有辦法。這里奉上他們對應的github網址。
🌍安卓：https://github.com/airbnb/lottie-android
🌍iOS：https://github.com/airbnb/lottie-ios
? 怎么測試版本之間的兼容？
大原則：一個版本的bodymovin輸出的json文件可以在兩個客戶端app上運行，并且它的動畫和設計效果是一樣的，就代表它們兼容。測試的時候，你需要準備iOS和安卓兩個不同機型的手機，然后分別下載他們對應的軟件即可。iOS的叫「Lottie preview」，安卓的叫「Lottie」。若最終手機上看到的效果是和自己原效果一樣，那就代表這個動畫生成的json文件可以在這些版本的客戶端上使用。因為手機可以看到，就代表當前客戶端app的版本可以編譯到這個版本的json文件。如果高版本的bodymovin輸出的json文件客戶端app運行不到，那就試試低一點的版本吧。? 怎么下載較早之前的iOS/安卓Lottie app？當我們遇到官方發布在應用市場的app版本并不適合我們動畫json文件的版本，我們怎么樣找到之前的app包測試使用呢？答案還是上github上面找。因為iOS第一次測試最新版本就完美匹配版本了lol，所以我就沒怎么查過。這里奉上找安卓app包的方法：
1. 找到Lottie-Android的GitHub網址，點擊release🌍：https://github.com/airbnb/lottie-android 2.查看對應的版本有無apk包下載
? 怎么查看當前的這個json文件版本是多少？
再次強調一下～json文件的版本等于bodymovin的版本。那么如果你當前只有一個json文件而你不知道它是什么版本，那怎么查看呢？很簡單，使用代碼編輯器打開它，你就知道它的版本是多少了。如果你電腦沒有安裝任何代碼編輯器，使用筆記本打開方式也可以查看到。
🌟作圖前
? 認真觀看官方文檔，bodymovin并不支持所有動畫特效的輸出
試用之前大佬和我說先試試我們常規做法的動畫有什么是bodymovin輸出不了的。然后我把我們自己做動畫常用的漸變、描邊、透明度、模糊這幾個都嘗試了一遍。結果發現插件最后的導出支持只有兩個。所以，使用bodymovin前，一定要先試一下你的效果能否實現。而且一定要看官網寫的特效支持文檔！看清楚不同終端它支持的效果是否一樣！
🌍bodymovin支持導出效果：http://airbnb.io/lottie/#/supported-features
? bodymovin不支持AE表達式輸出
其實這個和第二點說的是一樣的，而且官方那個文檔也說了。只不過因為這個很重要，所以務必提醒大家不要踩坑～如果要做抖動的效果還是自己乖乖K幀吧。如果是做循環效果的話就交給程序吧！因為轉化成json文件之后，程序有更大的發揮空間。（循環、改顏色等程序都可以幫到你）如果是要和程序員溝通的話，強烈建議不同客戶端都看一下文檔。拋個網站給你們，到時候給你們的客戶端各取所需吧。
🌍文檔官網：http://airbnb.io/lottie/#/
? 檢查測試一下特別的圖片特效是否支持
這里說的圖片特效是指你在sketch或者ai里面畫的圖片是否可以支持導出，圖片導出后是否會出現錯位的效果。這一步很重要，如果你沒有搞清楚自己常用的特效能否支持就急急忙忙開始弄了，這樣以后浪費的時間更多。下面貼上我大佬叫我確認的東西，大家可以參考一下。（此處照例膜拜大佬）。
🌟創作動畫前
? 使用AE里面的「從矢量圖層創建形狀」，使動畫素材可代碼化
動畫的圖片我們一般都是使用sketch或者AI畫好以后再導進去AE。但是最好的解決方案把圖片重新在AE里面重新繪制。而在AE里面重新繪制就需要用到「從矢量圖層創建形狀」這個了。因為設計師把圖片“畫”進AE之后，連圖片包都不需要了，直接一個動畫一段代碼就完成了。這樣就省去很多溝通時間和解決適配的問題了。這里提供兩個方法給大家。
1. sketch導出svg格式后轉成.ai文件第一種方法比較復雜，但不會踩雷。其實就是把切圖轉成ai格式導進去ae再創建形狀。可是這樣處理后導入AE，形狀可以保留更多編輯。具體步驟如下：
1.sketch里面把切圖導出svg格式2.svg轉成.ai格式導進去AE3.使用AE的「從矢量圖層創建形狀」重新繪制2. 使用「AEUX」插件這個對于比較簡單的圖形還是支持導出的。但是遇到相對應復雜的圖形，例如使用了布爾運算繪制的圖形，就會有一些效果缺失等奇奇怪怪的問題，所以各位還是看看哪個對你們方便了。下面會奉上插件鏈接下載和教程網址。
🌍：https://oursketch.com/plugin/aeux
? 切圖之前請確定好@1x的尺寸時的動畫大小
因為是矢量動畫，程序可以自動根據不同機型去做適配。所以就要養好一些設計習慣，確定好素材之后，把動畫@1x時候的尺寸確定好動畫尺寸。
🌟導出動畫后
? 如何查看自己的動畫效果是否完美輸出？
當你把動畫導出一個json文件之后，你可以把自己的json文件放到LottieFiles上面查看效果。進去后下載了Lottie的客戶端后直接掃碼就可以看到自己動畫在手機上的效果，超方便的！
給
🌍LottieFiles：https://lottiefiles.com/
? 提高動畫通過率的小tips
你以為這個網站只能丟一個json文件上去嗎？把含有圖片和json文件的壓縮包丟上去，它也可以跑起來，只不過你在網站上可以看到那些圖片文件，但在掃描二維碼后再客戶端上就看不到圖片了。這個方法最適合交貨給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
總結
以上是生活随笔為你收集整理的看逐浪CMS技术小哥做SVG动画（附使用Bodymovin和Lottie将Adobe After Effects(AE)程式转为 HTML5/Android/iOS原生的动画全过程-即AE转svg\c的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 分享选书原则，推荐几本书（附书评）
- 下一篇： android动态壁纸文件,DIY An