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

听起来你需要（变体）Bresenham line drawing算法。

Answer 2

两点之间的最短距离是一条直线。所以你应该继续这样做。

这意味着在您的代码中，您不应对X和Y坐标使用相同的步长量。而是根据X步和最短路径线的斜率计算Y步。

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

其次，在您当前的算法中，一旦您的图像到达目标点，它将继续围绕它振荡。我认为你应该摆脱那些采取消极措施的言论。

Answer 3

由于您总是将两个坐标移动到一起，因此您只需要检查其中一个坐标，例如

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

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

这是我的实施，非常感谢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));
}

帮助我改进我的基本点对点移动动画算法

5 个答案: