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

Lottie Events vs. Lottie EventListener

Lottie Events 指的是在Lottie动画中发生的特定事件点，比如动画开始、动画结束、特定帧达到等。开发者可以在这些事件发生时触发一些操作或函数。

Lottie EventListener 是一个接口或工具，用于监听这些Lottie Events。当这些事件被触发时，EventListener 会捕捉到这些事件，并执行绑定的回调函数。

使用示例

假设我们有一个Lottie动画，我们想在动画开始和结束时打印消息，同时在动画达到50%的时候执行特定的逻辑。

1. 引入Lottie库

首先，确保你的项目中已经引入了Lottie的库。

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.3/lottie.min.js"></script>

2. 加载动画

在你的HTML中添加一个容器来承载动画。

html
<div id="lottie-animation"></div>

使用JavaScript加载动画。

javascript
var animation = lottie.loadAnimation({
  container: document.getElementById('lottie-animation'), // 动画容器
  renderer: 'svg',
  loop: false,
  autoplay: true,
  path: 'path/to/your/animation.json' // 动画文件路径
});

3. 添加EventListener

使用addEventListener监听动画的特定事件。

javascript
// 动画开始事件
animation.addEventListener('DOMLoaded', function() {
  console.log('动画开始!');
});

// 动画结束事件
animation.addEventListener('complete', function() {
  console.log('动画结束!');
});

// 监听动画达到第50帧
animation.addEventListener('enterFrame', function(e) {
  if (e.currentTime >= (animation.totalFrames / 2)) {
    console.log('动画已到达50%!');
    // 为了只执行一次，可以在这里移除监听器
    animation.removeEventListener('enterFrame');
  }
});

结论

通过使用Lottie Events和Lottie EventListener，开发者可以控制动画的交互式行为，例如在动画的关键时刻进行特定操作，提高用户体验。这种方法在网页和应用程序中具有广泛的应用，如页面加载动画、进度条、动态提示等。