vue-lottie的坑爹之处，以及如何自己使用vue进行美丽的

1 .最近想研究一波如何在Vue里面做动画，掘金里面搜出来的都是和这个有关，所以决定研究一波这个
2 .首先这个组件的github上面npm install --save vue-lottile 完全没有用，demo展示中中并没有引入或者用到的这个安装的组件的地方
3 .核心的文件是lottie.vue这个文件，实际上所有的动画渲染都是在这个组件里面，而这个组件的关键代码

<template>
    <div :style="style" ref="lavContainer"></div>
</template>
 import lottie from 'lottie-web';
//所有的核心功能都是在使用这个模块，根本就没有自己的东西，竟然还有400多start
//看lottie-web的文档，发现还有很多方法，这个都没有封装，真的坑爹

4 .还有一个bug是使用Vue-cli 3.0创建的项目，使用的时候导入json

import * as animationData from './assets/pinjump.json';

this.anim = lottie.loadAnimation({
          container: this.$refs.lavContainer,
          renderer: 'svg',
          loop: this.options.loop !== false,
          autoplay: this.options.autoplay !== false,
          animationData: this.options.animationData,
//这个地方传入到的时候，通过看vue调试器发现，这个json文件的格式不是object，而是module，这个把这个格式的数据打开，取他的默认default才能是正确的数据
          animationData:this.options.animationData.default,
//要变成这个样，才可以正常显示。
          rendererSettings: this.options.rendererSettings
        }
//直接从github colne他的项目是可以成功渲染的，就是自己的上面的实现不了。。
      );
      this.$emit('animCreated', this.anim)

5 .目标。自己做一个更好的封装lottie的组件出来。
6 .还有一个就是引入文件错误的时候是一定编译不对的
7 .这种AE做出来的动画是css或者代码完全不能比的，那种流畅感。
8 .还有就是直接把他渲染成canvas，这样就不用html代码就不用那么看着乱了。。

目标：自己做一个更好的封装lottie的组件出来。

1 .浏览官方github，熟悉api
2 .下面的关于动画的事件回调

onComplete
onLoopComplete
onEnterFrame
onSegmentStart
you can also use addEventListener with the following events:

complete
loopComplete
enterFrame
segmentStart
config_ready (when initial config is done)
data_ready (when all parts of the animation have been loaded)
data_failed (when part of the animation can not be loaded)
loaded_images (when all image loads have either succeeded or errored)
DOMLoaded (when elements have been added to the DOM)
destroy

封装的组件代码
<template>
    <div>
       <lottie :options="defaultOptions" :height="140" :width="140" v-on:animCreated="handleAnimation"/>
       <ul>
        <li @click="play">
          play
        </li>
        <li @click="stop">
          stop
        </li>
        <li @click="pause">
          pause
        </li>
        <li @click="onSpeedChange">
          加快
        </li>
        <li @click="setDirection">
          反向播放
        </li>

        <li @click="gotoandStop">
          gotoandStop
        </li>
      </ul>
    </div>
</template>

<script>
  import Lottie from './lottie.vue';
  import * as animationData from './motorcycle.json';

  export default {
    name:'lottie1',
    components: {
      'lottie': Lottie
    },
    data() {
      return {
        defaultOptions: {animationData: animationData},
        animationSpeed: 16

      }
    },
    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.animationSpeed++;
        this.anim.setSpeed(this.animationSpeed);
      },
      setDirection(){
        this.anim.setDirection(-1)
        // 1正向播放
        // 反向
      },
      gotoandStop(){
        this.anim.goToAndStop(1000,true)
        // 直接跳到某一帧,实现一些步骤的动画
        // 第一个值是基于时间的.true
        // 第一个值是基于帧的:false
      },
      gotoandplay(){
        this.anim.gotoAndPlay(100)
      }
    },
    mounted(){
      this.anim.addEventListener('complete',()=>{
        console.log('动画播放完毕')
      })
      // 嗅探动画发生的事件
      this.anim.addEventListener('')
    }
  }
</script>
```