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

在现代前端开发中，动画是提升用户体验的重要元素之一。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 上找到更多免费的动画资源。