multiple transitions on the same node are now supported

src/Animation.js

@@ -64,9 +64,7 @@
     Kinetic.Animation.animIdCounter = 0;
     Kinetic.Animation.animRunning = false;
 
-    Kinetic.Animation.fixedRequestAnimFrame = function(callback) {
-        window.setTimeout(callback, 1000 / 60);
-    };
+
 
     Kinetic.Animation._addAnimation = function(anim) {
         this.animations.push(anim);
@@ -131,11 +129,20 @@
         }
     };
     RAF = (function() {
-        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || Kinetic.Animation.fixedRequestAnimFrame;
+        return window.requestAnimationFrame 
+            || window.webkitRequestAnimationFrame 
+            || window.mozRequestAnimationFrame 
+            || window.oRequestAnimationFrame 
+            || window.msRequestAnimationFrame 
+            || Kinetic.Animation.fixedRequestAnimFrame;
     })();
 
+    function FRAF(callback) {
+        window.setTimeout(callback, 1000 / 60);
+    }
+
     Kinetic.Animation.requestAnimFrame = function(callback) {
-        var raf = Kinetic.DD && Kinetic.DD.isDragging ? this.fixedRequestAnimFrame : RAF;
+        var raf = Kinetic.DD && Kinetic.DD.isDragging ? FRAF : RAF;
         raf(callback);
     };
     

src/Node.js

@@ -155,11 +155,8 @@
             go._removeId(this.getId());
             go._removeName(this.getName(), this._id);
 
-            // stop transition
-            if(this.trans) {
-                this.trans.stop();
-            }
-
+            // TODO: stop transitions
+ 
             this.remove();
         },
         /**

src/Transition.js

@@ -11,7 +11,7 @@
      *  to stop, resume, or restart the transition
      * @constructor
      */
-    Kinetic.Transition = function(node, config) {
+    Kinetic.Transition = function(node, config, anim) {
         var that = this,
             easing = config.easing || 'linear',
             easingFunc = Kinetic.Tweens[easing],
@@ -55,10 +55,10 @@
 
         };
         this.tweens[lastTweenIndex].onStopped = function() {
-            node.transAnim.stop();
+            anim.stop();
         };
         this.tweens[lastTweenIndex].onResumed = function() {
-            node.transAnim.start();
+            anim.start();
         };
         this.tweens[lastTweenIndex].onLooped = function() {
 
@@ -74,7 +74,7 @@
                     newAttrs[key] = config[key];
                 }
             }
-            node.transAnim.stop();
+            anim.stop();
             node.setAttrs(newAttrs);
             if(config.callback) {
                 config.callback.call(node);
@@ -130,8 +130,8 @@
 
     /**
      * transition node to another state.  Any property that can accept a real
-     *  number can be transitioned, including x, y, rotation, opacity, strokeWidth,
-     *  radius, scale.x, scale.y, offset.x, offset.y, etc.
+     *  number or point object can be transitioned, including x, y, rotation, opacity, strokeWidth,
+     *  radius, scale, offset, scaleX, and scaleY
      * @name transitionTo
      * @methodOf Kinetic.Node.prototype
      * @param {Object} config
@@ -145,20 +145,18 @@
      *  transition completes
      */
     Kinetic.Node.prototype.transitionTo = function(config) {
-        var that = this, trans = new Kinetic.Transition(this, config);
+        var that = this, 
+            anim = new Kinetic.Animation(),
+            trans = new Kinetic.Transition(this, config, anim);
 
-        if(!this.transAnim) {
-            this.transAnim = new Kinetic.Animation();
-        }
-        this.transAnim.func = function() {
+        anim.func = function() {
             trans._onEnterFrame();
         };
-        this.transAnim.node = this.nodeType === 'Stage' ? this : this.getLayer();
+        anim.node = this.nodeType === 'Stage' ? this : this.getLayer();
 
         // auto start
         trans.start();
-        this.transAnim.start();
-        this.trans = trans;
+        anim.start();
         return trans;
     };
 })();

tests/js/manualTests.js

@@ -22,18 +22,23 @@ Test.Modules.TRANSITION = {
         layer.add(rect);
         stage.add(layer);
 
+        // transition 1
         rect.transitionTo({
             duration: 2,
             x: 400,
             y: 30,
-            shadowOffset: {
-                x: 80
-            },
-            rotation: Math.PI * 2,
             easing: 'bounce-ease-out'
         });
 
+        // transition 2
+        rect.transitionTo({
+            duration: 2,
+            shadowOffsetX: 80, 
+            rotation: Math.PI * 2,
+            easing: 'bounce-ease-out'
+        });
     },
+
     'all transition types': function(containerId) {
         document.getElementById(containerId).style.height = '300px';
 
@@ -70,7 +75,10 @@ Test.Modules.TRANSITION = {
     'ease-in, ease-out, ease-in-out hovers': function(containerId) {
         function addHovers(shape, easing) {
             shape.on("mouseover", function() {
-                this.transitionTo({
+                if (this.trans) {
+                    this.trans.stop();
+                }
+                this.trans = this.transitionTo({
                     scale: {
                         x: 1.5,
                         y: 1.5
@@ -83,7 +91,10 @@ Test.Modules.TRANSITION = {
                 });
             });
             shape.on("mouseout", function() {
-                this.transitionTo({
+                if (this.trans) {
+                    this.trans.stop();
+                }
+                this.trans = this.transitionTo({
                     scale: {
                         x: 1,
                         y: 1