Chained Tween

[jhcp]

Changes to allow the chaining of tweens, as well as (un)pausing and stopping tween animations. A TweenEnd event is still triggered at the end of each individual animation. Here's an example:

Example 1:
Crafty.e('2D, DOM, Color, Tween')
.attr({x:0, y:0, w:40, h:40})
.color('blue')
.tween({x: 100}, 50)
.tween({y: 100}, 50)
.tween({x: 20, y:50}, 50)
.tween({x: 300, rotation:720, alpha:0.0}, 50)
.bind('TweenEnd', function(k)
{
console.log('k: '+k);
});

Before this change it was possible to define simultaneous tweens with different time intervals (e.g., simultaneously change X from 0 to 100 and Y from 0 to 100, but the former in 100 frames and the latter in 200 frames (example 2). Now this is not possible as it was, but the same result can be obtained by adjusting the delta of each animation (example 3)

Example 2:
Crafty.e('2D, DOM, Color, Tween')
.attr({x:0, y:0, w:40, h:40})
.color('blue')
.tween({x: 100}, 100)
.tween({y: 100}, 200);

Example 3:
Crafty.e('2D, DOM, Color, Tween')
.attr({x:0, y:0, w:40, h:40})
.color('blue')
.tween({x: 100, y: 50}, 100)
.tween({y: 100}, 100);

[starwed]

Ah, thanks for the PR! Two things, though

• I'd prefer to keep the ability to define multiple tweens at different times. Two different components/systems might each want to tween a property, and your suggested method requires cooperation and foreknowledge. It's better if tweens of separate properties are independent of each other.
• I'm actually in the middle of rewriting the Tween component in an incompatible way. (I'm reworking all the animated components so they can be driven by a time-based clock if desired.)

So once I land the other changes to Tween (soonish) we can go back and revisit this. The changes I have so far actually simplify Tween quite a bit, and should make adding this functionality a bit easier.

[jhcp]

Sounds good, thanks for the quick reply! Could you please let me know
whenever you land those changes? We could add a third argument to define
whether the tween will be chained or simultaneous to the current ones. It
would add a bit of overhead but i think it's ok

João Henrique C. Pimentel
UFPE/Brazil

2013/7/25 starwed notifications@github.com

Ah, thanks for the PR! Two things, though

• I'd prefer to keep the ability to define multiple tweens at
  different times. Two different components might each want to tween a
  property, and your suggested method requires cooperation and foreknowledge.
  It's better if tweens of separate properties are independent of each other.
• I'm actually in the middle of rewriting the Tween component in an
  incompatible way. (I'm reworking all the animated components so they can be
  driven by a time-based clock if desired.)

So once I land the other changes to Tween (soonish) we can go back and
revisit this. The changes I have so far actually simplify Tween quite a bit.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/515#issuecomment-21569418
.

[pushcx]

Independently, I wrote a different approach to this for a game: http://push.cx/2013/ctf-liveblog, it's the big chunk of code midway down. It also allows per-tween callbacks, which my game needed to kick off more animations.

[starwed]

Closing, since it was against an older version of Tween.