1

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

红箭 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);

希望有人可以帮助我。

4

1 回答 1

0

p = (x_t, y_t)给定在任何给定时间箭头所在的点t，您需要找出曲线在该点处的切线，p这将告诉您箭头应该指向的确切位置。

于 2013-06-02T10:44:15.717 回答