craftyjs/Crafty — pull request #515 by jhcp (2013-07-25 16:32:43+00:00)
Title: Chained Tween

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