Асинхронное движение изображений в js (canvas)

#javascript #анимация #canvas

Предположим имеется 1 изображение машины. Необходимо создать два объекта Image с
этой машиной и двигать эти два изображения асинхронно. Привожу код, работает он явно
не так как нужно, по задумке - вторая машина должна изначально отставать от первой
и обе должны двигать влево с какой-то скоростью. В итоге получается слияние двух машин,
будто это не два разных объекта, а один.

Наработки: https://jsfiddle.net/o236kta5/2/









    
    






    

Ответы

Ответ 1

Залог плавной анимации - функция положения объектов от времени между кадрами

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



let t = 0
let c = canvas.getContext('2d');
let cars = Array(7).fill(0).map((e,i) => ({
  x: 560, y: i*20,
  v: 0.2 + Math.random()/3
}));
 
function draw(dt) { // dt время с начала анимации
   c.clearRect(0, 0, canvas.width, canvas.height);
   cars.forEach(car => {
      car.x -= (dt-t)*car.v;
      car.x = car.x < 0 ? 600 : car.x;
      c.drawImage(img, car.x , car.y, img.width, img.height);
   });
   t = dt;
   requestAnimationFrame(draw);
}