vue3.2 lottie-web动画+引入json动画

其实这个插件使用方法特别简单，但是为啥说一下呢，一、是为了自己记录下整体的使用流程，因为也并不是说非常常用，避免以后就忘了，二、是我想记录下和ui的交互，怎么改json；三、是帮助小白

一、基本使用方法

1、下载

npm install lottie-web

2、引入页面中

import lottie from "lottie-web"
import animationData from '@/assets/animations/data.json' //这个json动画文件是UI给的

let animation
const init = () => {
  animation = lottie.loadAnimation({
    container: document.getElementById("lottie"),
    renderer: "svg",
    loop: true,   //循环播放 true/number/false
    autoplay: true,
    animationData
  });
}

//template部分
<div id="lottie"></div>

lottie里面控制动画的停止等方法，大家可以看文档，这里举例一个

 animation.play()  //播放
 animation.pause() //暂停

二、引入json动画

如果ui给的动效图不复杂，那么恭喜你，直接引入就可以。但是往往，我们需要实现的效果都不会这么简单，那么此刻就需要我们进行手动修改ui给的data.json文件了。

1、查看ui给的压缩包里有没有图片，有的话将图片转为base64的格式

2、转化后的图片对应替换json里面的对应图片 p的键值，然后记得删除u的键值对

完毕~对你有用就给个赞吧