jQuery沿着正弦波动画

2023年2月25日 162次阅读

我已经花了几天时间而且我放弃了.

我试图让一个物体无限地沿着正弦波动画.它不应该在第一个时期结束.

主要问题：循环以大约1 1/3 Pi而不是Pi结束.这个额外的动作破坏了动画.

我被困在这里：http://jsfiddle.net/WPnQG/12/.在每个时期之后,它跳过大约40个像素,然后沿着它的路径继续.这是我无法通过的问题 – 它结束的值并继续重新启动时不相等,因此对象似乎跳过了.任何人都可以帮助一个人吗？谢谢

我正在使用jQuery Path Plugin来执行动画的路径 – 正在讨论的正弦波.

资源：

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);
    });

}

最佳答案 当我注释掉这一行时：

setTimeout(function(){float(!dir)}, 0);

该元素在标记为“跳过”的行上精确地停止运动.

看起来,当您将运动重置为//避免超出堆栈时,它会将元素的位置重置为y = 0,同时保留元素的x值及其运动路径.

该假设进一步得到验证,因为当发生跳跃时(y轴上的任何地方),该元素总是从y = 0恢复其运动.有时它的y值> y = 0,而有时它是< y = 0 – 因此随机看“跳过”. 编辑 回到source sine demo,似乎你可以通过操纵x = …线来接近无限滚动.在查看原始源代码之后,似乎只编写了演示脚本以适应一个特定示例和固定宽度问题.

Here is a working example.

通过操纵第1行和第2行的数字,您可以指定要遍历的路径的像素数,并使第3行的路径减慢,使其与原始演示的速度相同.因此,在数学上无限,但在我的计算机上完成需要45秒.通过操纵这些特定的线条,您可以根据需要将其设置为“无限”.

window.SineWave = SineWave = function() {
    this.css = function(p) {
        s = Math.sin((p-1)*500);  // 1
        x = (5000 - p*5000) * 10; // 2
        y = s * 100 + 150;
        return {top: y + "px", left: x + "px"};
    } 
}

  $("#nyan").stop().animate(
        {path: new SineWave}, 
        50000, // 3
        "linear"
  );
点赞