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>

来看下效果图吧

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

相关推荐
你们瞎搞3 小时前
arcgis矢量数据转为标准geojson格式
python·arcgis·json·地理空间数据
青草地溪水旁2 天前
Visual Studio Code中launch.json深度解析:C++调试的艺术
c++·vscode·json
Zwb2997924 天前
Day 30 - 错误、异常与 JSON 数据 - Python学习笔记
笔记·python·学习·json
眠りたいです4 天前
基于脚手架微服务的视频点播系统-脚手架开发部分-jsoncpp,protobuf,Cpp-httplib与WebSocketpp中间件介绍与使用
c++·websocket·微服务·中间件·json·protobuf·cpp-httplib
我是大头鸟4 天前
XMLHttpRequest 发送json 格式的数据,servlet 接收
servlet·json·xmlhttprequest
程序新视界5 天前
一篇文章详解你不知道的MySQL JSON数据类型
数据库·mysql·json
数据知道5 天前
Go基础:json文件处理详解(标准库`encoding/json`)
开发语言·后端·golang·json·go语言
广都--编程每日问6 天前
deepseek 的对话json导出成word和pdf
pdf·json·word·deepseek·exprot
包达叔8 天前
仿NewLife的XmlConfig类实现Json配置文件
c#·json·newlife
爱吃香蕉的阿豪10 天前
.NET Core 中 System.Text.Json 与 Newtonsoft.Json 深度对比:用法、性能与场景选型
数据库·json·.netcore