在現代前端開發中，動畫是提升用戶體驗的重要元素之一。Lottie 是一個流行的動畫庫，它允許我們使用 JSON 文件來渲染高質量的動畫。本文將介紹如何在 Vue 3 項目中集成 Lottie 動畫，并實現一個加載動畫效果。

如果對你有幫助請幫忙點個👍

1. 什么是 Lottie？

Lottie 是 Airbnb 開源的一個動畫庫，它可以將 After Effects 動畫導出為 JSON 文件，并在 Web、iOS、Android 等平臺上渲染。Lottie 的優勢在于：

• 輕量級：動畫以 JSON 文件形式存儲，文件體積小。

• 高質量：支持復雜的矢量動畫，渲染效果優秀。

• 跨平臺：支持 Web、移動端等多個平臺。

2. 在 Vue 3 中集成 Lottie

2.1 安裝依賴

首先，我們需要安裝?vue3-lottie?插件，它是 Vue 3 的 Lottie 動畫組件封裝。

npm install vue3-lottie

2.2 引入 Lottie 組件

在 Vue 組件中，我們可以通過以下方式引入 Lottie 組件：

<template><div v-if="visible" class="lottie-loader"><Vue3Lottie :animationData="AstronautJSON" :height="400" :width="400" /></div>
</template><script setup lang="ts">
import { inject, ref } from 'vue';
import { Vue3Lottie } from 'vue3-lottie';
import AstronautJSON from './Loading.json';// 使用 inject 獲取 visible
const visible = inject('visible', ref(false));
</script>

2.3 加載動畫 JSON 文件

Lottie 動畫需要一個 JSON 文件作為數據源。你可以從?LottieFiles?下載免費的動畫 JSON 文件，或者使用設計工具（如 After Effects）導出動畫。

在代碼中，我們通過?import?引入 JSON 文件：

import AstronautJSON from './Loading.json';

2.4 控制動畫顯示

我們使用?inject?從父組件中獲取?visible?的值，用于控制動畫的顯示和隱藏。visible?是一個?ref?類型的布爾值，當它為?true?時，動畫會顯示。

const visible = inject('visible', ref(false));

2.5 樣式設計

為了讓動畫居中顯示并覆蓋整個頁面，我們添加了一些 CSS 樣式：

.lottie-loader {position: absolute; /* 絕對定位 */top: 0;left: 0;right: 0;bottom: 0;display: flex;justify-content: center;align-items: center;background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */z-index: 9999; /* 確保在其他內容之上 */
}

3. 完整代碼

以下是完整的 Vue 組件代碼：

<template><div v-if="visible" class="lottie-loader"><Vue3Lottie :animationData="AstronautJSON" :height="400" :width="400" /></div>
</template><script setup lang="ts">
import { inject, ref } from 'vue';
import { Vue3Lottie } from 'vue3-lottie';
import AstronautJSON from './Loading.json';// 使用 inject 獲取 visible
const visible = inject('visible', ref(false));
</script><style scoped>
.lottie-loader {position: absolute; /* 絕對定位 */top: 0;left: 0;right: 0;bottom: 0;display: flex;justify-content: center;align-items: center;background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */z-index: 9999; /* 確保在其他內容之上 */
}
</style>

4. 使用場景

這個加載動畫可以用于以下場景：

• 頁面加載：在頁面加載數據時顯示動畫，提升用戶體驗。

• 表單提交：在表單提交過程中顯示動畫，避免用戶重復操作。

• 異步操作：在異步操作（如 API 請求）期間顯示動畫。

5. 總結

通過?vue3-lottie，我們可以輕松地在 Vue 3 項目中集成 Lottie 動畫。本文實現了一個簡單的加載動畫，并解釋了代碼的實現細節。希望這篇文章能幫助你在項目中更好地使用 Lottie 動畫，提升用戶體驗。

---

額外提示

• 如果你需要更復雜的動畫控制（如播放、暫停、循環等），可以查閱?vue3-lottie?的官方文檔，了解更多 API。

• 你可以在?LottieFiles?上找到更多免費的動畫資源。