добавьте задержку к итерации

#javascript #arrays #animation #geometry

Вопрос:

Я создаю анимацию с несколькими нарисованными кругами, идущими слева направо. Однако анимация начинается одновременно для всех кругов, и мне нужно, чтобы они имели временной интервал (например, 1 секунду) между собой. Есть идеи, как с этим справиться? Я безуспешно пробовал setInterval. Рисунок кругов выглядит следующим образом:

 function isPrime(num) {
  for(var i = 2; i < num; i  )
    if(num % i === 0) return false;
  return num > 1;
}
const settings = {
  width: 300,
  height: 930,
  radius: 13,
  gap: 5,
  circles: 30,
};
const canvas = document.getElementById("canvas");
canvas.width = settings.width;
canvas.height = settings.height;
const ctx = canvas.getContext("2d");
var randomNumber = [];


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, // This is the speed in pixels per second
  dy: 0,
  isPrime: isPrime(randomNumber[i]),
}));

function drawCircle(circle) {
  i = 0;
  if (circle.number > 0 amp;amp; circle.number <= 10) {
    ctx.strokeStyle = "#0b0bf1";
  } else if (circle.number > 10 amp;amp; circle.number <= 20) {
    ctx.strokeStyle = "#f10b0b";
  } else if (circle.number > 20 amp;amp; circle.number <= 30) {
    ctx.strokeStyle = "#0bf163";
  } else if (circle.number > 30 amp;amp; circle.number <= 40) {
    ctx.strokeStyle = "#f1da0b";
  } else if (circle.number > 40 amp;amp; circle.number <= 50) {
    ctx.strokeStyle = "#950bf1";
  } else if (circle.number > 50 amp;amp; circle.number <= 60) {
    ctx.strokeStyle = "#0bf1e5";
  }
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2, false);
  ctx.stroke();
  ctx.fillText(circle.number, circle.x - 5, circle.y   3);

}

function updateCircle(circle, dt) {
  circle.x = clamp(
    circle.x   circle.dx * dt,
    circle.radius   1,
    settings.width - circle.radius - 1
  );
  circle.y = clamp(
    circle.y   circle.dy * dt,
    circle.radius   1,
    settings.height - circle.radius - 1
  );
}

function animate() {
  ctx.clearRect(0, 0, settings.width, settings.height);
  circles.forEach(drawCircle);

  requestAnimationFrame(animate);
}
animate();
update((dt) => circles.forEach((circle) => updateCircle(circle, dt)), 50);

1. О, прости. Является частью кода, связанного с функцией, которая улавливает простые числа. Я не включил его сюда, потому что думал, что это не имеет отношения к моему вопросу.

2. Что такое update ?

3. Это: // Вызов функции через интервал, передающий количество времени, прошедшее с момента последнего обновления функции вызова(обратный вызов, интервал) { пусть сейчас = производительность.сейчас(); пусть последний; setInterval(функция () { последний = сейчас; сейчас = производительность.сейчас(); Обратный вызов((сейчас — последний) / 1000); }); }

Ответ №1:

Я думаю, ты хочешь сделать как

 let i = 0, l = circles.length;
let intv = setInterval(()=>{
  drawCircle(circles[i  ]);
  if(i === l){
    clearInterval(intv); intv = undefined;
  }
}, 100); // change interval as desired

вместо circles.forEach(drawCircle); .

Это requestAnimationFrame тоже выглядит довольно бесполезно.