vue3.0项目中lottie解析json动画格式

前言

最近的项目中有展示动图的需求,ui之前给了gif文件,但扩展性太局限,所以采取了通过json解析动画的形式。

具体实现

采取Lottie 来将json解析成动画,但因为项目使用的是Vue3.0,所以Lottie官方提供的npm是无效的,需要使用vue3-lottie

javascript 复制代码
npm install vue3-lottie@latest --save

在页面中使用

javascript 复制代码
import { Vue3Lottie } from "vue3-lottie";

然后引入你的json文件

路径按照你存放的json文件路径来就行哈

下一步 应用

javascript 复制代码
 <div class="inviteFriends">
          <Vue3Lottie :animationData="RedbagJSON" class="vue3Lottie" />
          邀好友
   </div>

来看下效果图吧

这个小红包是可以摇晃的 此处没有录屏软件就不展示了 ~

相关推荐
葬歌倾城7 小时前
JSON的缩进格式方式和紧凑格式方式
c#·json
火车叨位去194920 小时前
Java中的JSON序列化和反序列化
json
测试杂货铺1 天前
Jmeter(六):json断言元件,jmeter参数化实现
jmeter·json
专注VB编程开发20年1 天前
C#,VB.NET从JSON数据里提取数组中的对象节点值
c#·json·.net
草履虫建模2 天前
Postman - API 调试与开发工具 - 标准使用流程
java·测试工具·spring·json·测试用例·postman·集成学习
奔跑的蜗牛AZ11 天前
TiDB 字符串行转列与 JSON 数据查询优化知识笔记
笔记·json·tidb
jarctique13 天前
java 找出两个json文件的不同之处
java·json
wtsolutions14 天前
Excel to JSON online converter, flat and nested JSON converter
json·excel·excel-to-json·wtsolutions
漫谈网络15 天前
JSON 数据格式详解
网络·python·json·数据格式
lwb_011815 天前
Spring MVC参数绑定终极手册:单&多参对象集合JSON文件上传精讲
spring·json·mvc