大殺器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頁面上播放:
- 如果電腦上沒有AE的話,需要安裝AE CC2014或更高版本。以AE CC2017為例:(AE CC2017 歡迎界面)
- AE安裝完成後,安裝Bodymovin插件。
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項目目錄下的「buildplayerbodymovin.js」和剛剛生成的json文件複製到網頁根目錄,新建一個html文件,代碼如下:
<!DOCTYPE html>n<html lang="en">n<head>n <meta charset="UTF-8">n <title>Bodymovin Demo</title>n <script src="bodymovin.js"></script>n</head>n<body>n <div id="animation"></div>n <script>n bodymovin.loadAnimation({n path:data.json, //json文件路徑n loop:true,n autoplay:true,n renderer:canvas, //渲染方式,有"html"、"canvas"和"svg"三種n container:document.getElementById(animation)n });n //bodymovin.js的完整api文檔見GitHub項目首頁(https://github.com/bodymovin/bodymovin)n </script>n</body>n</html>n
- 打開這個頁面,就會發現動畫成功跑起來了,是不是很黑科技?
- 如果想讓json版動畫跑在Android/iOS設備上,在GitHub上搜索「lottie」,然後選擇自己感興趣的平台吧。
記得在FDCon2017大會上,渚薰演講完畢後,有個人提出了我一直想問的問題:
Adobe已經推出HTML5動畫設計軟體An(Adobe Animate CC),為什麼不用An而要用這種方式?
渚薰答道,An的前身就是Flash,它生成出來的H5動畫是用js寫的(使用CreateJS庫),後期修改和維護會更複雜。確實如此,用過Bodymovin之後,不難看出它的靈活性的確很高,而且json形式的動畫也遠比js寫出來的動畫更適合跨平台。實在嘆服,為Bodymovin點10086個贊。
推薦閱讀:
※一個數字鍵盤引發的血案——移動端H5輸入框、游標、數字鍵盤全假套件實現
※opengl/webgl 可以部分重繪嗎?
※推動HTML5生態發展,Gospel還能做什麼?
※手把手教你擼一個跑男動畫 順便抽絲剝繭CSS3動畫奧秘
※如何解剖一個網站?
TAG:前端开发 | AdobeAfterEffects | HTML5 |