Tween.js重复问题：如何获知补间重启时机及当前重复次数？

好问题！Tween.js 本身并没有专门用来监听补间「重启」事件的内置方法，也没有直接暴露当前重复次数的属性，但我们可以通过它提供的回调钩子和一点自定义逻辑来实现这两个需求。

一、追踪重复次数 & 感知重启时机 #

1. 利用内置的onRepeat回调（自动重复场景） #

当你给补间设置了repeat属性（比如repeat: -1表示无限重复），每次补间完成一轮并准备重启时，都会触发onRepeat回调。我们可以在这里维护一个计数器，轻松追踪当前是第几次重复，同时这也是感知重启发生的最佳时机：

// 初始化重复计数器
let repeatCount = 0;

const tween = new TWEEN.Tween({ x: 0 })
  .to({ x: 100 }, 1000)
  .repeat(-1) // 设置为-1表示无限重复
  .yoyo(true) // 可选：开启来回动画模式
  .onRepeat(() => {
    repeatCount++;
    console.log(`补间已自动重启，当前是第 ${repeatCount} 次重复`);
    // 在这里执行重启后的自定义逻辑，比如更新状态、触发其他事件等
  })
  .start();

2. 手动重启时的追踪 #

如果是通过调用tween.restart()手动触发重启，Tween.js 不会自动触发onRepeat（这个回调仅针对自动重复的场景）。这时候我们可以封装一个自定义的重启函数，在里面添加追踪逻辑：

let repeatCount = 0;

// 封装自定义重启函数
function customRestart(tween) {
  repeatCount++;
  console.log(`补间被手动重启，当前累计重复次数：${repeatCount}`);
  // 调用原生restart方法
  tween.restart();
}

// 使用示例
const tween = new TWEEN.Tween({ x: 0 })
  .to({ x: 100 }, 1000)
  .start();

// 手动重启时调用customRestart而不是直接调用tween.restart()
setTimeout(() => customRestart(tween), 2000);

3. 结合onStart区分首次启动与重启 #

onStart回调只会在补间第一次启动时触发，后续的自动重复不会触发它，但手动调用restart()会再次触发。我们可以利用这一点，更精准地区分首次启动和手动重启的场景：

let isFirstRun = true;
let repeatCount = 0;

const tween = new TWEEN.Tween({ x: 0 })
  .to({ x: 100 }, 1000)
  .repeat(-1)
  .onStart(() => {
    if (isFirstRun) {
      console.log('补间首次启动');
      isFirstRun = false;
    } else {
      console.log('补间被手动重启');
      repeatCount++;
    }
  })
  .onRepeat(() => {
    repeatCount++;
    console.log(`自动重启，当前重复次数：${repeatCount}`);
  })
  .start();

这些方案都是基于Tween.js现有API的轻量扩展，足够覆盖大多数业务场景啦。

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