lottie-web的基本用法
引用
const animation = window.bodymovin.loadAnimation({
?container: element, // 要包含該動(dòng)畫的dom元素
renderer: 'svg', // 渲染方式，svg泉懦、canvas启上、html（輕量版僅svg渲染）
loop: true, // 是否循環(huán)播放
autoplay: true, // 是否自動(dòng)播放
path: animateJsonPath, // 動(dòng)畫json文件路徑
});
lottie-web常用方法
lottie-web提供了很多的控制動(dòng)畫播放的方法，下面是一些常用的方法案狠。animation等于上面代碼中的animation服傍。
animation.play(); // 播放該動(dòng)畫，從目前停止的幀開始播放
animation.stop(); // 停止播放該動(dòng)畫骂铁，回到第0幀
animation.pause(); // 暫停該動(dòng)畫吹零，在當(dāng)前幀停止并保持
animation.goToAndStop(value, isFrame); // 跳到某個(gè)時(shí)刻/幀并停止。isFrame(默認(rèn)false)指示value表示幀還是時(shí)間(毫秒)
animation.goToAndPlay(value, isFrame); // 跳到某個(gè)時(shí)刻/幀并進(jìn)行播放
animation.goToAndStop(30, true); // 跳轉(zhuǎn)到第30幀并停止
animation.goToAndPlay(300); // 跳轉(zhuǎn)到第300毫秒并播放
animation.playSegments(arr, forceFlag); // arr可以包含兩個(gè)數(shù)字或者兩個(gè)數(shù)字組成的數(shù)組拉庵，forceFlag表示是否立即強(qiáng)制播放該片段
animation.playSegments([10,20], false); // 播放完之前的片段灿椅，播放10-20幀
animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5幀和10-18幀
animation.setSpeed(speed); // 設(shè)置播放速度，speed為1表示正常速度
animation.setDirection(direction); // 設(shè)置播放方向钞支，1表示正向播放茫蛹，-1表示反向播放
animation.destroy(); // 刪除該動(dòng)畫，移除相應(yīng)的元素標(biāo)簽等伸辟。在unmount的時(shí)候麻惶，需要調(diào)用該方法
lottie-web常用的事件
我們在lottie-web中可能也需要監(jiān)聽一些事件，比如加載完動(dòng)畫json文件時(shí)的data_ready事件信夫。監(jiān)聽方法如下:
animation.addEventListener('data_ready', () => { console.log('animation data has loaded'); });
除了data_ready事件窃蹋，下面還有一些其他常用的事件可以監(jiān)聽：
* complete: 播放完成（循環(huán)播放下不會(huì)觸發(fā)）
* loopComplete: 當(dāng)前循環(huán)下播放（循環(huán)播放/非循環(huán)播放）結(jié)束時(shí)觸發(fā)
* enterFrame: 每進(jìn)入一幀就會(huì)觸發(fā)，播放時(shí)每一幀都會(huì)觸發(fā)一次静稻，stop方法也會(huì)觸發(fā)
* segmentStart: 播放指定片段時(shí)觸發(fā)警没，playSegments、resetSegments等方法剛開始播放指定片段時(shí)會(huì)發(fā)出振湾，如果playSegments播放多個(gè)片段杀迹，多個(gè)片段最開始都會(huì)觸發(fā)。
* data_ready: 動(dòng)畫json文件加載完畢觸發(fā) * DOMLoaded: 動(dòng)畫相關(guān)的dom已經(jīng)被添加到html后觸發(fā)
* destroy: 將在動(dòng)畫刪除時(shí)觸發(fā)
lottie-web部分高階用法
在制作AE動(dòng)畫時(shí)押搪，將圖層命名為#svgId格式树酪，前端加載該動(dòng)畫后，相應(yīng)的圖層的id會(huì)被設(shè)置為svgId大州，可以通過dom方法獲取該元素并做相應(yīng)的操作续语；
在制作AE動(dòng)畫時(shí)，將圖層命名為.svgClass格式厦画，前端加載該動(dòng)畫后疮茄，相應(yīng)的圖層的class會(huì)被設(shè)置為svgClass，可以通過dom方法獲取這些元素并做相應(yīng)的操作根暑；
