我为此花了几天时间,然后放弃了。
我试图让一个对象沿着正弦波无限地产生动画。它不应该在第一个周期之后结束。
主要问题:循环在大约 1 1/3 Pi 而不仅仅是 Pi 处结束。这个额外的动作破坏了动画。
我被困在这里:http://jsfiddle.net/WPnQG/12/。在每个周期之后,它会跳过大约 40 个像素,然后继续沿其路径移动。这是我无法解决的问题——它结束的值和继续重新启动的值不相等,因此该对象似乎会跳过。有人可以帮助一个男人吗?谢谢
我正在使用jQuery 路径插件执行动画的路径——有问题的正弦波。
Source:
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
last_x = x;
// 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
setTimeout(function(){float(!dir)}, 0);
});
}
我必须承认我对这是如何编写的有点困惑,但我确实明白你是从维基上得到的。让我感到奇怪的是,正弦波在重新开始之前就超过了 2 pi。通常,完整循环的正弦波范围为 0 到 2pi。考虑到这一点,我更新了一些 JavaScript,现在问题已经消失了。
function float(dir){
var x_current = $("div").offset().left;
var y_current = $("div").offset().top;
var SineWave = function() {
this.css = function(p) {
var pi2 = (3.1415927 * 2);
var a = p * pi2;
var s = Math.sin((pi2 - a)*2);
var x = 300 * (1 - p);
var y = s * 100 + 150;
//var o = ((s+2)/4+0.1); //opacity change
last_x = x;
// 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
setTimeout(function(){float(!dir)}, 0);
});
}
float(true);
注意:您可以通过更改 s 中的常数来告诉它要完成多少个正弦波(1 是一个完整的正弦波,2 是两个完整的正弦波等)此外,不再需要“反转”波。
JSFiddle 链接:http://jsfiddle.net/P5vqG/8/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)