其实这个插件使用方法特别简单,但是为啥说一下呢,一、是为了自己记录下整体的使用流程,因为也并不是说非常常用,避免以后就忘了,二、是我想记录下和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的键值对
完毕~对你有用就给个赞吧