Необходимо переместить объект на некоторые координаты с некоторой скоростью

Question

Есть набор координат (х, у). Необходимо передвинуть объект с другими координатами к ним, при этом у объекта есть скорость, с которой он двигается, так что просто поменять его координаты сразу не выйдет. Есть ли алгоритм для реализации этого?

Answer 1

Если скорость определяется условным числом...

Гипотенуза = sqrt( pow(start.x - end.x, 2) + pow(start.y - end.y, 2) );
sin = (end.y - start.y) / hypot;
cos = (end.x - start.x) / hypot;

В цикле анимации:
  coor.x += speed * cos;
  coor.y += speed * sin;

Пример реализации на JS:

let speed = 4;

let coor = { x: 0, y: 0, };
let end = { x: 400, y: 100, };

let hypot = Math.hypot(coor.x - end.x, coor.y - end.y);
let sin = (end.y - coor.y) / hypot;
let cos = (end.x - coor.x) / hypot;

requestAnimationFrame(function loop() {
  coor.x += ( speed * cos );
  coor.y += ( speed * sin );
  
  if( coor.x >= end.x ) {
    // Нужно учитывать, что изначально координата может быть больше, чем конечная.
    // Улучшить условие в зависимости от возможностей языка.
    
    box.style.left = end.x + "px";
    box.style.top = end.y + "px";
    return;
  }  
  
  box.style.left = coor.x + "px";
  box.style.top = coor.y + "px";
  
  requestAnimationFrame(loop);
});

#box {
  position: absolute;
  width: 30px;
  height: 30px;
  background: orange;
}

<div id="box"></div>

БЛОГ НА HUSL

Необходимо переместить объект на некоторые координаты с некоторой скоростью

Ответы (1 шт):