jQuery沿正弦波设置动画

我花了几天的时间在这上面，我放弃了

我试图让一个物体沿着正弦波无限地运动。它不应该在第一个时段之后结束

主要问题：循环结束于大约1 1/3π，而不仅仅是π。这个额外的移动会破坏动画

我被困在这里：。在每个周期之后，它跳过大约40个像素，然后沿着其路径继续。这是一个我无法克服的问题——它结束于的值和继续重新启动于的值不相等，因此对象似乎在跳过。有人能帮一个人吗？谢谢

我正在使用来执行动画的路径——所讨论的正弦波

---

资料来源：

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

}

---

为什么不使用HTML5画布

当我注释掉这一行时：

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

元素在标记为

的行上精确停止运动，它在此处跳过

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

这一假设进一步得到验证，即一旦发生跳跃（y轴上的任何位置），元素总是从y=0开始恢复运动。有时它的y值大于y=0，而有时它小于y=0——因此看起来是随机的“四处跳跃”

编辑
回到，通过操纵
x=…
行，您似乎可以获得近乎无限的滚动。在查看了原始源代码之后，似乎编写演示脚本只是为了适应一个特定示例和固定宽度问题


通过操纵第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"
  );

改变

到

请看一篇
我必须承认，我对这篇文章是怎么写的有点困惑，但我知道你是从维基上得到的。我觉得奇怪的是，在重新启动之前，正弦波超过了2π。对于一个完整的环路，典型的正弦波是从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是两个完整的正弦波，等等）来告诉它要完成多少个正弦波。而且，不再需要“反转”该波

jsiddle链接：
您可以使用它来设置沿任何路径的任何内容的动画。您只需要描述路径的SVG坐标

下面是（在本文中演示的）使用Jquery制作正弦波的方法：

由于项目特定的原因，无法使用它。它不会继续到下一段（需要不断向前移动）。随着时间的推移，它所做的只是将X的距离增加了一倍，但仍然存在相同的错误。您的小提琴会在大约1 1/3秒后重置X值。有意？完全无意。这是我相信的错误，好吧，我需要它来恢复它停止的地方。一直在尝试各种方法，但都无法克服这个障碍，迈克！好极了，这太完美了。是的，你是对的，我只允许穿越一个周期。在您的修复中，什么允许多个时段？（按周期，我指的是一个正弦波的三角周期）是第1行还是第2行允许它循环不止一次？或者两者都有？我以为第一行改变了振幅，第二行改变了周期的宽度，显然我错了+1你就是那个为这件事而死的人。我可以问你为什么叫
float（true，false）
即使
float（dir）
只需要一个参数？只是想了解JSI测试了一些东西，但忘了去掉这个错误，因为我删除了这个论点，除了可能在IENice工作中抛出一个错误之外，我什么都不会做。是的，这不是很奇怪，它会一直持续到它的终点吗？我使用了迈克的解决方案，但我一定会把它放在手边，以防我改变周围的情况。谢谢你的投入，这确实教会了我一两件事。荣誉+1:）不过，我非常感谢您的回复，我现在可以很容易地看出它以前不起作用的原因。谢谢。
  return {top: y + "px", left: last_x + x + "px"};

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

    $("div").animate({ left: [ '+=8%', 'linear' ],  
                       top:  [ '+=5%' , 'swing'  ]  }, 1000, null, function() {
        $(this).animate({ left: [ '+=8%', 'linear' ],  
                          top:  [ '-=5%' , 'swing'  ]  }, 1000, null, function() {
            $(this).animate({ left: [ '+=8%', 'linear' ],  
                                  top:  [ '+=5%' , 'swing'  ]  }, 1000, null, function() {
                $(this).animate({ left: [ '+=8%', 'linear' ],  
                                      top:  [ '-=5%' , 'swing'  ]  }, 1000, null, function() {

                        //(etc.)
                })                                                                                  

            })
        })
    })