# 事件监听

URL: https://caijiao.org/animejs/2-basics/4-events
Source: docs/animejs/2-basics/4-events.md
Description: 本节介绍 Anime.js 中动画事件监听机制，包括动画开始、更新、完成和停止等事件的使用方法，帮助开发者灵活响应动画状态变化。

Anime.js 支持多种事件回调，开发者可以通过这些事件监听动画生命周期中的不同阶段，实现更复杂的交互逻辑。

## 主要事件回调

- `begin` — 动画开始时触发
- `update` — 动画每一帧更新时触发
- `complete` — 动画完成时触发
- `loopBegin` — 循环开始时触发
- `loopComplete` — 循环结束时触发
- `changeBegin` — 属性改变开始时触发
- `changeComplete` — 属性改变完成时触发

## 示例代码

打开`F12`，查看浏览器输出：

```js
anime({
  targets: ".box",
  translateX: 250,
  duration: 1500,
  loop: true,
  direction: "alternate",
  begin: () => console.log("动画开始"),
  update: (anim) => console.log(`当前进度: ${anim.progress.toFixed(2)}%`),
  complete: () => console.log("动画完成"),
});
```

## 使用场景

- 动画开始时执行初始化操作
- 动画进行中更新状态或 UI
- 动画结束时触发后续动作

## 小结

事件监听为动画提供了丰富的钩子，方便开发者根据动画进度控制逻辑，增强交互体验。

## 示例演示

[在线代码演示](/animejs/demos/4.html)