왜 함수가 sin 파형을 y 축을 따라 높게 시작하나요?

이 사인파 애니메이션을 살펴보십시오. 시작 위치와 끝 위치입니다.왜 함수가 sin 파형을 y 축을 따라 높게 시작하나요?

이 2 개는 동일해야하지만 그렇지 않습니다.

솔루션은 이전 반복에서 마지막으로 사용한 p 값을 유지하고 현재 반복에 적용하는 것이 해결책이라고 생각합니다. 나는 path 속성에 대한 모든 문서를 찾을 수 없습니다 http://jsfiddle.net/WPnQG/4/ enter image description here

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

출처

2011-10-18 Atticus

또한 애니메이션의 특정 지점에서 불안감을 느낍니다. –

하지만 p의 값은 1에서 시작하여 점차 0

로 전환된다

아래 이미지의 데모

출처

2011-10-18 01:32:24 recursive

'var s = Math.sin ((p-1) * 10);을 사용하여 트릭을 수행합니다. –

'p = p-1'을 설정해야합니까? – Atticus

@muistooshort 두 번째 트래버스를 확인하십시오. 여전히 http://jsfiddle.net/WPnQG/1/ 어떤 아이디어를 뛰어 넘고 있습니까? – Atticus

왜 함수가 sin 파형을 y 축을 따라 높게 시작하나요?

답변

관련 문제