輕鬆導入 Lottie 動畫到 Nuxt.js 專案中

發表於 更新於 分類於

現代網站與應用程式越來越重視視覺效果與用戶體驗，動畫已經成為提升網頁質感的關鍵元素。
然而，傳統的 GIF 動畫不僅檔案體積大，也缺乏互動性與可變性。這時，Lottie 這個輕量化的向量動畫工具就展現了獨特的魅力。

前言

Lottie 是一款漂亮且輕量的向量動畫工具，可輕鬆將 After Effects 動畫導入到網頁或應用程式中。本文將介紹如何在 Nuxt.js 專案中導入並使用 Lottie 動畫。

安裝與設定 Lottie

首先透過 npm 安裝 vue-lottie 套件:

1
npm install vue-lottie --save

接著在 Nuxt 的 plugins 目錄下創建一個 lottie.js 文件， 內容如下:

1
2
3
4
import Vue from 'vue'
import VueLottie from 'vue-lottie'

Vue.use(VueLottie)

在 nuxt.config.js 中引入剛建立的 plugin:

1
2
3
4
5
export default {
  plugins: [
    '~/plugins/lottie.js'
  ]
}

匯出 After Effects 動畫為 JSON
使用 Lottie 必須先將 AE 動畫匯出為 JSON 格式:

  1. 下載 Bodymovin 外掛程式並安裝到 After Effects
  2. 開啟動畫項目並進入 Bodymovin 設定面板
  3. 調整輸出設定並匯出為 JSON 檔案
    在元件中使用 Lottie 動畫
    創建一個 Vue 元件並匯入剛匯出的 JSON 檔案:
1
2
3
4
5
6
7
8
9
10
11
<template>
  <div>
    <vue-lottie :animationData="require('@/assets/lottie-animation.json')"/>
  </div>
</template>

<script>
export default {
  name: 'LottieAnimation'
}
</script>

就這樣簡單地在 Nuxt 專案中導入了 Lottie 動畫! 可根據需求進一步自訂動畫的尺寸、控制播放等。
Lottie 輕巧流暢的動畫將大大提升您網站的用戶體驗。

參考資料：