将json动图放进页面

有次意外得知，UI出的动图，可以转成json，然后前端用插件可以当做图片显示

1.安装lottie-web

2.引入lottie-web和JSON动画

import lottie from 'lottie-web'
import animationData from '~/static/data' // 引入json文件
<div class="animate" id="circle">

3.执行方法

mounted(){
  const params = {
    container: document.getElementById('circle'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: animationData
  };

  this.anim = lottie.loadAnimation(params);

},

4.组件卸载时摧毁

 destroyed () {
      this.anim.destroy()
    }

效果图：

JSON动画代码可以去这个网站下载

 https://lottiefiles.com/

每天进步一点点