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>

来看下效果图吧

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

相关推荐
njsgcs4 小时前
json转excel python pd
python·json·excel·pd
代码搬运媛14 小时前
【架构相关】tsconfig.json 与 tsconfig.node.json、tsconfig.app.json 的关系和作用
node.js·json
aerror2 天前
json转excel xlsx文件
开发语言·python·json
掉鱼的猫2 天前
全球首个支持 IETF JSONPath (RFC 9535) 标准的 Java 框架,Snack4-Jsonpath v4.0.0 发布
java·json
吹个口哨写代码3 天前
处理文本编辑器存的json格式报错问题,对编辑器存的字段进行转换处理,再通过json返回
java·编辑器·json
APIshop3 天前
代码实例:Python 爬虫抓取与解析 JSON 数据
爬虫·python·json
得物技术3 天前
从 JSON 字符串到 Java 对象:Fastjson 1.2.83 全程解析|得物技术
java·后端·json
GISBox4 天前
GISBox如何让GeoTIFF突破Imagery Provider加载限制?
react.js·json·gis
C嘎嘎嵌入式开发4 天前
(20)100天python从入门到拿捏《JSON 数据解析》
开发语言·python·json
LazerYvTian4 天前
Json数据字段类型兼容性处理
json