1,安装插件
yarn add lottie-web / npm i lottie-web
2,本文将 lottie-web 挂载到了vue上；在main.js 文件中：
import lottie from "lottie-web";
Vue.prototype.$lottie = lottie;
3,使用示例
<template>
<div id="lottie"></div>
</template>
mounted() {
// loadAnimation 方法只是一个播放器的作用；
this.$nextTick(() => {
this.$lottie.loadAnimation({
container: document.getElementById(`lottie_box`), // 包含动画的dom元素
renderer: "svg", // 渲染出来的是什么格式
loop: true, // 循环播放
autoplay: true, // 自动播放
animationData: require(`@/assets/images/screen/weatherIcon/lottie/cloudy.json`), // 动画json的本地路径
// path:''//网络json地址, 选择 animationData 后，则不用path了，
});
});
},
问题：
1,Lottie Web 提供了一些 API 来控制动画的播放、暂停、速度等，但并没有直接提供修改样式的 API；
2,其它更改背景色的样式：
- 在元素上方添加一个覆盖层，并设置这个覆盖层的背景颜色。这样，虽然动画本身没有改变背景颜色，但通过视觉上的叠加效果，你可以达到改变背景颜色的目的；
- 通过 JSON、SVG引用，直接更改文件，需要些功底；
