在 Vue 3 中使用 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 上找到更多免费的动画资源。
相关文章:
在 Vue 3 中使用 Lottie 动画:实现一个加载动画
在现代前端开发中,动画是提升用户体验的重要元素之一。Lottie 是一个流行的动画库,它允许我们使用 JSON 文件来渲染高质量的动画。本文将介绍如何在 Vue 3 项目中集成 Lottie 动画,并实现一个加载动画效果。 如果对你有帮助请帮忙点个&#x…...
深度解析:使用 Headless 模式 ChromeDriver 进行无界面浏览器操作
一、问题背景(传统爬虫的痛点) 数据采集是现代网络爬虫技术的核心任务之一。然而,传统爬虫面临多重挑战,主要包括: 反爬机制:许多网站通过检测请求头、IP地址、Cookie等信息识别爬虫,进而限制…...
MySQL 主从复制原理及其工作过程
一、MySQL主从复制原理 MySQL 主从复制是一种将数据从一个 MySQL 数据库服务器(主服务器,Master)复制到一个或多个 MySQL 数据库服务器(从服务器,Slave)的技术。以下简述其原理,主要包含三个核…...
计算机网络抄手 运输层
一、运输层协议概述 1. 进程之间的通信 从通信和信息处理的角度看,运输层向它上面的应用层提供通信服务,它属于面向通信部分的最高层,同时也是用户功能中的最低层。当网络边缘部分的两台主机使用网络核心部分的功能进行端到端的通信时&…...
字符串函数和结构题内存对齐
图下为函数使用: #include <ctype.h>int main() {int ret isdigit(Q);printf("%d\n", ret);return 0; }int main() {printf("%c\n", toupper(a));printf("%c\n", tolower(A));return 0; }...
【嵌入式Linux应用开发基础】特殊进程
目录 一、守护进程(Daemon Process) 1.1. 概念 1.2. 特点 1.3. 守护进程的命名 1.4. 创建守护进程的步骤 1.5. 守护进程的实例 1.6. 守护进程的管理 1.7. 影响与处理 二、僵尸进程(Zombie Process) 2.1. 僵尸进程的定义…...
深度学习pytorch之19种优化算法(optimizer)解析
提示:有谬误请指正 摘要 本博客详细介绍了多种常见的深度学习优化算法,包括经典的LBFGS 、Rprop 、Adagrad、RMSprop 、Adadelta 、ASGD 、Adamax、Adam、AdamW、NAdam、RAdam以及SparseAdam等,通过对这些算法的公式和参数说明进行详细解析…...
rust笔记5-derive属性2
在 Rust 中,derive 是一种自动为结构体或枚举实现特定 trait 的机制。通过 #[derive(...)] 属性,Rust 编译器可以自动生成一些常见 trait 的实现代码,从而减少手动编写重复代码的工作量。 以下是对 Copy、Clone、Hash 和 Default 这几个常用 trait 的详细介绍和示例: 1. C…...
DeepSeek、微信、硅基流动、纳米搜索、秘塔搜索……十种不同方法实现DeepSeek使用自由
为了让大家实现 DeepSeek 使用自由,今天分享 10 个畅用 DeepSeek 的平台。 一、官方满血版:DeepSeek官网与APP 首推,肯定是 DeepSeek 的官网和 APP,可以使用满血版 R1 和 V3 模型,以及联网功能。 网址: htt…...
介绍cherrypick
git cherry-pick 是 Git 中的一个强大命令,用于将一个或多个提交(commit)从一个分支应用到另一个分支。它允许你选择性地将特定的变更引入到当前分支,而无需合并整个分支。以下是对 git cherry-pick 操作的详细介绍: 1…...
HTTP、HTTPS区别可靠性及POST为什么比GET安全的探讨
一、简述HTTP协议 HTTP底层是TCP实现,TCP是一个可靠的传输层网络协议,但是可靠性不是安全性——可靠但不安全 1、为什么TCP可靠?UDP不可靠? 可靠指的是源和目标可以相互访问以及确保数据的传输顺序,我能通过IP端口访…...
从零到一:Spring Boot 与 RocketMQ 的完美集成指南
1.Rocket的概念与原理 RocketMQ 是一款由阿里巴巴开源的分布式消息中间件,最初用于支持阿里巴巴的海量业务。它基于发布-订阅模型,具备高吞吐、低延迟、高可用和强一致性的特点,适用于消息队列、大规模数据流处理等场景。以下是对 RocketMQ …...
AIGC:开启内容创作新纪元,我们如何看待它的影响与前景?
AIGC的概念 AIGC(Artificial Intelligence Generated Content)的概念主要是指人工智能生成内容。 这是一种新的人工智能技术,它利用人工智能模型,根据给定的主题、关键词、格式、风格等条件,自动生成各种类型的文本、图…...
10分钟上手DeepSeek开发:SpringBoot + Vue2快速构建AI对话系统
作者:后端小肥肠 目录 1. 前言 为什么选择DeepSeek? 本文技术栈 2. 环境准备 2.1. 后端项目初始化 2.2. 前端项目初始化 3. 后端服务开发 3.1. 配置文件 3.2. 核心服务实现 4. 前端服务开发 4.1. 聊天组件ChatWindow.vue开发 5. 效果展示及源…...
mac安装Pyspark并连接Mysql
安装Scala, apache-spark, Hadoop brew install scala brew install apache-spark brew install hadoop pip install pyspark注意不要自己另外安装jdk, 会造成版本对不上报错。因为安装apache-spark的过程中会自动安装openjdk。 配置环境变量 JAVA_HOME/opt/homebrew/Cellar…...
深入理解Python多进程编程 multiprocessing
深入理解Python多进程编程 multiprocessing flyfish Python 的 multiprocessing 模块允许创建多个进程,从而可以利用多核处理器的能力来并行执行任务。这意味着程序的不同部分可以在不同的CPU核心上同时运行,极大地提高了处理效率,特别是在…...
jQuery AJAX 方法详解
jQuery AJAX 方法详解 引言 随着互联网技术的不断发展,前端开发领域的技术也在不断更新迭代。jQuery 作为一种广泛使用的前端JavaScript库,极大地简化了DOM操作和事件处理。在众多jQuery功能中,AJAX(Asynchronous JavaScript and XML)方法尤为突出,它允许我们在不重新加…...
青少年编程都有哪些比赛可以参加
Python小学生可参加的赛事: 电子学会青少年编程考级、中国计算机学会编程能力等级认证、蓝桥杯、 信奥赛CSP-J/S初赛/NOIP(推荐C)、编程设计、信息素养、科技创新赛; 升学助力(科技特长生、大学)、企业、出国留学; python比赛&am…...
sql server 数据库 锁教程及锁操作
SQL Server数据库 锁的教程 SQL Server 的数据库锁是为了保证数据库的并发性和数据一致性而设计的。锁机制能够确保多个事务不会同时修改同一数据,从而避免数据冲突和不一致的发生。理解 SQL Server 的锁机制对于开发高效、并发性强的数据库应用非常重要。 1. 锁的…...
存储结构 分类
存储结构 1,顺序存储结构 用一组地址连续的存储单元依次存储线性表的各个数据元素, 适用于频繁查询时使用。 2,链式存储结构 在计算机中用一组任意的存储单元存储线性表的数据元素(这组存储单元可以是连续的,也可以是不连续的),适用于在较…...
龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令: return <value>;在收到客户端连接后,立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量(如 $time_iso8601、$remote_addr 等)&a…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量,这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计,聪明的码友立马就知道了,该到数据访问模块了,要不就这俩玩个6啊,查库势在必行,至此,它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据(数据库、No…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
wpf在image控件上快速显示内存图像
wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像(比如分辨率3000*3000的图像)的办法,尤其是想把内存中的裸数据(只有图像的数据,不包…...
CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!
本文介绍了一种名为AnomalyAny的创新框架,该方法利用Stable Diffusion的强大生成能力,仅需单个正常样本和文本描述,即可生成逼真且多样化的异常样本,有效解决了视觉异常检测中异常样本稀缺的难题,为工业质检、医疗影像…...
