说明下:如果你是vue3的话请移步:https://blog.csdn.net/qq_67801847/article/details/128386661,这里只针对vue2.
同时动画官网链接:lottie官网
实现思路:
1. 安装lottie-web (版本无所谓)
2. 在使用的页面引入组件
# 引入组件
import lottie from "lottie-web"
# 引入动画
import animationData from "../../assets/a.json";
3.实例创建及挂载
const container = this.$refs.animationContainer
const options = {
animationData: animationData,
loop: true,
autoplay: true
}
this.animation = lottie.loadAnimation({
container: container,
renderer: 'svg',
...options
})
页面代码:
<diV>
<div class="donghua" ref="animationContainer"> </div>
</diV>