jQuery 沿正弦波制作动画

Question

我为此花了几天时间，然后放弃了。

我试图让一个对象沿着正弦波无限地产生动画。它不应该在第一个周期之后结束。

主要问题：循环在大约 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);
    });

}

Answer 1

您可以使用 PathAnimator 为任何路径上的任何内容设置动画。您只需要描述您的路径的 SVG 坐标。

演示页面

Answer 2

这是解决方案（在此fiddle) 只需使用 Jquery 的 四个 .animate 参数：

    $("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.)
                })                                                                                  

            })
        })
    })

Answer 3

更改

 return {top: y + "px", left: current_x + x + "px"}; 

为

  return {top: y + "px", left: last_x + x + "px"};

查看更新的小提琴

Answer 4

我必须承认我对这是如何编写的有点困惑，但我确实明白你是从维基上得到的。让我感到奇怪的是，正弦波在重新开始之前就超过了 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/

Answer 5

当我注释掉这一行时：

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

Answer 6

为什么不使用 HTML5 Canvas？ http://falcon80.com/HTMLCanvas/Animation/SineWave.html