快捷導(dǎo)航

Vue3使用Lottie實現(xiàn)一個簡單的加載動畫

更新時間：2025年02月18日 10:11:04 作者：念九_ysl

Lottie 是一個流行的動畫庫,它允許我們使用 JSON 文件來渲染高質(zhì)量的動畫,本文將介紹一下如何在Vue3中集成 Lottie 動畫實現(xiàn)一個加載動畫效果,需要的可以了解下

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

1. 什么是 Lottie

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

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

高質(zhì)量：支持復(fù)雜的矢量動畫，渲染效果優(yōu)秀。

跨平臺：支持 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 文件作為數(shù)據(jù)源。你可以從 LottieFiles 下載免費的動畫 JSON 文件，或者使用設(shè)計工具（如 After Effects）導(dǎo)出動畫。

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

import AstronautJSON from './Loading.json';

2.4 控制動畫顯示

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

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

2.5 樣式設(shè)計

為了讓動畫居中顯示并覆蓋整個頁面，我們添加了一些 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; /* 確保在其他內(nèi)容之上 */
}

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; /* 確保在其他內(nèi)容之上 */
}
</style>