当前位置：首页 > article >正文

在 Vue 3 中使用 Lottie 动画：实现一个加载动画

article 2025/2/24 20:45:36

在现代前端开发中，动画是提升用户体验的重要元素之一。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>