Как определить наилучшую "частоту кадров" (задержка setInterval) для использования в цикле анимации JavaScript?

Ответ 1

Я бы рискнул сказать, что значительная часть веб-пользователей использует мониторы, которые обновляются на частоте 60 Гц, что соответствует одному кадру каждые 16,66 мс. Поэтому, чтобы сделать монитор узким местом, вам нужно создавать кадры быстрее, чем 16,66 мс.

Есть две причины, по которым вы выберете значение, равное 13 мс. Во-первых, браузеру требуется немного времени для перерисовки экрана (по моему опыту, не менее 1 мс). Который помещает вас, скажем, обновлять каждые 15 мс, что бывает очень интересным числом - стандартное разрешение по таймеру в Windows составляет 15 мс (см. Сообщение в блоге Джона Ресига). Я подозреваю, что хорошо написанная анимация в 15 мсек очень близка к тому же в самых разных браузерах/операционных системах.

FWIW, fbogner неверно неверно о том, что браузер Chrome не запускается с помощью setInterval каждые 20-30 мс. Я написал test для измерения скорости запуска setInterval и получил следующие цифры:

• Chrome - 4 мс
• Firefox 3.5 - 15ms
• IE6 - 15 мс
• IE8 - 15ms

Ответ 2

Псевдокод для этого является следующим:

FPS_WANTED = 25 
(just a number, it can be changed while executing, or it can be constant)

TIME_OF_DRAWING = 1000/FPS_WANTED 
(this is in milliseconds, I believe it is accurate enough) 
( should be updated when FPS_WANTED changes)

UntilTheUserLeavesTheDrawingApplication()
{

  time1 = getTime();
  doAnimation();
  time2 = getTime();
  animationTime = time2-time1;

  if (animationTime > TIME_OF_DRAWING)
  {
     [the FPS_WANTED cannot be reached]
     You can:
     1. Decrease the number of FPS to see if a lower framerate can be achieved
     2. Do nothing because you want to get all you can from the CPU
  }
  else
  {
     [the FPS can be reached - you can decide to]
     1. wait(TIME_OF_DRAWING-animationTime) - to keep a constant framerate of FPS_WANTED
     2. increase framerate if you want
     3. Do nothing because you want to get all you can from the CPU
  }

}

Конечно, могут быть вариации этого, но это основной алгоритм, который действителен в любом случае анимации.

Ответ 3

При выполнении циклов для анимации лучше всего находить баланс между скоростью цикла и сколько работы нужно выполнить.

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

Итак, это пробная версия и ошибка (с учетом возможности работы, времени и браузера). Таким образом, он не только хорошо выглядит в одном браузере.

Ответ 4

Число, указанное fbogner, было проверено. Браузеры дросселируют js-активность в определенной степени для использования каждый раз.

Если ваш javascript можно будет запускать каждые 5 мсек, время выполнения браузера будет иметь гораздо меньше времени процессора, чтобы обновить рендеринг или отреагировать на ввод пользователя (клики), поскольку выполнение javascript блокирует браузер.

Я думаю, что chrome-devs позволяет вам запускать ваш javascript на гораздо более короткие промежутки времени, чем другие браузеры, потому что их V8-Javascript-Engine компилирует JavaScript и, следовательно, он работает быстрее и браузер блокируется, пока интерпретируется JS-кода.

Но движок не только намного быстрее, чтобы разрешить более короткие интервалы, которые разработчики наверняка проверили, что является наилучшим возможным минимальным интервалом, чтобы разрешить короткие интервалы и не блокировать браузер для длинных

Ответ 5

Не знаю аргументов за время интервала jQuery, так как 13ms переводит на 80fps, что очень быстро. "Стандартные" fps, которые используются в фильмах и т.д., Составляют 25 кадров в секунду и достаточно быстр, чтобы человеческий глаз не заметил каких-либо дрожаний. 25fps переводится в 40 мс, поэтому для ответа на ваш вопрос: для анимации достаточно всего менее 40 мс.