Math& JS:正弦动画

时间:2013-07-05 16:27:07

标签: javascript html html5 math sine

给定增量值从0到无穷大 我想找回一个增加,然后减少,然后增加,然后减少的值...就像一个正弦

我基本上试图根据仅仅线性增加的输入值来获得一个上下移动的球的动画(该值通过滚动页面例如从0px到TBD + 1来给出)< / p>

我应该使用什么数学函数?

感谢

1 个答案:

答案 0 :(得分: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/