帮助我提高我的基本的点对点移动的动画算法 [英] help me improve my basic point to point move animation algorithm

问题描述

问候， 使用JavaScript，我想提出一个非常简单的动画，从一个X和Y协调的图像移动到另一个XY协调。 我有4个常数，例如：

Greetings, With javascript, I am trying to make a very easy animation, an image moves from one X and Y coordination to another X Y coordination. I have 4 constant such as:

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);
}

该做的工作，但它并不顺利，我会很感激，如果你能帮助我提高我的天真算法更好的移动功能，就是始终要为最短路径。

This does the job, however it is not smooth, I will be grateful if you help me improve my naive algorithm for a better move function that is always going for the "shortest path".

推荐答案

听起来像是你需要（的变化）的的布氏画线的算法。

Sounds like you need (a variation of) the Bresenham line drawing algorithm.

这篇关于帮助我提高我的基本的点对点移动的动画算法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！