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

前言

有了這個工具，前端會解脫嗎？動畫這部分可以讓交互、視覺來一起來幫你了，而不是拿著 demo 跟你來，來我要這個效果。今日早讀文章由 @Bug 製造機授權分享。

正文從這開始~

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

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

經過了一番試驗後，我大概摸清了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頁面上播放：

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

AE CC2017 歡迎界面

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

安裝插件有幾種方法，比如直接到Adobe的插件中心下載插件（鏈接：Adobe Add-ons，一般不是最新版），也可以到Bodymovin的GitHub首頁下載最新版的插件並安裝。我推薦第二種方法，這個方法步驟如下：

2.1 到Bodymovin的GitHub首頁（鏈接：bodymovin/bodymovin）克隆項目到本地，或者下載.zip 包。

2.2 在項目目錄的「/build/extension」目錄下找到「bodymovin.zxp」文件，這個就是插件包了。

2.3 下載安裝ZXP Installer（鏈接：ZXP Installer），打開軟體，點擊「File」>「Open」菜單項載入上述.zxp插件包，ZXP Installer會自動開始安裝。安裝完成後的軟體主頁面如下圖所示，表示插件已成功安裝。

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

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

我們在空的AE項目里，新建一個名為「合成1」的合成，並製作一段簡單的動畫：

打開Bodymovin插件窗口，可以發現「合成1」出現在了下面的列表中。選中「合成1」，設置好json文件輸出位置，點擊「Render」。

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

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

Bodymovin Demo

bodymovin.loadAnimation({

path: data.json ,//json文件路徑

loop:true,

autoplay:true,

renderer: canvas ,//渲染方式，有"html"、"canvas"和"svg"三種

container:document.getElementById( animation )

});

//bodymovin.js的完整api文檔見GitHub項目首頁(https://github.com/bodymovin/bodymovin)

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

如果想讓json版動畫跑在Android/iOS設備上，在GitHub上搜索「lottie」，然後選擇自己感興趣的平台吧。

記得在FDCon2017大會上，渚薰演講完畢後，有個人提出了我一直想問的問題：

Adobe已經推出HTML5動畫設計軟體An（Adobe Animate CC），為什麼不用An而要用這種方式？

渚薰答道，An的前身就是Flash，它生成出來的H5動畫是用js寫的（使用CreateJS庫），後期修改和維護會更複雜。確實如此，用過Bodymovin之後，不難看出它的靈活性的確很高，而且json形式的動畫也遠比js寫出來的動畫更適合跨平台。實在嘆服，為Bodymovin點10086 個贊。

文中提到的Lottie 到底是什麼呢？

Lottie是Airbnb開源的一個支持 Android、iOS 以及 ReactNative，利用json文件的方式快速實現動畫效果的庫。這麼看可能很難理解，接下來我將詳細的講解如何使用。

Lottie項目地址：https://github.com/airbnb/lottie-android

關於本文

作者：@Bug 製造機

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！