helfen Sie mir, meine grundlegende Punkt zu Punkt Bewegung Animationsalgorithmus

Question

Grüße, Mit Javascript, ich versuche, eine sehr einfache Animation zu machen, bewegt sich ein Bild von einer X- und Y-Koordination zu einer anderen XY-Koordination. Ich habe 4 konstant wie:

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

Dies macht der Job, aber es ist nicht glatt, werde ich Ihnen dankbar, wenn Sie mir helfen, meinen naiven Algorithmus für eine bessere Bewegung Funktion zu verbessern, das immer für wird die " kürzester Weg".

Answer 1

Klingt wie Sie brauchen (eine Variation von) Bresenham line drawing Algorithmus.

Answer 2

Die kürzeste Entfernung zwischen zwei Punkten ist eine gerade Linie. Also solltest du das wohl mitmachen.

Das würde bedeuten, dass Sie in Ihrem Code nicht denselben Schrittbetrag für X- und Y-Koordinaten verwenden sollten. Berechnen Sie stattdessen den Y-Schritt basierend auf X-Schritt und der Steigung der kürzesten Pfadlinie.

Zweitens, in Ihrem aktuellen Algorithmus, sobald Ihr Bild den Zielpunkt erreicht, wird es weiter darüber oszillieren. Ich denke, Sie sollten die Aussagen, die einen negativen Schritt machen, loswerden.

Answer 3

Da Sie immer zwei Koordinaten zusammen verschieben, müssen Sie nur gegen eine von ihnen überprüfen, z.

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

Answer 4

Versuchen so etwas wie dieses, das Objekt in einer geraden Linie zu bewegen:

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

Inside the move() Funktion:

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

Guss CurrentX/CurrentY auf ganzzahlige vor der Anwendung auf das Objekt, das Sie verschieben möchten.

Answer 5

Dies ist meine Implementierung, vielen Dank an Frederik The Fool

Compute Steigung:

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

Yschritt:

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