수학 & JS : 정현파 애니메이션

Question

그때 다시 증가 값을 얻을 감소 후 증가 후 감소 ... 나는 기본적으로 노력하고 사인

처럼하고 싶은 무한 에 증분 값 양식 0 주어진 직선적으로 증가하는 입력 값을 기준으로 위아래로 공의 애니메이션을 얻으십시오 (이 값은 예를 들어 페이지를 0px에서 TBD +1로 스크롤하여 제공)

나는 사용한다?

감사

Answer 1

음, JavaScript has a sine function는 :

var y = Math.sin(Math.PI); // returns 0 

Math.sin() 라디안 인수를합니다.

진동을 "느리게"하려면 입력 매개 변수를 늘려야합니다. 사인 함수로 전달하는 것을 상수로 나누면됩니다. 예를 들어, x 경우 입력 매개 변수이며, 당신이 애니메이션이 절반 빨리 가고 싶어 이렇게 :

var y = Math.sin(x/2); 

은 또한 사인 부정적인가는 것을 명심; 범위는 [-1,1]입니다. 당신이 음의 값을 피하려는 경우, 당신은 함수의 출력에 1을 추가해야합니다 :

var speed = 0.5; // 2=2x speed, 0.5=half speed, etc. 
var y = (Math.sin(x * speed) + 1)/2; 
// y will range from [0,1] 

이 데모이 jsfiddle을 참조하십시오 http://jsfiddle.net/r8yRN/