Javascript js以分钟速度进行对角线运动

有许多问题与此类似，但并非如我所知

要沿路径缓慢移动对象。这是我得到的一个例子

var moverateX,moverateY;

function setup (){
var opp=targetY-startY;
var adj=targetX-startX;
var hyp=Math.sqrt ((opp*opp)+(adj*adj));
moverateY=10*(opp/hyp);
moverateX=10*(adj/hyp);}

function okgo (){
obj.style.left=currentX+moverateX+'px';
obj.style.top=currentY+moverateY+'px';
setTimeout (function (){okgo ();},50);}

它可以工作，但动作太快。如果我将比率乘以的数字更改为较小的数字，则对象将错过最终目标。例如：

var moverateY=2*(opp/hyp);
var moverateX=2*(adj/hyp);
//moves slower but misses the end mark by a fair margin

---

有什么想法吗？

您可以通过两种方式改进代码：

使用绝对跟踪而不是相对跟踪

使用绝对时间控件

绝对跟踪 Javascript对所有计算都使用双精度，因此您不会遇到真正的精度问题，但绝对跟踪的公式更精确、更简单：将

（x0，y0）

作为起点，将

（x1，y1）

作为终点，您可以使用以下公式计算两者之间的任何点：

x = x0 + t*(x1 - x0);
y = y0 + t*(y1 - y0);

其中

t

从0.0（开始）到1.0（结束）

绝对时间控制 这就是代码存在严重问题的地方。 在Javascript中（以及在大多数其他情况下），当您设置计时器时，您无法确保函数将被准确地调用。您唯一可以确定的是，调用your函数的次数不会比您请求的次数多，但很常见的情况是，某些调用会在您需要的时间段内“延迟”。 要获得一个随时间变化的受控移动，你需要检查时钟，而不是仅仅假设通话时间是预期的时间：总结

function animate(div, x0, y0, x1, y1, speed) {
    var dx = x1 - x0;
    var dy = y1 - y0;
    var dist = Math.sqrt(dx*dx + dy*dy);
    var total_time = dist / speed;
    var start_time = new Date().getTime();
    var cback = setInterval(function() {
        var now = new Date().getTime();
        if (now >= start_time + total_time) {
            // Animation is complete
            div.style.left = x1 + "px";
            div.style.top = y1 + "px";
            //clearInterval(cback);
        } else {
            // We are still moving
            var t = (now - start_time) / total_time;
            div.style.left = (x0 + t*dx) + "px";
            div.style.top = (y0 + t*dy) + "px";
        }
    }, 10);
}

此外，使用绝对定时简化了例如“缓解”（缓慢启动和停止，加速和减速）：只需在计算

t

行后添加

t = t*t*(3 - 2*t);

在这种情况下，

速度

参数表示以px/ms为单位的平均速度