在javascript中计算弧形路径

Question

我无法弄清楚如何模拟这个。红色箭头处于静止位置。背景，有一个弯曲的路径。我只是移动背景位置，看起来箭头正在沿着弯曲的路径移动。

Red Arrow http://img829.imageshack.us/img829/6636/redarrowe.png

我现在所拥有的是箭头沿着45度角的目标前进。但我试图实现的是沿着这条虚线路径前进的箭头。

var interval = 100; 

var currX = -82; // Current x position 
var currY = -342; // Current y position 

var destX = -750; // Destination x position 
var destY = -850; // Destination y position 

var currentDuration = 0; 
var duration = 1800 * 1000; // Duration 

var $bg = $('#flight-wrapper'); 

var intbg = window.setInterval(function(){ 
    currentDuration += interval; 

    var leftX = destX - currX; // X pixels left 
    var leftY = destY - currY; // Y pixels left 

    var leftDuration = duration - currentDuration; // Duration left 

    var tickX = leftX/leftDuration * interval; // Pixel to offset 
    var tickY = leftY/leftDuration * interval; // Pixel to offset 

    var newX = currX + tickX; 
    var newY = currY + tickY; 

    // Prevent it going further than the destination X & Y pixel 
    currX = newX <= destX ? destX : newX; 
    currY = newY <= destY ? destY : newY; 

    if (currX <= destX && currY <= destY) { 
     window.clearTimeout(intbg); 
    } 

    $bg.css({ 
     backgroundPosition: Math.floor(currX) + 'px ' + Math.floor(currY) + 'px' 
    }); 
}, interval); 

希望有人能帮助我。

Answer 1

鉴于点p = (x_t, y_t)这是箭头在任何给定时间t，您需要找出哪些tangent to your curve at the point p numerically哪些将告诉你如何箭头应该指向。