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>

来看下效果图吧

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

相关推荐
stoneSkySpace13 小时前
set、map 比数组,json 对象的性能更好原因分析
json
Rabbb21 小时前
C# JSON 反序列化时,忽略转换失败的属性 JTokenSafeToExtensions
后端·c#·json
代码的余温2 天前
XML vs JSON:核心区别与最佳选择
xml·服务器·json
前端 贾公子2 天前
exports使用 package.json字段控制如何访问你的 npm 包
前端·npm·json
三千花灯2 天前
jmeter提取接口返回值,对比去重
jmeter·json
青柠檬-hxj3 天前
理解 HTTP POST 请求中的 json 和 data 参数
网络协议·http·json
一只小阿乐3 天前
前端vue3 H5实现 静态页面使用本地json 并且需要上下滑动 可以切换tabs 栏
前端·json·vue3·h5开发
Risehuxyc4 天前
前端同学,你能不能别再往后端传一个巨大的JSON了?
前端·json·状态模式
逢五必更5 天前
从json中提取i18n字段
json