vue插件 lottie-web，转换json文件为动画

安装 npm add lottie-web

引入

import lottie from 'lottie-web'

基本用法 (进入页面就需要加载的类型)

<div id="lottie"></div>


<script>
mounted() {
    
    var params = {
      container: document.getElementById('lottie'),    //在需要放置图片的标签添加id为Lottie
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: animationData,     //animationData为引入的json命名
      
    }
    lottie.loadAnimation(params)
    
  },
 </script>

进行操作之后再展示图片

<div id="lottile"></div>

<script>
import lottie from "lottie-web";  //引入lottie,引入之后，若之前未安装，需要先安装
import dataBackup from "@/assets/json/dataM/dataBackup";  // 引入json格式图片

methods:{
//封装成函数，在需要展示的时候调用
    getImg(){
        this.$nextTick(async () => {
        var params1 = {
          container: document.getElementById("lottile"),
          renderer: "svg",
          loop: true,
          autoplay: true,
          animationData: dataBackup,
        };
        lottie.loadAnimation(params1);
        })
}
},


</script>

详细：将json动图放进页面 - abigting - 博客园