这个javascript动画不应该产生正弦波运动吗？

Question

我正在做一个小的JavaScript动画,希望小小的div可以沿着正弦波移动,并且目前水平路径工作正常(只是直线).我几乎可以肯定我的Y轴的数学公式是错误的.我试图用我发现的一些例子来纠正它,但它们都没有为我工作.在我尝试的所有可能性中,Y轴被忽略,小盒子只是水平移动.

我怎么能解决这个问题,所以这个动作沿着正弦波传播？我知道使用jQuery或使用html 5可以更容易地做到这一点,但我只是想知道我的原始代码有什么问题...如果可能的话我宁愿解决这个问题.

function animate() {
    xnow = item.style.left;
    item.style.left = parseInt(xnow)+1+'px';
    ynow = item.style.top;
    item.style.top = ynow + (Math.sin((2*Math.PI*xnow)/document.width))*document.heigth;
    setTimeout(animate,20); 
}

这里的完整代码: JSFiddle

Answer 1

我看到你的代码有几个问题:

• xnow包含此格式的字符串:###px您不能将其相乘,因此请parseInt()在Math.sin()通话中使用.
• 你的代码需要抓取ynow同样的东西parseInt().
• 更好的是使用其他(全局)变量将x和y坐标存储为数字.并px在更新div元素的坐标时添加.
• 当你乘2*Math.PI用xnow(仅包含整数),该sin()函数总是返回0.所以你不会得到正弦运动.您需要除以xnow要用于执行完整正弦运动的x步的数量
• Math.sin() 返回介于-1和+1之间的值,因此您需要将其乘以振幅以查看(更清晰)效果.

为了保持它与你设计的一样多,它将变成这样的东西(需要50个x移动步骤才能完成正弦并使用10像素的振幅):

function animate() {
    xnow = parseInt(item.style.left);
    item.style.left = (xnow+1)+'px';
    ynow = parseInt(item.style.top);
    item.style.top = (ynow+Math.sin(2*Math.PI*(xnow/50))*10) + "px";
    setTimeout(animate,20);
}

如前所述:它是更好的使用包含值一些全局变量(而不是使用parseInt()所有的时间)

请参阅我更新的JSFiddle示例.

Answer 2

sin函数的形式为y = a*sin(b*x)+ c,其中c是函数的y-中点(或函数振荡的水平线),其中a是幅度(最大值)从y = c)y偏移,并且b是周期(每个波的x = 2*pi段的数量).

鉴于此,并且我们知道sin波从-a到+ a振荡,我们知道我们的偏移(c)应该1)是常数并且2)在我们的上限和下限之间的中间.为此,我们可以使用

c = document.height / 2;

如果您希望对象遍历整个屏幕,您的幅度将与c的值相同.在测试中,你会发现这会让它超越页面的底部,所以让它只是90%.

a = 0.9 * c;

对于整个页面,如果期间为1,则需要将x乘以x,使其成为2*pi的分数.在这种情况下

b = 2*Math.PI/document.width;

在每次迭代中,都不需要获取值ynow,它是函数xnow.你可以做一些事情

xnow = parseInt(item.top.left) + 5;

然后计算新的y

ynow = c + a * Math.sin(b * xnow);.

然后设置项目的样式.

item.style.left = xnow + 'px';

item.style.top = ynow + 'px';

如果有什么不清楚,请告诉我.问候.