JavaScript canvas + requestAnimationФрейм заикания

Question

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

Похоже, это происходит, когда сплайсинг снимает более высокий индекс. Вы можете заметить вспышку всякий раз, когда искра сжимается до радиуса 0. Если это реальная причина, по которой она вызывает проблему, я действительно не понимаю, почему сращивание может вызвать такую ​​проблему.

https://jsfiddle.net/sketti21/2gfarp74/82/

// Handles the animation of the sparkles.
function animate(timestamp)
{
  // Observe the timestamp gives by requestAnimationFrame in console.
  // console.log(timestamp);

  // Clears the previous frame;
  draw.clearRect(0, 0, canvas.width, canvas.height);

  // Loop through each index of sparkles. Doing this lets us draw multiple
  // sparkles at once.
  for (i = 0; i < sparkles.length; i++)
  {
    if (sparkles[i] != null)
    {
      // If the sparkle's delay is not set, then set it.
      // This is necessary to do here since the timestamp that requestAnimationFrame
      // puts in as a parameter is always growing.
      if (sparkles[i].delay == null)
      {
        sparkles[i].delay = Math.floor(Math.random()*config.maxDelay) + timestamp;
      }

      // Handles whether to animate the next frame or to remove this sparkle from array.
      // If timestamp is larger than sparkle's delay, this means it's time to
      // animate this sparkle.
      if (timestamp > sparkles[i].delay)
      {
        // Increment the input variable and calculate the radius of circle.
        sparkles[i].inputX += config.increment;
        var radius = getRadius(sparkles[i].inputX, sparkles[i].multiplier);
        console.log("Radius of index " + i + ": " + radius);
        console.log("Multiplier of index " + i + ": " + sparkles[i].multiplier);

        if (radius < 0)
        {
          radius = 0;
        }

        // Drawing the circle.
        draw.beginPath();
        draw.arc(sparkles[i].x,
                 sparkles[i].y,
                 radius, 0, 360);
        draw.fill();
        draw.closePath();

        // If the sparkle's radius drops below 0, then remove it from the array.
        if (radius == 0)
        {
          sparkles.splice(i, 1);
          console.log("spliced indexes " + i + " to " + (i + 1));
        }
      }
    }
  }

  if (sparkles.length > 0)
  {
    animControl = window.requestAnimationFrame(animate);
  }
  else
  {
    console.log("Refilled the array.");
    for (i = 0; i < config.maxSparkles; i++)
    {
      sparkles[i] = new Sparkle();
    }
    animControl = window.requestAnimationFrame(animate);
  }
}

Позвольте мне обобщить логику моего кода, чтобы сделать чтение через него быстрее и проще:

1. Создайте массив sparkles.
2. Запустите анимацию. (animate ())
3. Очистить холст.
4. Заполнить сверкающий массив до config.maxSparkles.
5. requestAnimationFrame (animate)
6. Очистить холст.
7. Если случайная задержка не была назначена объекту Sparkle, рассчитайте задержку ниже config.maxDelay и добавьте метку времени.

8. Если текущая метка времени большезадержка искры ..

   8а. Рассчитайте и нарисуйте каждую искру отдельно для этого кадра.

   8b. Если радиус Sparkle = 0, то сплайс, который искрится из массива sparkles.

9. Если в массиве sparkles есть элементы, то requestAnimationFrame (animate)

   9a,Иначе, пополните массив до config.maxSparkles.

... И т. Д. И т. П.

Любая помощь очень ценится!

Answer 1

Когда вы склеиваете что-то из массива, элемент удаляется, и, следовательно, длина сокращается на единицу.

То есть, если вы перебираете массив и что-то удаляете, это означает, что индекс для элементаВы удаляете теперь стало индексом для следующего элемента. Поэтому в следующем цикле этот элемент пропускается.

Чтобы решить вашу проблему, вам нужно уменьшить i, когда вы что-то склеиваете из массива, чтобы он не пропускался на следующей итерации.

Это должно помочь решить проблему!