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>
```