在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哪些將告訴你如何箭頭應該指向。