JQuery sine wave animation

Question

I spent a couple of days and I give up.

I am trying to get an object for animation along a sine wave endlessly. It should not end after the first period.

Main problem: The cycle ends at about 1 1/3 pi, not just Pi. This extra movement destroys the animation.

I am stuck here: http://jsfiddle.net/WPnQG/12/ . After each period, it skips about 40 pixels, and then continues on its way. This is a problem that I can’t deal with - the value at which it ends and the restart continues is not equal, so the object seems to skip. Can anyone help a person? Thanks

I use jQuery Path Plugin to execute the animation path - the sine wave in question.

---

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

Answer 1

When I comment on this line:

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

the element stops moving exactly on the line marked It skips here .

It seems that when resetting the movement to // avoid exceeding stack it resets the position of the element to y = 0, while preserving the x value of the element, as well as its path of movement.

This hypothesis is further confirmed by the fact that when a slip occurs (somewhere on the y axis), the element always resumes its movement from y = 0. Sometimes its value of y is> y = 0, while sometimes it is equal to <y = 0 - such Thus, a random search "skips".

Edit

Returning to the original sinus demo , it seems like you can get closer to infinite scrolling by manipulating the line x= ... After some have looked at the original source, it seems that the demo version of the script was written only to solve one specific example and fixed-width problems.

Here is a working example.

By manipulating the numbers in lines 1 and 2, you can specify the number of pixels for the path you want to go to and slow down the path down in line 3 to make it the same speed as the original demo. So, not mathematically endlessly, but it took my computer 45 seconds. By controlling these specific lines, you can make it “endless” 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" ); 

Answer 2

I must admit, I was a little embarrassed about how it was written, but I understand that you got it from the wiki. It just seemed strange to me that the wave of sin went beyond 2 pi before restarting. Typically, the sin curve is between 0 and 2pi for a full cycle. I have updated javascript that takes this into account, and the hiccups are now gone.

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

Note: you can say how many sinful waves you need to complete by changing the constant in s (1 - one complete sinful wave, 2 - two complete sins, etc.). In addition, you no longer need to "pay" attention, a wave.

JSFiddle link: http://jsfiddle.net/P5vqG/8/

Answer 3

Why aren't you using HTML5 canvas? http://falcon80.com/HTMLCanvas/Animation/SineWave.html

Answer 4

You can use PathAnimator to animate something in any way. you only need SVG coordinates describing your path.

Demo page

Answer 5

Here's the solution (shown in this fiddle ) to make a sine wave , simply using jQuery four .animate parameters :

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

Edit

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

to

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

See the updated script