Add support for additive animations

[albell]

Let's say I have an object wiggling from left to right and back in a continuous infinite loop:

myObject.animate({  
    translate : [10,0,0],  // to the right
    duration: 500
}).animate({  
    translate : [-10,0,0],  // back to origin
    duration: 500
}).infinite();

and then later, responding to some event, I want to move the whole object a defined distance to the right, without the left-right wiggle ever stopping:

myButton.onclick = function() {
  myObject.animate({  
      translate : [100,0,0],  // to the right
      duration: 2000
  });
};

This doesn't work right now:

http://jsfiddle.net/N2v6H/

Instead, the ball goes careening off the screen. Re-expressing the wiggle in parallel at the time of the second call doesn't fix things, either:

ball.stop().animate([{  
   translate : [100,0,0],  // to the right
   duration: 1000
},{ 
    translate : [10,0,0],  // to the right
    duration: 250
},{  
    translate : [-10,0,0],  // back to origin
    duration: 250
}]);

http://jsfiddle.net/N2v6H/1/
(This is also throwing an error because the stop method isn't chainable as it stands, another issue.)

I think it's pretty clear that the existing behavior isn't useful in any real world context. My sense is that the cleanest solution might be to add an argument to the animate function, specifying whether it adds to existing animations or overwrites them.

[lvivski]

See http://jsfiddle.net/lvivski/N2v6H/5/

[albell]

Nice! Chaining fixes are excellent but ... this still doesn't completely solve this use case. I want to move the ball to the right based on an event, without the wiggle ever stopping. Very hard to do!

This obviously doesn't work:
http://jsfiddle.net/N2v6H/6/

Of course I can hardcode it, breaking down each increment of the wiggle into four sequential steps and adding up the translate values in advance:

http://jsfiddle.net/N2v6H/9/

This works, but it is really tedious, inflexible and error-prone, even for a very simply animation like this one. For example, what if I don't know whether the wiggle animation is running at the time that the click event happens? There would need to be some math here getting the exact properties at the time of the animate call, and re-expressing the animation as a new sequence of animations. This is always the place where smaller js anim libraries seem to break down.

[lvivski]

Oh, I see. You want to continue wiggling while moving

[lvivski]

Things will become to complex, if I add infinite sequential animations as an element for parallel animations. So for you particular case either use some container, translate it on click and animate ball infinitely inside it; or use loops co create animations as in http://jsfiddle.net/N2v6H/9/