anime.js 回调函数用法：在动画生命周期中执行业务逻辑

一、anime.js 完整生命周期全景剖析

在动画实例被创建并调用时，anime.js 会按照严格的时序驱动动画内部状态机。理解这个时序是编写高稳定性业务代码的基础。很多开发者经常混淆 begin 与配置阶段的执行先后，或者在开启循环动画时错误地将 complete 当作单次循环的结束点。

anime.js 提供的核心回调函数覆盖了从启动到终结的每一个细分节点，所有回调函数均会接收当前动画实例 anim 作为参数。通过该参数，开发者可以读取当前的进度百分比（anim.progress）、已播放时长（anim.currentTime）以及完成状态标志等关键信息。

二、核心回调函数定义与适用场景对照

为了选择最适合业务逻辑的回调，我们需要对比每个钩子的触发频率和业务语义：

三、在动画生命周期中落地业务的四个关键步骤

将业务逻辑与动画绑定时，若缺少统一的范式，极易导致“交互多次重复触发”、“数值更新不同步”或“内存泄漏”。推荐遵循以下四个标准步骤展开实现。

1. 完整示例：带提交锁、实时进度与结果上报的业务按钮

下面是一个实际项目中极具代表性的场景：用户点击“确认同步”按钮，按钮展开为进度加载条，文字随着动画逐帧显示从 0% 到 100%；动画开始时加锁防止重复连击，动画完成时发起业务接口请求并恢复状态。

// 引入并获取 DOM 元素
const submitBtn = document.querySelector('#submit-button');
const progressBar = document.querySelector('#progress-bar');
const progressLabel = document.querySelector('#progress-label');

// 业务状态锁
let isExecuting = false;

submitBtn.addEventListener('click', () => {
  // 前置防重校验
  if (isExecuting) return;

  anime({
    targets: progressBar,
    width: '100%',
    duration: 2000,
    easing: 'easeInOutQuad',
    
    // 阶段 1: 动画起步（延迟后触发）
    begin: (anim) => {
      isExecuting = true;
      submitBtn.setAttribute('disabled', 'true');
      submitBtn.classList.add('btn-loading');
      progressLabel.textContent = '准备同步数据...';
      console.log('[业务] 交互加锁，动画开始', anim.began);
    },

    // 阶段 2: 逐帧更新
    update: (anim) => {
      // 利用 anim.progress (0-100) 实时映射文本，保持纯计算
      const currentPercent = Math.round(anim.progress);
      progressLabel.textContent = `同步中: ${currentPercent}%`;
    },

    // 阶段 3: 动画彻底完毕
    complete: async (anim) => {
      progressLabel.textContent = '同步完成！';
      console.log('[业务] 动画结束，开始上报接口');
      
      try {
        // 触发真实后端通信
        await fetch('/api/sync-data', { method: 'POST' });
        console.log('[业务] 服务端响应成功');
      } catch (err) {
        console.error('[业务] 同步异常', err);
      } finally {
        // 恢复交互状态锁
        isExecuting = false;
        submitBtn.removeAttribute('disabled');
        submitBtn.classList.remove('btn-loading');
      }
    }
  });
});

2. 时间线 (Timeline) 中的回调传递规则

当使用 anime.timeline() 编排多个连续动画时，回调可以分别定义在时间线全局配置或具体的子动画片段上。两者的职责范围是完全不同的：

• 时间线全局回调：定义在 anime.timeline({ complete: fn }) 中的函数，仅在时间线上所有子动画全部播放完毕后触发一次；
• 子动画局部回调：定义在 tl.add({ targets: '.item', complete: fn }) 中的函数，会在该特定片段播完后立即触发，适合处理该阶段局部的业务收尾。

四、生产实践避坑指南

在实际大型工程中，因不规范使用回调函数引发的性能问题和逻辑幽灵漏洞层出不穷。以下四个要点需要格外警惕：

五、总结

anime.js 的回调机制充当了视觉呈现与业务领域逻辑之间的桥梁。在开发过程中：

• 使用 begin 确立状态前提与交互安全锁；
• 使用 update 进行纯净的数值与渲染映射，严格防范 Layout Thrashing；
• 使用 loopBegin 与 loopComplete 精细处理轮播与周期清理；
• 使用 complete 或 anim.finished 闭环完成业务流转与异步交付。

将动画生命周期视为严谨的状态机，根据执行频次合理分配业务任务，就能在保证 60fps 流畅视觉效果的同时，写出健壮可靠的前端交互代码。