vue3+lottie实现动画

1、安装lottie-web

npm i lottie-web

2、使用在线json文件

<template>
  <div class="box">
    <div id="lottie_box" style="width: 800px;height: 800px;margin-left: 1000px;background-color: pink"></div>
    <button @click="startFun">播放</button>
    <button @click="suspendFun">暂停</button>
  </div>
</template>

<script>
import lottie from 'lottie-web';

export default {
  name:'Lottie',
  data(){
    return{
      lottie:{},
    }
  },
  methods:{
    suspendFun:function(){
      this.lottie.pause();
    },
    startFun:function(){
      this.lottie.play()
    }
  },
  mounted(){
    this.lottie = lottie.loadAnimation({
      container: document.getElementById('lottie_box'),
      renderer: 'svg',
      loop: true,// path: 'https://labs.nearpod.com/bodymovin/demo/markus/halloween/markus.json'
      path: 'https://labs.nearpod.com/bodymovin/demo/markus/isometric/markus2.json'
    })
  }
}
</script>

效果如下：

3、使用本地json文件

lottieFiles官网：https://lottiefiles.com/featured

点击一个雪人的

点击Download

点击save to workspace to download

下载下来后放到public目录下

<template>
  <div class="box">
    <div id="lottie_box" style="width: 800px;height: 800px;margin-left: 1000px;background-color: pink"></div>
    <button @click="startFun">播放</button>
    <button @click="suspendFun">暂停</button>
  </div>
</template>

<script>
import lottie from 'lottie-web';

export default {
  name:'Lottie',
  data(){
    return{
      lottie:{},
    }
  },
  methods:{
    suspendFun:function(){
      this.lottie.pause();
    },
    startFun:function(){
      this.lottie.play()
    }
  },
  mounted(){
    this.lottie = lottie.loadAnimation({
      container: document.getElementById('lottie_box'),
      renderer: 'svg',
      loop: true,
      // animationData: favAnmData
      path: './Animation - 1703753064024.json'
    })
  }
}
</script>

效果如下: