関数がsin波をy軸に沿ってそんなに高くするのはなぜですか？

Question

この正弦波のアニメーションを見てください。開始位置と終了位置に注目してください。

これらの2つは同等である必要がありますが、そうではありません。

解決策は、前回の反復で最後に使用された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

Iはpathプロパティについてのドキュメントを見つけることができないが、pの値は1から始まり徐々に0

に移行されます