5

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

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 真的很陌生，所以可以使用一些帮助。

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

4

2 回答 2

7

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

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')
})
于 2020-05-29T03:44:56.077 回答
4

您可以使用该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');
}

希望有帮助！

于 2019-06-11T23:01:36.520 回答