aidez-moi à améliorer mon algorithme de base d'animation de point à point

Question

Salutations, Avec javascript, j'essaie de faire une animation très facile, une image passe d'une coordination X et Y à une autre coordination X Y. J'ai 4 constante tels que:

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

Cela fait le travail, mais il est pas lisse, je serai reconnaissant si vous me aider à améliorer mon algorithme naïf pour une meilleure fonction de déplacement qui va toujours pour le " le plus court chemin".

Answer 1

Semble comme vous avez besoin (une variation de) l'algorithme Bresenham line drawing.

Answer 2

La distance la plus courte entre deux points est une ligne droite. Donc vous devriez probablement aller de l'avant avec ça. Ce qui impliquerait que dans votre code, vous ne devriez pas utiliser la même quantité de pas pour les coordonnées X et Y. Calculez plutôt l'étape Y en fonction de l'étape X et de la pente de la ligne de chemin la plus courte.

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

En second lieu, dans votre algorithme actuel, une fois votre image atteint le point de destination, il va continuer à osciller à ce sujet. Je pense que vous devriez vous débarrasser des déclarations qui prennent un pas négatif.

Answer 3

Comme vous déplacez toujours deux coordonnées ensemble, il vous suffit de vérifier l'une d'entre elles, par ex.

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

Answer 4

Essayez quelque chose comme ça pour déplacer l'objet en ligne droite:

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

Dans la fonction move():

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

Cast currentX/currentY en nombre entier avant d'appliquer l'objet que vous voulez déplacer.

Answer 5

Ceci est ma mise en œuvre, un grand merci à Frederik Le Fou

pente Compute:

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