我试图按照正弦波的角度设置图像的动画效果 - 使用jQuery.path插件创建正弦波。
问题在于顺利轮换。
我目前正在使用jQuery旋转插件进行旋转,这正如目前所示 - 不能创建平滑的旋转。
有关JavaScript和jQuery的信息,请参阅http://hellosmithers.com/GNU/STALLMANQUEST.html。
脚本评论相对较多。
目前轮换只是重复并需要一定的时间才能完成 - 这意味着它不适用于所有屏幕尺寸,因为正弦波需要更长时间才能完成更宽的屏幕。
function mRot() { // image rotation - it goes from rA[0] (-8 degrees) to rA[1] (8 degrees) then swaps the values
// flip the values in rA - making the rotation oposite each iteration of this funciton
rA[1] = [rA[0], rA[0] = rA[1]][0];
$("#rmat").rotate({
duration: 1700,
angle: rA[0],
animateTo: rA[1],
callback: mRot
}); // I would like to remove this function - instead tying the rotation into the sine wave function somehow
}
正弦波创建如下:
SineWave = function() { // create the sine wave - as per https://github.com/weepy/jquery.path
this.css = function(p) {
s = Math.sin(p * 12);
x = winWidth - p * (winWidth + 250);
y = s * 40 + (winHeight - 440);
return {top: y + "px", left: x + "px"};
}
}
由于
答案 0 :(得分:3)
我想通了 - 角度来自 p ,我用过( p * 12 ) -
SineWave = function() {
this.css = function(p) {
rA[0] = p * 12; // get the angle
s = Math.sin(p * 12);
x = winWidth - p * (winWidth + 250);
y = s * 40 + (winHeight - 440);
return {top: y + "px", left: x + "px"};
}
}
函数mRot使用rA -
function mRot() {
rA[0] = prA[1]; // rA[0] will always be the previous rA[1]
if (prA[1] < 0) rA[1] = Math.abs(rA[1]); // if the previous rA[1] is a negative number, make the current rA positive.
else rA[1] = -(rA[1]); // otherwise make it negative
prA = rA;
$("#rmat").rotate({
duration: 1500,
angle: rA[0],
animateTo: rA[1],
callback: mRot
});
}
确保声明数组变量 -
rA = new Array (-8, 8);
prA = rA[1] = [rA[0], rA[0] = rA[1]][0];
如果您想查看完整代码,请访问http://hellosmithers.com/GNU/STALLMANQUEST.html