Lottie 輕鬆實現動畫效果

Lottie 是 Airbnb 開源的跨平台動畫函式庫，設計師可以透過 Adobe After Effects 做出動畫後，經由一個 Bodymovin 的擴充功能輸出 JSON 格式。接著再由工程師透過 Lottie 函式庫讀取 JSON 資料來呈現出動畫。

Lottie 官網：http://airbnb.io/lottie/#/
這篇主要說明在 Web 使用 Lottie：https://github.com/airbnb/lottie-web

實作

首先可以在 Lottie 官網的動畫分類找到很多設計師的作品，從中選擇一個來實作看看吧！

1. 載入 Lottie 資源

CDN

1

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js

npm

1

npm install lottie-web

2. 初始化

將下面程式碼加入，並加入對應的參數資料就可以啟用了

1
2
3
4
5
6

lottie.loadAnimation({
  wrapper: svgContainer,
  animType: 'svg',
  loop: true,
  path: 'https://assets4.lottiefiles.com/packages/lf20_Sjy4Vl.json'
});

• container: 對應的 HTML 元素 id
• animationData: 動畫的 JSON 資料
• path: 動畫的 JSON 資料來源 (animationData、path 擇一使用即可)
• loop: 循環播放 (true / false / number)
• autoplay: 自動播放（true / false）
• name: 名稱
• renderer: 設置渲染器（’svg’ / ‘canvas’ / ‘html’）
  • 預設使用 svg 渲染
  • 差異：
    • svg：元素使用 svg 呈現，動畫效果透過 svg 的動畫來做
    • canvas：元素使用 canvas 繪製，透過定時刷新重繪呈現動畫效果
    • html：元素使用 svg 呈現，動畫效果透過 CSS 的動畫來做

除了基礎的參數以外，還有許多事件可以設置 (播放、暫停、播放速度等等)，使用方式舉例：

1
2
3
4
5
6
7

const anlottie = lottie.loadAnimation({
  container: svgContainer,
  animType: 'svg',
  loop: true,
  path: 'https://assets4.lottiefiles.com/packages/lf20_Sjy4Vl.json',
});
anlottie.setSpeed(6);

透過 setSpeed() 就可以加快動畫的速度。
常用也包括 play()、stop()、pause();

可設置參數詳細內容可參考這裡：https://airbnb.io/lottie/#/web?id=usage-1

Demo

使用 Lottie 好處

1. 清晰

在任何高分辨率顯示器上就能看出差異。
點我觀看

2. 輕巧

同樣使用呈現動畫的 gif 圖片來說，一個 JSON 檔案會小許多。

3. 方便

方便的呈現複雜動畫效果，不用寫很多 code 來處理，只要提供對應的 JSON 動畫資源即可。

小結

要在網頁上呈現複雜動畫時，可以試著用 Lottie 來完成哦！