1 .最近想研究一波如何在Vue里面做動(dòng)畫，掘金里面搜出來(lái)的都是和這個(gè)有關(guān)，所以決定研究一波這個(gè)
2 .首先這個(gè)組件的github上面npm install --save vue-lottile 完全沒有用娄涩，demo展示中中并沒有引入或者用到的這個(gè)安裝的組件的地方
3 .核心的文件是lottie.vue這個(gè)文件，實(shí)際上所有的動(dòng)畫渲染都是在這個(gè)組件里面映跟，而這個(gè)組件的關(guān)鍵代碼
<template>
<div :style="style" ref="lavContainer"></div>
</template>
import lottie from 'lottie-web';
//所有的核心功能都是在使用這個(gè)模塊蓄拣，根本就沒有自己的東西，竟然還有400多start
//看lottie-web的文檔努隙，發(fā)現(xiàn)還有很多方法球恤，這個(gè)都沒有封裝，真的坑爹
4 .還有一個(gè)bug是使用Vue-cli 3.0創(chuàng)建的項(xiàng)目荸镊，使用的時(shí)候?qū)雑son
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,
//這個(gè)地方傳入到的時(shí)候咽斧，通過看vue調(diào)試器發(fā)現(xiàn)，這個(gè)json文件的格式不是object躬存，而是module张惹，這個(gè)把這個(gè)格式的數(shù)據(jù)打開，取他的默認(rèn)default才能是正確的數(shù)據(jù)
animationData:this.options.animationData.default,
//要變成這個(gè)樣岭洲，才可以正常顯示诵叁。
rendererSettings: this.options.rendererSettings
}
//直接從github colne他的項(xiàng)目是可以成功渲染的，就是自己的上面的實(shí)現(xiàn)不了钦椭。拧额。
);
this.$emit('animCreated', this.anim)
5 .目標(biāo)。自己做一個(gè)更好的封裝lottie的組件出來(lái)彪腔。
6 .還有一個(gè)就是引入文件錯(cuò)誤的時(shí)候是一定編譯不對(duì)的
7 .這種AE做出來(lái)的動(dòng)畫是css或者代碼完全不能比的侥锦，那種流暢感。
8 .還有就是直接把他渲染成canvas德挣，這樣就不用html代碼就不用那么看著亂了恭垦。。
目標(biāo)：自己做一個(gè)更好的封裝lottie的組件出來(lái)格嗅。
1 .瀏覽官方github番挺，熟悉api
2 .下面的關(guān)于動(dòng)畫的事件回調(diào)
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)
// 直接跳到某一幀,實(shí)現(xiàn)一些步驟的動(dòng)畫
// 第一個(gè)值是基于時(shí)間的.true
// 第一個(gè)值是基于幀的:false
},
gotoandplay(){
this.anim.gotoAndPlay(100)
}
},
mounted(){
this.anim.addEventListener('complete',()=>{
console.log('動(dòng)畫播放完畢')
})
// 嗅探動(dòng)畫發(fā)生的事件
this.anim.addEventListener('')
}
}
</script>
```