因為我一直比較關注 Web 領域的設計趨勢, 很早之前就聽很說了 Lottie 這個專案, 但是一直沒時間和機會去嘗試, 最近終於有時間機會於是嘗試了一把, 在這裡分享一下。
一. Intro to Lottie
Lottie 是 Airbnb 開源的一個支援 Web、Android、iOS 以及 ReactNative等平臺的動畫庫，它可以結合 AE 和 Bodymovin 來快速實現跨平臺動畫。
其實對於普通的動效和簡單動畫, 使用原生程式碼實現已經足夠, Lottie 是為了複雜動畫而生的, 下面來看幾個 Lottie 實現的幾個動畫例子:
二. 繪製動畫
先 Show 一下完成的效果, 這個動畫只需要5分鐘便可繪製完成!
首先, 開啟 AE, 新建合成, 引數如下:
然後進入AE, 預設會看到這個介面:
每個區域的作用分別是:
- 專案: 管理當前專案以及一些專案引數的預覽
- 資源: 匯入到 AE 中的所有外部資源如影象等在這裡進行統一管理
- 圖層: 在這裡為每一個圖層新增/編輯關鍵幀和屬性
- 時間軸: 在這裡可以編輯動畫的關鍵幀和曲線
- 預覽: 動畫和編輯實時預覽/編輯視窗
- 工具: 各種工具的集合, 如文字工具、圖形工具等
- 屬性: 在這裡編輯元素的屬性
首先, 選擇我們新建的合成, 點選工具欄的圓角矩形按鈕, 同時按住shift, 在預覽區域繪製一個矩形。
現在我們需要給其新增關鍵幀讓其動起來。 AE 裡的關鍵幀跟 CSS 裡的 keyframe 屬性沒有什麼區別, 我們只需要對其運動過程中的某一些節點新增關鍵屬性, 這個元素將會在相鄰兩個關鍵幀之間進行關鍵屬性的平滑變換。
在我們開始之前, 先分析一下動畫效果, 可以分成三部分:
- 位移動畫: Y 軸方向的往復運動
- 形狀動畫: 矩形和圓形之間的往復變換
- 顏色動畫: 藍色和品紅色的突變
OK, 讓我們先來完成位移動畫:
首先, 選中我們的圖層, 點選圖層左側三角, 展開變換選項, 選中位置屬性, 同時把時間軸移動到0:
這時進行最重要的一步, 新增關鍵幀:
首先, 點選圖層區域中位置屬性左側的小時鐘圖示, 開始記錄關鍵幀, 如圖:
OK, 現在我們已經新增完了所有的位移關鍵幀, 按空格再次預覽, 如圖:
點選圖層皮膚的右上角, 顯示曲線皮膚, 如圖:
按住ctrl同時點選選擇我們的動畫路徑, 點選右下角的轉換為貝塞爾曲線按鈕。
我們編輯完的第一條曲線是這樣的:
讓我們進行下一步, 新增形狀變換的關鍵幀。
首先, 點選圖層左側三角, 展開變換選項, 依次展開: 內容、矩形、矩形路徑。將時間軸移到0, 圓度屬性設定為0, 點選圓度左側的時鐘小圖示, 開始紀錄該屬性關鍵幀。
現在進行最後一步, 顏色變換。顏色屬性在圖層皮膚的內容、矩形、填充裡更改, 其他地方跟上述一樣, 無非是再次新增幾個關鍵幀。相信聰明的你已經學會了, 這裡就不再贅述啦。
最終的曲線如圖:
三. 渲染動畫
現在動畫的繪製工作已經完成, 我們可以匯出我們的動畫了。首先需要在 AE 裡安裝 Bodymovin，參考 GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
安裝後選擇該外掛:
匯出檔案後, 新建一個專案, 把 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.json'
class 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(<App/>, 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 (胡青楊) · GitHub 歡迎關注、交流、拍磚、搞基