【第921期】大殺器Bodymovin和Lottie:把AE動畫轉換成HTML5/Android/iOS原生動畫

前端早讀課Bug 製造機2017-04-30 16:28:48

前言

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

正文從這開始~

前段時間聽部門老大説,Airbnb出了個移動端的動畫庫Lottie,可以和一個名叫Bodymovin的AE插件結合起來,把在AE上做好的動畫導出為,然後以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項目裏,新建一個名為“”的合成,並製作一段簡單的動畫:





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





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



接下來我們新建一個網頁來播放這段動畫。把Bodymovin的GitHub項目目錄下的“\build\player\bodymovin.js”和剛剛生成的json文件複製到網頁根目錄,新建一個html文件,代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Bodymovin Demo</title>
   <script src="bodymovin.js"></script>
</head>
<body>
   <div id="animation"></div>
   <script>
       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)
   </script>
</body>
</html>

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



如果想讓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

最後,為你推薦動畫相關:

【第300期】H5動畫60fps之路

【第317期】深入瀏覽器研究 CSS 的動畫和轉換性能

關於本文

作者:@Bug 製造機

原文:https://zhuanlan.zhihu.com/p/26304609

閲讀原文

TAGS: