使用阿里巴巴矢量 Lottie库

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引用，直接更改文件，需要些功底；

博客文献
阿里巴巴矢量库