vue使用json动画lottie-web

1、安装

npm install lottie-web

2、引入组件

import lottie from "lottie-web";

3、引入数据源

import animationData from "./data.json";

4、vue组件

  <div    id="lottie"    style="position:relative;"  >  </div>

5、渲染组件

mounted(){
        this.svgFun();
    },
    methods: {
        svgFun(){
            let params = {
                container: document.getElementById("lottie"),
                renderer: "svg",
                loop: true,
                autoplay: true,
                animationData: animationData
            };
            let anim;
            anim = lottie.loadAnimation(params);
        }
    }

原文链接