在VUE中使用lottie--动画

参考博文：vue-lottie动画效果（进阶篇） - 灰信网（软件开发博客聚合） (freesion.com)

1、安装lottie

2、在src->assets下创建文件夹lottie;

将自己在素材网站上下载的动画的JSON格式文件放进去

比如lottie素材网站

3、在component中创建lottie.vue文件

写入下列代码：

#lottie.vue
<template>
  <div :style="style" ref="lavContainer"></div>
</template>

<script>
import lottie from 'lottie-web'
export default {
  props: {
    options: {
      type: Object,
      required: true
    },
    height: Number,
    width: Number
  },
  data() {
    return {
      style: {
        width: this.width ? `${this.width}px` : '100%',
        height: this.height ? `${this.height}px` : '100%',
        overflow: 'hidden',
        margin: '0 auto'
      }
    }
  },
  mounted() {
    this.anim = lottie.loadAnimation({
          container: this.$refs.lavContainer,
          renderer: 'svg',
          loop: this.options.loop !== false,
          autoplay: this.options.autoplay !== false,
          animationData: this.options.animationData,
          rendererSettings: this.options.rendererSettings
        }
    )
    this.$emit('animCreated', this.anim)
  }
}
</script>

4、在vue文件的template中写下列内容进行引用

<lottie :options="defaultOptions"  :width="660" :height="660" class="lottie"/>

5、 在<script>中，

6、data中写入以下变量

defaultOptions:{animationData:temp,loop:true,autoplay:true},

 7、完成

不可以的话，再参考一下我开篇提到的那篇博文，写的很详细。

补充：最后检查这几个部分