從設計師和開發的角度使用 lottie

HyG發表於2018-10-10

簡介

lottie 是一個可以輕易的給各種 native app 新增高質量動畫的類庫。可以在 iOS、Android 和 React Native 實時渲染 After Effects 動畫，就像使用靜態圖片一樣容易。上圖即為 lottie 的 logo。

簡單的說，lottie 動畫製作的流程是，通過 Bodymovin 擴充套件將 AE 動畫匯出為 json 資料，然後再將這個 json 渲染在客戶端或者 web 端。如下圖：

官網宣傳了3個特性：

靈活使用AE的特性
隨心所欲控制你的動畫
很小的檔案體積

個人認為 lottie 最大的優勢就是可以將設計師設計的動圖原原本本的在頁面上展現出來，完美還原了動畫的精細度，並且對動畫擁有足夠的控制能力。目前所有使用 gif 或 apng 的場景應該都可以使用 lottie，當然 lottie 不侷限與此場景。

本文主要從設計師視角和開發者視角講述 lottie-web 的原理和使用以及 lottie 在 weex/rax 中的使用。

Demo

設計師視角

準備

在 AE 中為 lottie 創作動畫，你需要以下準備

Adobe After Effects
Bodymovin AE 外掛
Lottiefiles preview app (整合了 lottie sdk 的 app)

安裝 Bodymovin 外掛的流程如下：

關閉 AE
安裝 ZXP installer。 ZXP Installer 就是專門用來安裝 Adobe 公司的軟體產品的外掛的工具。
下載最新的 bodymovin 擴充套件。 github.com/airbnb/lott…
開啟 ZXP installer 並把 bodymovin 擴充套件拖拽進來
開啟 AE，在選單 Window > Extensions 中，你會看到安裝好的擴充套件

安裝外掛詳見 airbnb.io/lottie/afte…

從 Sketch/SVG/Illustrator 到 Lottie 的工作流

下面講講如何從 Sketch 開始，製作一個 lottie 動畫檔案。如果你使用 svg 圖片，跳到步驟3。如果你使用 AI，跳到步驟4。需要準備好 Sketch，AI，AE，並安裝好 Bodymovin 外掛。下面開始：

在 sketch 中確保要匯出的內容已經群組為一個 group
將這個 group 匯出為 svg
在 AI 中開啟 svg，並轉存為 .ai 檔案
將 .ai 檔案匯入到 AE 中
在 AE 中建立元件，設定動畫持續時間和幀率
將 ai 檔案轉為 shape layers。在元件中選中你的圖層，選單 Layer 中選擇 Create shapes from vector layer
新增你想要的任何動畫，這一部分是你主要工作的步驟
使用 Bodymovin 匯出為 json 選單中選擇 Window > Extensions > Bodymovin
測試動畫。確保動畫中沒有不支援的特性，然後可以拖拽到 lottieFiles 中檢視效果。當然也可以上傳到 lottieFiles 裡，然後使用 lottie preview app 掃碼檢視。這時你就可以將動畫交付給開發同學啦！

更多細節可檢視官方文件 Sketch/SVG/Illustrator to Lottie workflow

注意事項&優化建議

*AE 特性大部分已經支援，具體可以檢視 Supported Features（支援列表），設計師應該避免使用不支援 AE 的特性。

目前開看，支援較好的屬性有：

Shapes
Fills
Strokes
Transforms
Interpolation

不完全支援的屬性分類有：

Masks
Mattes
Merge Paths
Layer Effects
Text

*設計過程中的優化建議和注意事項 General tips & guidelines

儘量保持簡單小巧在相同的圖層上覆制相同的關鍵幀會增加額外的程式碼，只有在必要時才使用路徑關鍵幀動畫。
匯出 1x 圖
No expressions or effects Lottie 還不支援 expressions 或 effects 選單中的任何 effects
Matte and mask 尺寸問題使用半透明遮罩會影響效能。如果必須使用遮罩，請覆蓋最小的區域。
不支援 Blending modes 或 Luma mattes
不支援圖層樣式圖層效果不支援drop shadow, color overlay 或 stroke
全屏動畫，匯出比最大螢幕寬度更寬一點的影象，在 Android 和 iOS 上可以分別裁切

開發者視角

使用

首先當然是看開發文件。這裡我簡單說說其中 lottie-web 的使用。

可以通過 script 標籤

<script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>
複製程式碼

或 npm 包 lottie-web 引用

npm i -S lottie-web
複製程式碼

import lottie from 'lottie-web'
複製程式碼

呼叫 loadAnimation()

const myLottie = lottie.loadAnimation({
  container: document.querySelector('.img-area'),
  renderer: 'svg',
  name: 'myLottieAnim',
  loop: true,
  autoplay: true,
  path: './assets/cycle_animation.json',
})
複製程式碼

引數/api/事件

loadAnimation 的引數

名稱	描述
container	用於渲染的容器，一般使用一個 div 即可
renderer	渲染器，可以選擇 'svg' / 'canvas' / 'html'，個人測試發現 svg 效果和相容性最好
name	動畫名稱，用於 reference
loop	迴圈
autoplay	自動播放
path	json 路徑，頁面會通過一個 http 請求獲取 json
animationData	json 動畫資料，與 path 互斥，建議使用 path，因為 animationData 會將資料打包進來，會使得 js bundle 過大

獲取到 lottie 例項後，可以呼叫 api 控制動畫，例如上述程式碼中可以使用

myLottie.pause()
複製程式碼

相關 api

名稱	引數	描述
stop	無	停止動畫
play	無	播放動畫
pause	無	暫停
setSpeed	Number	設定播放速度，1 表示1倍速度，0.5 表示 0.5倍速度
setDirection	Number	正反向播放，1 表示正向，-1 表示反向
goToAndStop	Number, [Boolean]	跳到某一幀或某一秒停止，第二個引數 iFrame 為是否基於幀模式還是時間，預設為 false
goToAndPlay	Number, [Boolean]	跳到某一幀或某一秒開始，第二個引數 iFrame 為是否基於幀模式還是時間，預設為 false
playSegments	Array, [Boolean]	播放片段，引數1為陣列，兩個元素為開始幀和結束幀；引數2為，是否立即播放片段，還是等之前的動畫播放完成
destroy	無	銷燬