Canvas: равномерное движение

Question

[joger]

Есть большое движущееся изображение. Возникает впечатление, что движение происходит рывками.
Это можно вылечить?

Пример: jurassic-lab.com/test2/

Спасибо

Answer 1

[ertaquo]

Попробуйте что-то типа такого:

var lastTime = (new Date()).getTime();
var process = function(){
  var currTime = (new Date()).getTime();
  var deltaTime = currTime - lastTime;
  lastTime = currTime;

  deltaTime /= 1000.0; // получаем в секундах, с дробной частью. просто для удобства

  var speed = 1000; // 1000 пикселей в секунду

  x += speed * deltaTime;
  y += speed * deltaTime;

  setTimeout(process, 10);
};

Comments

[joger]

и что это даст?

[ertaquo]

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

[joger]

спасибо, попробую

Answer 2

[Алексей]

В Chrome и IE9 нет никаких проблем, а вот в FF — да, скачками… :)

Comments

[joger]

на моём ноуте(3 года) и на хроме движение рывками.

Answer 3

[joger]

дополнительный вопрос: флэш в данном случае лучше справится?

Comments

[asci]

да. у него насчет FPS довольно точно.