requestAnimationFrame递归调用单次结束触发与重复动画执行问题咨询

嘿，针对你的两个问题，我来给你梳理下实用的解决方案：

1. 递归调用requestAnimationFrame时仅触发一次动画结束事件 #

核心思路是用一个状态标志位来控制结束事件的触发时机，避免因为浏览器的重绘机制或者意外重复进入结束判断导致多次触发。具体步骤如下：

• 定义一个布尔变量（比如isAnimationEnded），初始设为false，用来标记动画是否已经触发过结束事件。
• 在递归的动画函数中，当判断动画达到结束条件（比如进度满100%、时间到了）时，先检查这个标志位：如果是false，就触发结束事件，然后把标志位设为true；如果已经是true，直接跳过。
• 别忘了用cancelAnimationFrame清理动画帧请求，避免内存泄漏。

举个直观的代码例子：

let isAnimationEnded = false;
let animationId;
const targetElement = document.getElementById('animated-box');

function animate(timestamp) {
  // 初始化起始时间
  if (!window.animationStart) window.animationStart = timestamp;
  // 计算动画进度（这里假设动画时长1000ms）
  const progress = Math.min((timestamp - window.animationStart) / 1000, 1);
  
  // 执行动画逻辑：比如移动元素
  targetElement.style.transform = `translateX(${progress * 300}px)`;

  if (progress < 1) {
    // 继续递归请求动画帧
    animationId = requestAnimationFrame(animate);
  } else {
    // 触发结束事件的逻辑
    if (!isAnimationEnded) {
      // 可以用自定义事件或者直接调用回调
      targetElement.dispatchEvent(new CustomEvent('animEnd'));
      isAnimationEnded = true;
      console.log('动画结束啦，只触发一次！');
    }
    // 清理动画帧请求
    cancelAnimationFrame(animationId);
  }
}

// 监听结束事件
targetElement.addEventListener('animEnd', () => {
  // 这里写动画结束后的逻辑
});

// 启动动画
window.animationStart = null;
animationId = requestAnimationFrame(animate);

这个方法能确保不管浏览器有没有出现重绘延迟，结束事件只会被触发一次。

2. 重复执行同一动画的实现方案 #

结合你给出的Animator.prototype.animationFrame代码片段，我们可以通过状态控制+结束回调链式启动的方式实现重复动画，关键点是要确保上一次动画完全结束后再启动下一次，同时重置动画的起始状态。

改造后的代码示例如下：

Animator.prototype.animationFrame = function(options) {
  // 兼容各浏览器的动画帧API
  const requestAnimFrame = requestAnimationFrame || webkitRequestAnimationFrame || mozRequestAnimationFrame || msRequestAnimationFrame || function(callback) {
    return setTimeout(callback, 1000/60);
  };
  const cancelAnimFrame = cancelAnimationFrame || mozCancelAnimationFrame;
  
  let startTimestamp;
  let animationId;
  let isAnimating = false; // 标记当前是否有动画在运行
  const self = this;

  // 核心动画函数
  function animate(timestamp) {
    if (!startTimestamp) startTimestamp = timestamp;
    const elapsedTime = timestamp - startTimestamp;
    // 计算进度，最大为1（避免超过100%）
    const progress = Math.min(elapsedTime / options.duration, 1);

    // 执行你的动画更新逻辑（比如修改元素样式）
    if (options.update) {
      options.update(progress);
    }

    if (progress < 1) {
      animationId = requestAnimFrame(animate);
    } else {
      isAnimating = false; // 动画结束，标记为可再次启动
      // 先执行原有的结束回调
      if (options.onEnd) options.onEnd();
      cancelAnimFrame(animationId);
    }
  }

  // 对外暴露的启动方法，确保同一时间只有一个动画在跑
  this.start = function() {
    if (!isAnimating) {
      isAnimating = true;
      startTimestamp = null; // 重置起始时间
      // 重置元素到初始状态（根据你的动画需求调整）
      if (options.reset) options.reset();
      animationId = requestAnimFrame(animate);
    }
  };

  // 重复执行动画的方法：times为次数，传Infinity表示无限重复
  this.repeat = function(times = Infinity) {
    let repeatCount = 0;
    // 包装原有的onEnd回调，实现重复逻辑
    const originalOnEnd = options.onEnd;
    options.onEnd = function() {
      if (originalOnEnd) originalOnEnd();
      repeatCount++;
      if (repeatCount < times) {
        self.start(); // 启动下一次动画
      }
    };
    // 启动第一次动画
    this.start();
  };
};

// 使用示例
const myAnimator = new Animator();
myAnimator.animationFrame({
  duration: 1500, // 动画时长1.5秒
  // 重置元素初始状态的方法
  reset: () => {
    document.getElementById('box').style.transform = 'translateX(0)';
  },
  // 动画更新逻辑
  update: (progress) => {
    document.getElementById('box').style.transform = `translateX(${progress * 250}px)`;
  },
  // 单次动画结束的回调
  onEnd: () => {
    console.log('单次动画完成');
  }
});

// 让动画重复执行3次
myAnimator.repeat(3);

这里的关键细节：

• 用isAnimating状态防止同时启动多个动画，避免动画叠加混乱。
• repeat方法通过包装原有的onEnd回调，在每次动画结束后判断是否继续重复，自动启动下一次。
• 每次启动动画前调用reset方法重置元素状态，确保每一次动画都是从初始状态开始的。

内容的提问来源于stack exchange，提问作者Volo