Lottie-前端实现AE动效，json文件引用

一、页面效果

实际效果小树可以跳动

二、vue-lottie

vue-lottie git地址 : link.

三、使用

1、安装

npm install --save vue-lottie

2、在main.js 引用

import lottie from 'vue-lottie';
Vue.component('lottie', lottie)

3、代码中使用

// html
  <div>
    <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation" />
    <div>
      <p>Speed: x{{ animationSpeed }}</p>
      <input type="range" value="1" min="0" max="3" step="0.5" v-on:change="onSpeedChange" v-model="animationSpeed" />
    </div>
    <button v-on:click="stop">stop</button>
    <button v-on:click="pause">pause</button>
    <button v-on:click="play">play</button>
  </div>

-----------------
// script 中
const animationData = require('@/assets/lottie/data.json') 
// import * as animationData from '@/assets/lottie/data.json'; // 不显示图片
 data() {
    return {
      defaultOptions: { animationData: animationData },
      animationSpeed: 1,
    }
  },
  methods: {
    handleAnimation: function (anim) {
      this.anim = anim
    },

    stop: function () {
      this.anim.stop()
    },

    play: function () {
      this.anim.play()
    },

    pause: function () {
      this.anim.pause()
    },

    onSpeedChange: function () {
      this.anim.setSpeed(this.animationSpeed)
    },
  },

注意

json文件中图片地址是针服务器项目目录
需放在public文件夹下，注意检查json文件图片地址和所在文件的路径