如何为Canvas多圆形从左到右动画添加逐次启动的间隔延迟

核心改动思路 #

• 给每个圆形对象新增启动延迟属性，按索引设置逐次递增的延迟值，实现间隔1秒依次启动的效果
• 新增启动状态判断逻辑，未达到启动时间的圆形不执行位置更新，保持初始位置不动
• 补全代码中缺失的工具函数，保证运行正常

具体代码修改 #

1. 补全前置逻辑 #

先给空的randomNumber数组赋值，同时补全代码中调用但未定义的clamp工具函数：

// 填充1-60的不重复随机数，可根据需求调整范围
while(randomNumber.length < settings.circles) {
  const num = Math.floor(Math.random() * 60) + 1;
  if (!randomNumber.includes(num)) randomNumber.push(num);
}

// 补全clamp函数
function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
}

2. 改造圆形对象初始化 #

新增延迟启动相关属性：

const circles = [...Array(settings.circles).keys()].map((i) => ({
  number: randomNumber[i],
  x: settings.radius,
  y: settings.radius + (settings.radius * 2 + settings.gap) * i,
  radius: settings.radius,
  dx: 100, // 移动速度 像素/秒
  dy: 0,
  isPrime: isPrime(randomNumber[i]),
  startDelay: i * 1000, // 第i个圆延迟i*1000毫秒启动，调整数值可修改启动间隔
  startTime: null // 存储圆形实际启动的时间戳
}));

3. 改造更新逻辑，增加启动判断 #

// 记录全局动画启动时间
const animationStartTime = Date.now();

update((dt) => circles.forEach((circle) => {
  const now = Date.now();
  // 未到启动时间直接跳过位置更新
  if (!circle.startTime) {
    if (now - animationStartTime >= circle.startDelay) {
      circle.startTime = now;
    } else {
      return;
    }
  }
  updateCircle(circle, dt);
}), 50);

animate();

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