vue使用lottie-web实现web动画效果

npm install lottie-web

<template>
  <div class="home">
    <div class="body">
      <div id="lottieId" />
    </div>
  </div>
</template>
<script>
import lottie from 'lottie-web'
export default {
  name: 'Demo',
  data() {
    return{
    }
  },
  mounted() {
    this.animation = lottie.loadAnimation({
      container: document.getElementById('lottieId'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: require('@/assets/lottie/by.json'),
    })
  },
}
</script>
<style scoped lang="scss">
.home {
  .body {
    width: 890px;
    height: 500px;
    border: #ff3366 solid 10px;
    box-sizing: border-box;
    box-sizing: border-box;
    #lottieId {
      padding: 40px;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    }
  }
}
</style>

animation.play(); // 播放，从当前帧开始播放
animation.stop(); // 停止，并回到第0帧
animation.pause(); // 暂停，并保持当前帧
animation.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止isFrame(默认false)指示value表示帧还是时间(毫秒)
animation.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放
animation.goToAndStop(30, true); // 跳转到第30帧并停止
animation.goToAndPlay(300); // 跳转到第300毫秒并播放
animation.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段
animation.playSegments([10,20], false); // 播放完之前的片段，播放10-20帧
animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧
animation.setSpeed(speed); // 设置播放速度，speed为1表示正常速度
animation.setDirection(direction); // 设置播放方向，1表示正向播放，-1表示反向播放
animation.destroy(); // 删除该动画，移除相应的元素标签等。

animation.addEventListener('data_ready', () => {}) // 动画数据加载完毕
animation.addEventListener('config_ready', () => {}) // 完成初始配置后
animation.addEventListener('data_failed', () => {}) // 加载动画数据失败
animation.addEventListener('loaded_images', () => {}) // 所有图片加载成功或者失败
animation.addEventListener('DOMLoaded', () => {}) // 将元素添加到DOM后