菜鸟教程
教程 animejs tutorial

事件监听

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

小结

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

示例演示

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Anime.js 事件监听示例</title>
    <style>
      .box {
        width: 60px;
        height: 60px;
        background-color: #4fc08d;
        margin: 40px;
        border-radius: 6px;
        display: inline-block;
        user-select: none;
        line-height: 60px;
        text-align: center;
        color: white;
        font-weight: bold;
      }
    </style>
  </head>

<body>
<div class="box">动画盒子</div>


&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
  anime({
    targets: &quot;.box&quot;,
    translateX: 250,
    duration: 1500,
    loop: true,
    direction: &quot;alternate&quot;,
    begin: () =&gt; console.log(&quot;动画开始&quot;),
    update: (anim) =&gt; console.log(`当前进度: ${anim.progress.toFixed(2)}%`),
    complete: () =&gt; console.log(&quot;动画完成&quot;),
  });
&lt;/script&gt;



</body>
</html>

相关内容