为什么函数沿y轴开始正弦波如此高？

Question

看看这个正弦波动画。注意它的起始位置和结束位置。

这两个必须相同，但它们不是。

我认为解决方案是保留上一次迭代中最后使用的p值并将其应用于当前的p值。

以下图片展示：http://jsfiddle.net/WPnQG/4/

function float(dir){
    var x_current = $("div").offset().left;
    var y_current = $("div").offset().top;
    var SineWave = function() {
        this.css = function(p) {
            var s = Math.sin(Math.abs(p-1)*10);
            if (!dir){// flip the sin wave to continue traversing
               s = -s;
            }
            var x =  300 -p * 300;
            var y = s * 100 + 150;
            //var o = ((s+2)/4+0.1); //opacity change
            // add the current x-position to continue the path, rather than restarting
            return {top: y + "px", left: x_current + x + "px"};
        } 
    };

    $("div").stop().animate({
        path: new SineWave
    }, 5000, 'linear', function(){
        // avoid exceeding stack
        // uncomment for this to continue animating
        //setTimeout(function(){float(!dir)}, 0);
    });

}

float(true);

Answer 1

我找不到有关path属性的任何文档，但p的值从1开始并逐渐过渡到0。