javascript - Lottie Events 和 Lottie EventListeners 有什么区别以及如何使用？

Question

该文档同时具有事件和事件监听器。我可以让 EventListeners 触发，但 Event 没有足够的文档让我开始。有什么区别以及如何使用？谢谢你。

https://github.com/airbnb/lottie-web#events

事件(不工作，如何使用？)

//来自文档

完成

onLoopComplete

onEnterFrame

onSegmentStart

您还可以将 addEventListener 与以下事件一起使用:

完整

循环完成

输入框

段开始

config_ready(初始配置完成时)

data_ready(当动画的所有部分都已加载时)

data_failed(部分动画无法加载时)

加载图像(当所有图像加载成功或错误时)

DOMLoaded(当元素被添加到 DOM 时)

销毁

//结束文档

从标准的 addEventListener 用法来看，这有效......

birbSequence.addEventListener('loopComplete', (e) => {
    console.log(e);
});

尽管“完整”不会触发。

但是要尝试 onEnterFrame 之类的事件中的内容？

var birbSequence = lottie.loadAnimation({
    container: bodyMovinContainer1,
    loop: true,
    renderer: 'svg',
    path: 'Birb Sequence 1.json',
    onEnterFrame: function(e) { console.log(e); }
});

我对使用 Lottie 真的很陌生，所以可以使用一些帮助。

只是想要一种方法来看看如何使用事件

Answer 1

假设我们有我们的彩票动画:

const anim = lottie.loadAnimation({
  container: '#container',
  renderer: 'svg',
  loop: true,
  autoplay: true,
  ...
})

有事件:

anim.onComplete = function() {
  console.log('complete')
}
anim.onLoopComplete = function() {
  console.log('loopComplete')
}

使用 addEventListener:

anim.addEventListener('complete', function() {
  console.log('complete')
})
anim.addEventListener('loopComplete', function() {
  console.log('loopComplete')
})