vue3.2 lottie-web动画

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

GO 一、基本使用方法

一、基本使用方法

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() //暂停