refactored transition logic and added getAttr method

src/Node.js

@@ -136,10 +136,11 @@
          * get attr
          * @name getAttr
          * @methodOf Kinetic.Node.prototype
+         * @param {String} attr  
          */
         getAttr: function(attr) {
             var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
-            return method();
+            return this[method](); 
         },
         /**
          * get attrs

src/Transition.js

@@ -1,4 +1,10 @@
 (function() {
+    function createTween(obj, key, easingFunc, start, end, duration) {
+        var tween = new Kinetic.Tween(function(i) {
+           obj[key] = i;
+        }, easingFunc, start, end, duration);
+        return tween;
+    }
     /**
      * Transition constructor.  The transitionTo() Node method
      *  returns a reference to the transition object which you can use
@@ -6,46 +12,61 @@
      * @constructor
      */
     Kinetic.Transition = function(node, config) {
-        var that = this, obj = {};
+        var that = this,
+            easing = config.easing || 'linear',
+            easingFunc = Kinetic.Tweens[easing];  
+            duration = config.duration || 0,
+            configVal = null,
+            lastTweenIndex = 0;
+            obj = {}, 
+            x = 0, 
+            y = 0; 
 
-        this.node = node;
-        this.config = config;
         this.tweens = [];
+        this.attrs = {};
+        this.node = node;
 
-        // add tween for each property
+        for (var key in config) {
-        function addTween(c, attrs, obj, rootObj) {
+            if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
-            for(var key in c) {
+                configVal = config[key];   
-                if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
+                obj = node.getAttr(key); 
-                    // if val is an object then traverse
+                if(Kinetic.Type._isObject(obj)) {
-                    if(Kinetic.Type._isObject(c[key])) {
+                    configValX = configVal.x; 
-                        obj[key] = {};
+                    configValY = configVal.y;
-                        addTween(c[key], attrs[key], obj[key], rootObj);
+
-                    }
+                    this.attrs[key] = {};
-                    else {
+                    if (configValX !== undefined) {
-                        that._add(that._getTween(attrs, key, c[key], obj, rootObj));
+                        that.tweens.push(createTween(this.attrs[key], 'x', easingFunc, obj.x, configValX, duration));
                     }
+                    if (configValY !== undefined) { 
+                        that.tweens.push(createTween(this.attrs[key], 'y', easingFunc, obj.y, configValY, duration));
+                    } 
                 }
+                else {
+                    that.tweens.push(createTween(this.attrs, key, easingFunc, node.getAttr(key), configVal, duration));
+                } 
             }
         }
-        addTween(config, node.attrs, obj, obj);
+
+        lastTweenIndex = this.tweens.length - 1;
 
         // map first tween event to transition event
-        this.tweens[0].onStarted = function() {
+        this.tweens[lastTweenIndex].onStarted = function() {
 
         };
-        this.tweens[0].onStopped = function() {
+        this.tweens[lastTweenIndex].onStopped = function() {
             node.transAnim.stop();
         };
-        this.tweens[0].onResumed = function() {
+        this.tweens[lastTweenIndex].onResumed = function() {
             node.transAnim.start();
         };
-        this.tweens[0].onLooped = function() {
+        this.tweens[lastTweenIndex].onLooped = function() {
 
         };
-        this.tweens[0].onChanged = function() {
+        this.tweens[lastTweenIndex].onChanged = function() {
 
         };
-        this.tweens[0].onFinished = function() {
+        this.tweens[lastTweenIndex].onFinished = function() {
             var newAttrs = {};
             // create new attr obj
             for(var key in config) {
@@ -98,24 +119,12 @@
             for(var n = 0; n < this.tweens.length; n++) {
                 this.tweens[n].onEnterFrame();
             }
+            // now that the temp attrs object has been updated,
+            // set the node attrs
+            this.node.setAttrs(this.attrs);
         },
         _add: function(tween) {
             this.tweens.push(tween);
-        },
-        _getTween: function(attrs, prop, val, obj, rootObj) {
-            var config = this.config;
-            var node = this.node;
-            var easing = config.easing;
-            if(easing === undefined) {
-                easing = 'linear';
-            }
-
-            var tween = new Kinetic.Tween(node, function(i) {
-                obj[prop] = i;
-                node.setAttrs(rootObj);
-            }, Kinetic.Tweens[easing], attrs[prop], val, config.duration);
-
-            return tween;
         }
     };
 

src/util/Tween.js

@@ -5,10 +5,9 @@
      * an animation of a single Node property.  A Transition is a set of
      * multiple tweens
      */
-    Kinetic.Tween = function(obj, propFunc, func, begin, finish, duration) {
+    Kinetic.Tween = function(propFunc, func, begin, finish, duration) {
         this._listeners = [];
         this.addListener(this);
-        this.obj = obj;
         this.propFunc = propFunc;
         this.begin = begin;
         this._pos = begin;

tests/js/manualTests.js

@@ -24,11 +24,11 @@ Test.Modules.TRANSITION = {
 
         rect.transitionTo({
             duration: 2,
+            x: 400,
+            y: 30,
             shadowOffset: {
                 x: 80
             },
-            x: 400,
-            y: 30,
             rotation: Math.PI * 2,
             easing: 'bounce-ease-out'
         });
@@ -76,7 +76,10 @@ Test.Modules.TRANSITION = {
                         y: 1.5
                     },
                     duration: 1,
-                    easing: easing
+                    easing: easing,
+                    callback: function() {
+                        console.log('finished');
+                    }
                 });
             });
             shape.on("mouseout", function() {