Bodymovin：Bodymovin和Lottie：把AE動畫轉換成HTML5/Android/iOS原生動畫

轉自：https://www.cnblogs.com/zamhown/p/6688369.html

大殺器Bodymovin和Lottie：把AE動畫轉換成HTML5/Android/iOS原生動畫

 

前段時間聽部門老大說，Airbnb出了個移動端的動畫庫Lottie，能夠和一個名叫Bodymovin的AE插件結合起來，把在AE上作好的動畫導出爲json文件，而後以Android/iOS原生動畫的形式在移動設備上渲染播放。AE（Adobe After Effects）但是視頻後期特效和動畫製做的行家，前段時間充斥視野的MG動畫都是用它製做的。若是真的能夠實現，就會大大方便前端動畫的設計。

 

後來到4月8日，我參加了第二屆中國前端開發者大會（FDCon2017），做爲菜鳥瞻仰了下各位大牛。巧的是，來自阿里的大牛渚薰作主題演講時，也提到了Lottie和Bodymovin。渚薰的主題是「H5互動的正確打開方式」，演講十分精彩。還等什麼，聽完大會我便操練了起來。

 

（上圖爲FDCon2017上渚薰講到Lottie時的PPT頁面）

 

通過了一番試驗後，我大概摸清了Bodymovin的使用方式。這個AE插件能夠把AE上作好的合成（Composition，相似於Pr裏的剪輯序列）導出成帶有矢量動畫信息的json文件，並能夠在如下平臺播放：

 

• Web頁面，以svg/canvas/html+js的形式。Bodymovin本身提供了做爲Player的js庫——bodymovin.js；
• Android原生，經過Airbnb的開源項目「lottie-android」實現；
• iOS原生，經過Airbnb的開源項目「lottie-ios」實現；
• React Native，經過Airbnb的開源項目「lottie-react-native」實現。

 

下面就分步驟總結下Bodymovin的安裝和使用，以及導出的動畫如何在Web頁面上播放：

 

1. 若是電腦上沒有AE的話，須要安裝AE CC2014或更高版本。以AE CC2017爲例：
   
   

   
   （AE CC2017 歡迎界面）
   
   
   

2. AE安裝完成後，安裝Bodymovin插件。

   安裝插件有幾種方法，好比直接到Adobe的插件中心下載插件（地址：https://creative.adobe.com/addons/products/12557，通常不是最新版），也能夠到Bodymovin的GitHub首頁下載最新版的插件並安裝。我推薦第二種方法，這個方法步驟以下：
   
   2.1 到Bodymovin的GitHub首頁（地址：https://github.com/bodymovin/bodymovin）克隆項目到本地，或者下載.zip包。
   
   
   
   
   2.2 在項目目錄的「/build/extension」目錄下找到「bodymovin.zxp」文件，這個就是插件包了。
   
   2.3 下載安裝ZXP Installer（地址：http://aescripts.com/learn/zxp-installer/），打開軟件，點擊「File」>「Open」菜單項載入上述.zxp插件包，ZXP Installer會自動開始安裝。安裝完成後的軟件主頁面以下圖所示，表示插件已成功安裝。
   
   

    
   
   

3.  打開AE，點擊「編輯」>「首選項」>「常規」菜單項，選中「容許腳本寫入文件和訪問網絡」，點擊肯定。
   
   
   
   
   

4. 點擊「窗口」>「擴展」>「Bodymovin」菜單項，就能夠打開Bodymovin的界面使用插件了。

   
   
   
   
   

5. 咱們在空的AE項目裏，新建一個名爲「合成1」的合成，並製做一段簡單的動畫：
   
   

    
   
   

6. 打開Bodymovin插件窗口，能夠發現「合成1」出如今了下面的列表中。選中「合成1」，設置好json文件輸出位置，點擊「Render」。
   
   

   
   
   
   

7. Bodymovin還爲生成出的json文件提供了預覽功能，點擊插件界面上的「Preview」按鈕，點擊「Browse」載入剛剛生成的json文件，就會看到，動畫被原汁原味地導出了：
   
   
   
   
   

8. 接下來咱們新建一個網頁來播放這段動畫。把Bodymovin的GitHub項目目錄下的「\build\player\bodymovin.js」和剛剛生成的json文件複製到網頁根目錄，新建一個html文件，代碼以下：

   
   
   按 Ctrl+C 複製代碼

   按 Ctrl+C 複製代碼

    
   
   

9. 打開這個頁面，就會發現動畫成功跑起來了，是否是很黑科技？
   
   

   
   
   
   

10. 若是想讓json版動畫跑在Android/iOS設備上，在GitHub上搜索「lottie」，而後選擇本身感興趣的平臺吧。
    
    

 

記得在FDCon2017大會上，渚薰演講完畢後，有我的提出了我一直想問的問題：Adobe已經推出HTML5動畫設計軟件An（Adobe Animate CC），爲何不用它而要用這種方式？渚薰答道，An的前身就是Flash，它生成出來的H5動畫是用js寫的（使用CreateJS庫），後期修改和維護會更復雜。確實如此，用過Bodymovin以後，不難看出它的靈活性的確很高，並且json形式的動畫也遠比js寫出來的動畫更適合跨平臺。實在歎服，爲Bodymovin點10086個贊。