vue3前端加载动画 lottie-web 的简单使用案例

什么是 Lottie
Lottie 是 Airbnb 发布的一款开源动画库,它适用于 Android、iOS、Web 和 Windows 的库。 它提供了一套从设计师使用 AE(Adobe After Effects)到各端开发者实现动画的工具流。UED 提供动画 json 文件即可, 开发者就可以直接运用在 iOS、Android、Web 和 React Native之上,无需其他额外操作。
Lottie-Web 是 Lottie 在 web 端的技术方案。
Lottie-Web 提供了 SVG、Canvas 和 HTML 三种渲染模式,一般使用 Svg 或 Canvas 即可。
1、SVG 渲染器支持的特性最多,也是使用最多的渲染方式。并且 SVG 是可伸缩的,任何分辨率下不会失真;
2、Canvas 渲染器就是根据动画的数据将每一帧的对象不断重绘出来;
3、HTML 渲染器受限于其功能,支持的特性最少,只能做一些很简单的图形或者文字,也不支持滤镜效果。
安装依赖
npm install lottie-web --save
从官网下载了一个json文件示例
LottieFiles: Download Free lightweight animations for website & apps.
也可以下载gif格式

基本使用
<script setup>
import { ref, onMounted } from 'vue'
import lottie from 'lottie-web'const lottieInstance = ref(null)
const lottieInstance2 = ref(null)let imgName = 'Animation - 1712559820721.json'
const getImg = () => {return new URL(`/src/assets/${imgName}`, import.meta.url).href;
}
const init = () => {// 读取动画容器const lottieContainer = document.getElementById('lottieId')if (!lottieContainer) return;// 实例化lottieInstance.value = lottie.loadAnimation({// UED 提供的 动画的 json 文件path: 'https://static-cdn.canyuegongzi.xyz/lf20/lf20_jv0xz0qi.json',// 渲染方式renderer: "svg",// 是否循环loop: true,autoplay: true, // 自动播放container: lottieContainer, // 用于渲染的容器});// 初始化第二个动画const lottieContainer2 = document.getElementById('lottieId2')if (!lottieContainer2) return;lottieInstance2.value = lottie.loadAnimation({path: getImg(),// path: './src/assets/Animation - 1712559820721.json',renderer: "svg",loop: true,autoplay: true,container: lottieContainer2});
}const onStart = () => {lottieInstance.value?.play();lottieInstance2.value?.play();
}onMounted(() => {init()onStart()
})
</script><template><div class="card"><img src="../assets/Animation - 1712559725257.gif" /><img src="../assets/Animation - 1712559820721.gif" /></div><div style="display: flex;"><div id="lottieId"></div><div id="lottieId2"></div></div></template><style scoped>#lottieId {width: 300px;height: 300px;
}#lottieId2 {width: 300px;height: 300px;
}
</style>
文章参考自
http://t.csdnimg.cn/fh4Ww
lottie-web,lottie动画使用详解_动画_jasmine 莉-华为开发者联盟HarmonyOS专区
相关文章:
vue3前端加载动画 lottie-web 的简单使用案例
什么是 Lottie Lottie 是 Airbnb 发布的一款开源动画库,它适用于 Android、iOS、Web 和 Windows 的库。 它提供了一套从设计师使用 AE(Adobe After Effects)到各端开发者实现动画的工具流。 UED 提供动画 json 文件即可, 开发者就…...
基于java+springboot+vue实现的健身房管理系统(文末源码+Lw)23-223
摘 要 传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,在计算机上安装健身房管理系统软件来发挥其高效地信息处理的作用…...
10款白嫖党必备的ai写作神器,你都知道吗? #媒体#人工智能#其他
从事自媒体运营光靠自己手动操作效率是非常低的,想要提高运营效率就必须要学会合理的使用一些辅助工具。下面小编就跟大家分享一些自媒体常用的辅助工具,觉得有用的朋友可以收藏分享。 1.飞鸟写作 这是一个微信公众号 面向专业写作领域的ai写作工具&am…...
Docker工作流
1.工作流 开发应用编写Dockerfile构建Docker镜像运行Docker容器测试应用发布镜像到Hub迭代更新镜像 2.开发应用 首先你需要创建一个应用,这个应用可以是后端应用或者前端应用,任何语言都可以。 比如:我使用IDEA 创建一个Java后端应用&…...
深入浅出 -- 系统架构之分布式集群的分类
一、单点故障问题 集群,相信诸位对这个概念并不陌生,集群已成为现时代中,保证服务高可用不可或缺的一种手段。 回想起初集中式部署的单体应用,因为只有一个节点,因此当该节点出现任意类型的故障(网络、硬件…...
Docker之镜像与容器的相关操作
目录 一、Docker镜像 搜索镜像 下载镜像 查看宿主机上的镜像 删除镜像 二、Docker容器 创建容器 查看容器 启停容器 删除容器 进入容器 创建/启动/进入容器 退出容器 查看容器内部信息 一、Docker镜像 Docker 运行容器前需要本地存在对应的镜像, 如…...
中科驭数超低时延网络解决方案入选2023年度金融信创优秀解决方案
近日,由中国人民银行领导、中国金融电子化集团有限公司牵头组建的金融信创生态实验室发布「2023年度第三期金融信创优秀解决方案」,中科驭数超低时延网络解决方案从众多方案中脱颖而出,成功入选,代表了该方案的技术创新和金融实践…...
应用方案 | DCDC电源管理芯片MC34063A
MC34063A 为一单片 DC-DC 变换集成电路,内含温度补偿的参考电压源(1.25V)、比较器、能有效限制电流及控制工作周期的振荡器,驱动器及大电流输出开关管等。外配少量元件,就能组成升压、降压及电压反转型 DC-DC 变换器。…...
【个人使用推荐】联机不卡顿 小白一键部署 大厂云服务器选购指南 16G低至26 幻兽帕鲁最大更新来袭
更新日期:4月8日(半年档 价格回调,京东云采购季持续进行) 本文纯原创,侵权必究 《最新对比表》已更新在文章头部—腾讯云文档,文章具有时效性,请以腾讯文档为准! 【腾讯文档实时更…...
57 npm run build 和 npm run serve 的差异
前言 npm run serve 和 npm run build 的差异 这里主要是从 vue-cli 的流程 来看一下 我们经常用到的这两个命令, 他到传递给 webpack 打包的时候, 的一个具体的差异, 大致是配置了那些东西? 经过了那些流程 ? vue-cli 的 vue-plugin 的加载 内置的 plugin 列表如下, 依次…...
原生小程序开发性能优化指南
性能优化指南 1.骨架屏 业务可以在数据加载完成之前用骨架屏幕来占位,提升体验。 2.包大小优化 减小包中静态资源,例如图片文件,可将图片进行压缩降低文件体积。无用文件、函数、样式剔除。除了部分用于容错的图片必须放在代码包…...
「51媒体网」邀请媒体采访报道对企业宣传有何意义?
传媒如春雨,润物细无声的,大家好,我是51媒体网胡老师。 邀请媒体采访报道对企业宣传具有多重意义: 提升品牌知名度和曝光度:媒体是信息传播的重要渠道,通过媒体的报道,企业及其活动、产品能够迅…...
用动态IP采集数据总是掉线是为什么?该怎么解决?
动态IP可以说是做爬虫、采集数据、搜集热门商品信息中必备的代理工具,但在爬虫的使用中,总是会遇到动态IP掉线的情况,从而影响使用效率,本文将探讨动态IP代理掉线的几种常见原因,并提供解决方法,以帮助大家…...
MySQL操作DDL
目录 1.概述 2.数据库的增删改查 3.表的增删改查 3.1.创建和查看表结构 3.2.修改表 3.3.查看所有的表 3.4.删除表 4.用户 5.DDL在实际应用场景中的作用 5.1.数据库设计 5.2.数据库维护 5.3.数据库迁移或重置 5.4.优化性能 …...
程序员如何搞副业
目录 1.概述 2.个人项目开发 3.在线教育和培训 4.技术博客和内容创作 1.概述 程序员通过副业实现个人价值最大化和增加收入的途径多种多样,以下是一些方法: 自由职业: 程序员可以在业余时间提供自由职业服务。包括为客户开发软件、网站或应用程序、…...
【嵌入式开发 Linux 常用命令系列 4.3 -- git add 不 add untracked file】
请阅读【嵌入式开发学习必备专栏 】 文章目录 git add 不add untracked file git add 不add untracked file 如果你想要Git在执行git add .时不添加未跟踪的文件(untracked files),你可以使用以下命令: git add -u这个命令只会加…...
git 常用命令和使用方法
作者简介: 一个平凡而乐于分享的小比特,中南民族大学通信工程专业研究生在读,研究方向无线联邦学习 擅长领域:驱动开发,嵌入式软件开发,BSP开发 作者主页:一个平凡而乐于分享的小比特的个人主页…...
程序员如何搞副业?
程序员不仅拥有将抽象概念转化为实际应用的能力,还通常具备强大的逻辑思维和问题解决能力。然而,许多程序员并不满足于仅仅在一家公司工作,他们渴望通过副业来实现个人价值的最大化,增加收入,甚至探索自己的创业梦想。…...
深入浅出 -- 系统架构之负载均衡Nginx实现高可用
一、Nginx的高可用 线上如果采用单个节点的方式部署Nginx,难免会出现天灾人祸,比如系统异常、程序宕机、服务器断电、机房爆炸、地球毁灭....哈哈哈,夸张了。但实际生产环境中确实存在隐患问题,由于Nginx作为整个系统的网关层接入…...
鲸鱼优化算法(Whale Optimization Algorithm)
注意:本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 ([www.aideeplearning.cn]) 算法背景 鲸鱼优化算法(Whale Optimization Algorithm, WOA)是一种模拟鲸鱼捕食行为的优化算法。想象一下,你…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述:海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而,目前该领域仍面临一个挑战,即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...
LRU 缓存机制详解与实现(Java版) + 力扣解决
📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...
