lottie

很久之前写过的一个Lottie动画demo，这里贴下demo。

使用步骤

/*
* lottie.vue文件
* Lottie官网：https://www.lottiefiles.com/?page=1
* 1、安装vue
* 2、安装lottie     : npm install --save vue-lottie
* 3、引入components : import Lottie from './lottie.vue';
* 4、引入json文件
*/

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>

lottie.vue 使用

/*
* 渲染一个动画
*/
<template>
  <div id="app">
    <!-- 第一个动画 -->
    <lottie :options="defOpt1" :height="300" :width="300" v-on:animCreated="handleAni"/>
    <!-- 第二个动画 -->
    <lottie :options="defOpt2" :height="200" :width="200" v-on:animCreated="handleAni"/>
    <!-- 控制器 -->
    <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>
</template>

<script>
// lottie组件
import Lottie from './lottie.vue';
// 示例动画json文件可在lottie官网下载
import * as animate1 from './animate1.json';
import * as animate2 from './animate2.json';

export default {
  name: 'app',
  components: {
    'lottie': Lottie
  },
  data() {
    return {
      count: 1,
      defOpt1: {animationData: animate1},
      defOpt2: {animationData: animate2}
      animationSpeed: 1
    }
  },
  methods: {
    handleAni: function (anim) {
      let aniName = "anim"+this.count;
      this[aniName] = anim;
      this.count++;
    },

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

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

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

    onSpeedChange: function () {
      this.anim.setSpeed(this.animationSpeed);
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  #app{
    position: absolute;
    width: 100%;
    overflow: auto;
    background: greenyellow;
  }
</style>