沿正弦波jQuery的动画 [英] jQuery animating along a sine wave

问题描述

我在这呆了几天，我放弃了。

我试图让一个物体沿正弦波无限动画。它不应该在第一阶段结束后，

主要问题：周期结束于大约1 1/3皮，而不是仅仅皮。这种额外的运动遗址动画。

我被困在这里： http://jsfiddle.net/WPnQG/12/ 。每个周期后，它跳过约40个像素，然后沿其路径继续。这是问题，我不能让过去 - 它的结束，进行重新启动在不相等的值，因此对象出现跳过左右。任何人都可以帮助一个人了呢？谢谢

我使用的是的jQuery插件路径来执行动画的路径 - 正弦波有问题。

---

来源：

 函数浮动（DIR）{
    VAR x_current = $（格）的偏移量（）左侧。;
    VAR y_current = $（格）的偏移量（）顶部。;
    VAR正弦波=功能（）{
        this.css =功能（P）{
            变种S = Math.sin（Math.abs（P-1）* 10）;
            如果（！DIR）{//翻转正弦波继续穿越
               S = -s;
            }
            VAR X = 300 -p * 300;
            变种Y = S * 100 + 150;
            //变种O =（（S + 2）/4+0.1）; //不透明度的变化
            last_x = X;
            //添加当前x位置继续路径，而不是重新启动
            返回顶部{：Y +PX，左：x_current + X +PX};
        }
    };    $（格）。停止（）。动画（{
        路径：新的正弦波
    }，5000，线性，函数（）{
        //避免超出堆栈
        的setTimeout（函数（）{浮点（DIR）！}，0）;
    }）;}
 

解决方案

当我注释掉这一行：

 的setTimeout（函数（）{浮点（DIR）！}，0）;
 

元素停在标线运动precisely 它会跳过此处。

看来，当你重置运动 //避免超出堆栈它的重置的元素向Y = 0的位置，而 preserving 的元素的x值以及其运动的路径。

此假设在于进一步验证当过一个跳跃发生时（在y轴上的任意位置）的元件总是从y = 0的恢复其运动。有时它的y值是> Y = 0，而有时为＆lt; Y = 0 - 因此随机寻找跳过围绕

修改

回过头来看看这个源正弦演示，看来你可以得到的附近的无限滚动，通过操纵 X = ... 行。一些看着原来的源之后，似乎演示剧本只写了以适应一个具体例子的和的固定宽度的问题。

这里是一个工作的例子。

通过对第1行和第2操纵号码可指定为路径遍历的像素数，和慢路径向下第3行，使之以相同的速度与原始的演示。的所以的，不是数学无限的，但它采取了一个很好的45秒完成我的电脑上。通过操纵这些特定的行你可以把它作为无限为你所需要的。

  window.SineWave =正弦波=功能（）{
    this.css =功能（P）{
        S = Math.sin（（P-1）* 500）; // 1
        X =（5000  -  P * 5000）* 10; // 2
        Y = S * 100 + 150;
        返回顶部{：Y +PX，左：X +PX};
    }
}  $（＃喵）。停止（）。动画（
        {路径：新的正弦波}，
        50000，// 3
        线性
  ）;
 

I've spent a couple days at this and I give up.

I'm trying to get an object to animate along a sine wave infinitely. It should not end after the first period.

Main Problem: The cycle ends at approx 1 1/3 Pi rather than just Pi. This extra movement ruins the animation.

I'm stuck here: http://jsfiddle.net/WPnQG/12/. After each period, it skips about 40 pixels and then continues along its path. This is the problem I can't get past -- the value it ends at and proceeds to restart at are not equal, so the object appears to skip around. Could anyone help a man out? Thanks

I am using the jQuery Path Plugin to perform the path of the animation -- the sine wave in question.

---

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

}

解决方案

When I comment out this line:

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

the element stops motion precisely on the line marked It skips here.

It appears that when you reset the motion to // avoid exceeding stack it resets the position of the element to to y=0, while preserving the x value of the element as well as its path of motion.

This hypothesis is further validated in that when ever a skip occurs (anywhere on the y axis) the element always resumes its motion from y=0. Sometimes its y value is > y = 0 while sometimes it is < y = 0 -- thus the random looking "skipping around."

Edit

Going back to the source sine demo, it seems you can get near infinite scrolling, by manipulating the x= ... line. After some looking at the original source, it appears that the demo script was only written to accommodate that one specific example and fixed width problems.

Here is a working example.

By manipulating the numbers on line 1 and 2 you can specify the number of pixels for the path to traverse, and the slow the path down on line 3 to make it the same speed as the original demo. So, not mathematically infinite, but it took a good 45 seconds to complete on my computer. By manipulating these specific lines you can make it as "infinite" as you need.

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

这篇关于沿正弦波jQuery的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！