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

甜兒.2024-03-20 13:21

最近的项目中有展示动图的需求，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>

来看下效果图吧

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