面向前端的 Lottie & AE 動畫手把手入門教學

04-26

因為我一直比較關注 Web 領域的設計趨勢, 很早之前就聽很說了 Lottie 這個項目, 但是一直沒時間和機會去嘗試, 最近終於有時間機會於是嘗試了一把, 在這裡分享一下。

一. Intro to Lottie

Lottie 是 Airbnb 開源的一個支持 Web、Android、iOS 以及 ReactNative等平台的動畫庫，它可以結合 AE 和 Bodymovin 來快速實現跨平台動畫。

其實對於普通的動效和簡單動畫, 使用原生代碼實現已經足夠, Lottie 是為了複雜動畫而生的, 下面來看幾個 Lottie 實現的幾個動畫例子:

這種複雜的動畫, 如果需要手寫代碼來實現, 將會很繁瑣且效率低下, 這正是 Lottie 大展身手的地方。

要使用 Lottie, 需要在藉助 Bodymovin 插件將動畫工程文件從 AE 中導出成 JSON。Lottie 分別為每個平台實現了一套 Player, 只需載入JSON動畫文件就可播放。

值得一提的是, Lottie 在 Web 上是藉助 Canvas 或者 SVG 來渲染動畫的, 動畫的關鍵幀在導出時已經被計算好了, 除了解析JSON之外基本沒有性能損耗, 因此效率非常高!

二. 繪製動畫

先 Show 一下完成的效果, 這個動畫只需要5分鐘便可繪製完成!

首先, 打開 AE, 新建合成, 參數如下:

然後進入AE, 默認會看到這個界面:

每個區域的作用分別是:

項目: 管理當前項目以及一些項目參數的預覽
資源: 導入到 AE 中的所有外部資源如圖像等在這裡進行統一管理
圖層: 在這裡為每一個圖層添加/編輯關鍵幀和屬性
時間軸: 在這裡可以編輯動畫的關鍵幀和曲線
預覽: 動畫和編輯實時預覽/編輯窗口
工具: 各種工具的集合, 如文字工具、圖形工具等
屬性: 在這裡編輯元素的屬性

首先, 選擇我們新建的合成, 點擊工具欄的圓角矩形按鈕, 同時按住shift, 在預覽區域繪製一個矩形。

OK, 這裡我們的基礎圖形已經繪製完畢了, 是不是 So easy?

現在我們需要給其添加關鍵幀讓其動起來。 AE 里的關鍵幀跟 CSS 里的 keyframe 屬性沒有什麼區別, 我們只需要對其運動過程中的某一些節點添加關鍵屬性, 這個元素將會在相鄰兩個關鍵幀之間進行關鍵屬性的平滑變換。

在我們開始之前, 先分析一下動畫效果, 可以分成三部分:

位移動畫: Y 軸方向的往複運動
形狀動畫: 矩形和圓形之間的往複變換
顏色動畫: 藍色和品紅色的突變

OK, 讓我們先來完成位移動畫:

首先, 選中我們的圖層, 點擊圖層左側三角, 展開變換選項, 選中位置屬性, 同時把時間軸移動到0:

這時進行最重要的一步, 添加關鍵幀:

首先, 點擊圖層區域中位置屬性左側的小時鐘圖標, 開始記錄關鍵幀, 如圖:

然後, 將時間軸移到20幀的位置, 點擊左側的菱形激活當前位置的關鍵幀屬性記錄, 同時更改位置屬性中的Y坐標, 如圖:

這麼做的意思是: 讓圖層的Y軸坐標屬性, 在0幀到20幀的過程中, 從150動畫到380, 是不是很容易理解?

現在按下空格鍵, 預覽效果! BIngo, 你會發現, 矩形動了起來, 雖然只是動了20幀, 但這是我們完成的第一個關鍵幀動畫! 鼓勵一下自己~

然後如法炮製, 完成餘下的幾個關鍵幀的記錄, 如圖:

OK, 現在我們已經添加完了所有的位移關鍵幀, 按空格再次預覽, 如圖:

這時, 因為我們的動畫都是勻速運動, 看起來會很生硬, 因為真實世界中物理運動是有加速度的。我們把矩形看作是自由落體後再次反彈, 因此在Y軸坐標最低點和最高點速度應該為0, 整個下降過程是勻加速運動, 上升過程是勻減速運動。因此我們需要給我們的動畫設置曲線, 讓其符合真實世界的物理規律。

點擊圖層面板的右上角, 顯示曲線面板, 如圖:

曲線面板的X軸是時間, Y軸是屬性值, 最低點為0, 最高點為設置的最大值, 曲線的便是屬性的變化, 曲線的斜率便是加速度的值。

按住ctrl同時點擊選擇我們的動畫路徑, 點擊右下角的轉換為貝塞爾曲線按鈕。

但是這時什麼都不會發生。。。

因為目前的位移屬性實際上是集合和X軸位移和Y軸位移兩個屬性的, 從曲線也能反映出來, 下面那條平行於X軸的直線表示X軸位移。我們無法同時為兩個屬性設置曲線, 需要將X和Y方向的位移屬性分開, 右鍵點擊圖層面板的位置屬性, 選擇選擇單獨尺寸, 然後我們就可以單獨為Y方向的位移屬性設置曲線了, 如圖:

選中Y方向的位移屬性曲線, 點擊轉換為貝塞爾曲線。這時曲線的每一個拐點將會多出一個錨點和兩個方向的控制器, 曲線將會與其中一個控制器相切, 並且曲線與控制器相切處的半徑等於控制器的長度。因此我們只需要拖動控制器便可以控制曲線。

同時, 點擊工具欄中的鋼筆工具, 便可以在曲線任意位置額外添加錨點進行更進一步的曲線控制。

按住 ALT 同時點擊點擊錨點可以將之前轉換為曲線。

另外, 按住 Command/CTRL 的同時可以直接拖動曲線中的錨點。

我們編輯完的第一條曲線是這樣的:

為了達到速度突變的效果, 所以我們在這裡把時間軸往後移動1幀或者2幀(讓變換的時間很短, 肉眼看不出過程, 就是突變啦~), 再調整曲線, 如圖:

重複之前的步驟編輯剩下的幾個關鍵幀曲線, 最後, 編輯完的曲線如圖:

按空格鍵預覽, 如圖:

Yooooo! 比剛剛自然多了!

讓我們進行下一步, 添加形狀變換的關鍵幀。

首先, 點擊圖層左側三角, 展開變換選項, 依次展開: 內容、矩形、矩形路徑。將時間軸移到0, 圓度屬性設置為0, 點擊圓度左側的時鐘小圖標, 開始紀錄該屬性關鍵幀。

然後將時間軸移到下一次Y軸坐標的最低點, 與位移動畫的第二個關鍵幀對齊, 點擊圓度屬性左側的菱形激活當前圓度的關鍵幀屬性記錄。

將時間軸移到下一個關鍵幀, 也就是速度第一次突變後的關鍵幀, 再次點擊圓度屬性左側的菱形紀錄關鍵幀, 同時把圓度屬性設為100%。便完成了矩形到圓形的突變動畫。

重複上述步驟, 將時間軸移到圓形下一次運動到Y軸的最低點, 再次添加關鍵幀讓圓形變換成矩形, 最終的關鍵幀曲線如圖:

預覽一下效果:

現在進行最後一步, 顏色變換。顏色屬性在圖層面板的內容、矩形、填充里更改, 其他地方跟上述一樣, 無非是再次添加幾個關鍵幀。相信聰明的你已經學會了, 這裡就不再贅述啦。

最終的曲線如圖:

最終完成效果:

Yooooooooooooooooooo! 是不是感覺自己很厲害~

三. 渲染動畫

現在動畫的繪製工作已經完成, 我們可以導出我們的動畫了。首先需要在 AE 里安裝 Bodymovin，參考 GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

安裝後選擇該插件:

選擇我們的合成和導出路徑, 點擊 Render:

導出文件後, 新建一個項目, 把 data.json 移到項目目錄, 安裝所需依賴。

這裡我們使用 Lottie 的 React Binding, 運行 npm install -S react react-dom react-lottie babel-core babel-plugin-transform-class-properties parcel-bundler。

新建 index.html:

<body> <div id="root"></div> <script src="./index.js"></script></body>

新建 index.js:

import React from react;import ReactDOM from react-dom;import Lottie from react-lottie;import * as animationData from ./data.jsonclass App extends React.Component { state = { isStopped: false, isPaused: false }; defaultOptions = { loop: true, autoplay: true, animationData: animationData, renderer: canvas }; play = () => this.setState({isStopped: false, isPaused: false}); stop = () => this.setState({isStopped: true}); pause = () => this.setState({isPaused: !this.state.isPaused}); render() { const buttonStyle = { display: block, margin: 10px auto }; return <div> <Lottie options={this.defaultOptions} width={600} isStopped={this.state.isStopped} isPaused={this.state.isPaused} /> <button style={buttonStyle} onClick={this.stop}>停止</button> <button style={buttonStyle} onClick={this.play}>播放</button> <button style={buttonStyle} onClick={this.pause}>暫停</button> </div> }}ReactDOM.render(, document.getElementById(root));

然後運行parcel ./index.html`, 打開瀏覽器, 將會看到我們的動畫, 是不是非常酷~

除了能夠播放和暫停, Lottie 還為我們提供了更加精細的動畫控制方法和事件鉤子, 有興趣的小夥伴參考: GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

本教程的所有源碼和AE工程文件都在我的 GitHub:

HuQingyang/lottie-demo?

github.com

歡迎關注、交流、拍磚、<del>搞基</del>