將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/

每天進步一點點