事件监听

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

主要事件回调

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

示例代码

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

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
• 动画结束时触发后续动作

小结

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

示例演示

loading