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>

来看下效果图吧

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

相关推荐
Martin-Luo1 小时前
Vue3 通过json配置生成查询表单
javascript·vue.js·json
星尘库1 小时前
后端json数据反序列化枚举类型不匹配的错误
json
BXCQ_xuan2 小时前
软件工程实践四:MyBatis-Plus 教程(连接、分页、查询)
spring boot·mysql·json·mybatis
王维志2 小时前
LiteDB详解
数据库·后端·mongodb·sqlite·c#·json·database
ID_1800790547320 小时前
Python采集京东店铺所有商品数据,json数据返回
json
ljh57464911921 小时前
mysql 必须在逗号分隔字符串和JSON字段之间二选一,怎么选
数据库·mysql·json
小孔龙1 天前
02.Kotlin Serialization 属性序列化控制
kotlin·json
Cachel wood1 天前
信息检索、推荐系统模型排序质量指标:AP@K和MAP@K
windows·搜索引擎·json·推荐系统·搜索
tebukaopu1481 天前
json文件转excel
json·excel
小孔龙2 天前
01.Kotlin Serialization - 基础用法
kotlin·json