помогите мне улучшить базовый алгоритм анимации движения «точка-точка»

Question

Привет, С помощью javascript я пытаюсь сделать очень простую анимацию, изображение перемещается из одной координации X и Y в другую координацию X Y. У меня есть 4 константы, такие как:

var startX = 0; //starting X of an image
var startY = 0; //starting Y of an image
var endX = 100; //ending X of an image
var endY = 200; //ending Y of an image

//these 2 are used for keeping the "current" position of animated image, 
var currentX = startX ;
var currentY = startY ;

//every 150 ms, updates the location of the coordinates
function move(){

if( (currentX == endX) && (currentY == endY) )
break;

if(currentX  < endX){
currentX  = currentX  + step_amount;
}

if(currentX  > endX){
currentX  = currentX  - step_amount;
}

if(currentY < endY){
currentY = currentY + step_amount;
}

if(currentY > endY){
currentY = currentY - step_amount;
}
setInterval("move()", 150);
}

Это делает работу, однако это не гладко, я буду благодарен, если вы поможете мне улучшить мой наивный алгоритм для лучшей функции перемещения, которая всегда идет по «кратчайшему пути».

Answer 1

Звучит так, как вам нужно (вариация) Алгоритм рисования линий Брезенхама .

Answer 2

Кратчайшее расстояние между двумя точками - это прямая линия. Так что, вероятно, вам следует двигаться по этому пути.

Это означает, что в вашем коде не следует использовать одну и ту же величину шага для координат X и Y. Вместо этого вычислите шаг Y на основе шага X и наклона линии кратчайшего пути.

slope = (startY - endY) / (startX - endX);
Y_step = X_step * slope;

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

Answer 3

Это моя реализация, большое спасибо Frederik The Fool

Вычислить наклон:

if(this.x === target.x){
    this.slope = 1;
}else{
    this.slope = (this.y - target.y)/(this.x - target.x);
}

Ystep:

if(this.y > this.target.y){ 
    this.y = Math.max(this.target.y, this.y - Math.abs(this.slope * distance));
}else if(this.shape.y < this.target.y){
    this.y = Math.min(this.target.y, this.y + Math.abs(this.slope * distance));
}

Answer 4

Попробуйте что-то вроде этого, чтобы переместить объект по прямой линии:

var numberOfSteps = 100;
var stepDX = (endX - startX) / numberOfSteps;
var stepDY = (endY - startY) / numberOfSteps;
var step = 0;

Внутри функции move ():

if (step <= numberOfSteps) {
    currentX = startX + stepDX * step;
    currentY = startY + stepDY * step;
    step++;
}

Приведите currentX / currentY к целому числу перед применением к объекту, который вы хотите переместить.

Answer 5

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

if (currentX < endX) {
    currentX += xStep;
    currentY += yStep;
}