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

Question

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

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

事件（不起作用，怎么用？）

// 来自文档

完成
循环完成
onEnterFrame
onSegmentStart

您还可以对以下事件使用 addEventListener：

完成
循环完成
进入框架
段开始
config_ready（初始配置完成后）
data_ready（当动画的所有部分都加载完成后）
data_failed（部分动画无法加载时）
loaded_images（当所有图像加载成功或错误时）
DOM已加载（当元素已添加到 DOM）
摧毁

// 结束文档

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

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

虽然'complete'不触发。

但要尝试像 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

您可以使用addEventListener方法来监听所有的事件，而不是on*系列的事件钩子。

const options = {
  container: '#container',
  loop: false,
  autoplay: false,
  renderer: 'svg',
  rendererSettings: {
  scaleMode: 'noScale',
    clearCanvas: false,
    progressiveLoad: true,
    hideOnTransparent: true,
  },
};

try {
  const anim = lottie.loadAnimation({ ...options, path: 'URL_TO_JSON' });

  anim.addEventListener('complete', () => { console.log('complete'); });
  anim.addEventListener('loopComplete', () => { console.log('loopComplete'); });
  anim.addEventListener('data_ready ', () => { console.log('data_ready'); });
  anim.addEventListener('data_failed', () => { console.log('data_failed'); });
  anim.addEventListener('enterFrame', () => {
    console.log('enterFrame', anim.currentFrame);
  });
  // etc ...
} catch (error) 
  console.log('error loading anim');
}

希望对您有所帮助！

Answer 2

假设我们有我们的 lottie 动画：

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')
})

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

What is the difference between Lottie Events and Lottie EventListeners and How to use?

javascript

dom-events

lottie

bodymovin