Question

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

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

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

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

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

enter image description here

来源：

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

我必须承认我对这是怎么写的有点困惑但是我明白你是从wiki那里得到的。令我感到奇怪的是，在重新启动之前，sin波超过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 2

当我注释掉这一行时：

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

元素在标记为It skips here的行上精确停止运动。

当您将动作重置为// avoid exceeding stack时，将重置元素的位置重置为y = 0，而保留的x值为元素及其运动路径。

该假设进一步得到验证，因为当发生跳跃时（y轴上的任何位置），元素总是从y = 0恢复其运动。有时它的y值> y = 0，而有时它是＆lt; 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" );

Answer 3

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

Answer 4

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

Demo Page

Answer 5

这里a solution（在此fiddle中演示）仅仅通过使用Jquery four .animate parameters来制作正弦波：< / p>

    $("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 6

更改

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

到

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

查看updated fiddle

jQuery沿着正弦波动画

6 个答案:

修改