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

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

 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

封装的组件代码



```