在 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,链式存储结构 在计算机中用一组任意的存储单元存储线性表的数据元素(这组存储单元可以是连续的,也可以是不连续的),适用于在较…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)
一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章?AI自动生成,效率提升10倍! 支持多语言、自动配图、定时发布,让内容创作更轻松! AI内容生成 → 不想每天写文章?AI一键生成高质量内容!多语言支持 → 跨境电商必备&am…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...
mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象:mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时,可能是因为以下几个原因:1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
