tons of refactoring. Now have separate Transition and Tween classes

Thorfile

@@ -6,7 +6,7 @@ class Build < Thor
     "license.js", "src/GlobalObject.js", "src/Node.js", "src/Container.js", "src/Stage.js",
     "src/Layer.js", "src/Group.js", "src/Shape.js", "src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Image.js",
     "src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js",
-    "src/Transform.js", "src/Transitions.js"
+    "src/util/Transform.js", "src/util/Transition.js"
   ]
   
   desc "dev", "Concatenate all the js files into /dist/kinetic-VERSION.js."

dist/kinetic-core.js

@@ -63,8 +63,9 @@ Kinetic.GlobalObject = {
             }
         }
     },
-    addAnimation: function(func) {
+    addAnimation: function(anim) {
-        this.animations.push(func);
+        anim.id = Kinetic.GlobalObject.animIdCounter++;
+        this.animations.push(anim);
     },
     removeAnimation: function(id) {
         var animations = this.animations;
@@ -618,22 +619,17 @@ Kinetic.Node.prototype = {
         var that = this;
         var go = Kinetic.GlobalObject;
 
-        // add transition for each property
+        var trans = new Kinetic.Transition(this, config);
-        for(var key in config) {
-            if(key !== 'duration' && key !== 'easing' && key !== 'on') {
 
-                if(config[key].x === undefined && config[key].y === undefined) {
+        go.addAnimation({
-                    this._addTransition(key, config);
+            func: function() {
-                }
+                trans.run();
-                else {
+            },
-                    var props = ['x', 'y'];
+            drawId: layer.id,
-                    for(var n = 0; n < props.length; n++) {
+            draw: layer
-                        var prop = props[n];
+        });
-                        that._addComponentTransition(key, prop, config);
+
-                    }
+        trans.start();
-                }
-            }
-        }
 
         go._handleAnimation();
     },
@@ -714,83 +710,6 @@ Kinetic.Node.prototype = {
 
         return m;
     },
-    /**
-     * add transition listeners based on "on" config key.  Can subscribe to
-     * "finished", "looped", "started", "changed", "stopped" and "resumed" events
-     */
-    _addTransitionListeners: function(trans, config) {
-        if(config.on !== undefined) {
-            var on = config.on;
-
-            for(var key in on) {
-                var capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
-                trans['on' + capitalizedKey] = on[key];
-            }
-        }
-    },
-    _addTransition: function(key, config) {
-        var easing = config.easing;
-        if(easing === undefined) {
-            easing = 'linear';
-        }
-
-        var go = Kinetic.GlobalObject;
-        var that = this;
-        var layer = this.getLayer();
-        var id = go.animIdCounter++;
-
-        var trans = new Kinetic.Transition(that, function(i) {
-            that[key] = i;
-        }, Kinetic.Transitions[easing], that[key], config[key], config.duration);
-
-        go.addAnimation({
-            id: id,
-            func: function() {
-                trans.onEnterFrame();
-            },
-            drawId: layer.id,
-            draw: layer
-        });
-
-        trans.onFinished = function() {
-            go.removeAnimation(id);
-        };
-
-        this._addTransitionListeners(trans, config);
-        trans.start();
-    },
-    _addComponentTransition: function(key, prop, config) {
-        var easing = config.easing;
-        if(easing === undefined) {
-            easing = 'linear';
-        }
-
-        var go = Kinetic.GlobalObject;
-        var that = this;
-        var layer = this.getLayer();
-
-        if(config[key][prop] !== undefined) {
-            var id = go.animIdCounter++;
-            var trans = new Kinetic.Transition(that, function(i) {
-                that[key][prop] = i;
-            }, Kinetic.Transitions[easing], that[key][prop], config[key][prop], config.duration);
-
-            go.addAnimation({
-                id: id,
-                func: function() {
-                    trans.onEnterFrame();
-                },
-                drawId: layer.id,
-                draw: layer
-            });
-
-            trans.onFinished = function() {
-                go.removeAnimation(id);
-            };
-            this._addTransitionListeners(trans, config);
-            trans.start();
-        }
-    },
     /**
      * initialize drag and drop
      */
@@ -1051,7 +970,6 @@ Kinetic.Stage.prototype = {
     onFrame: function(func) {
         var go = Kinetic.GlobalObject;
         this.anim = {
-            id: go.animIdCounter++,
             func: func
         };
     },
@@ -2873,9 +2791,87 @@ Kinetic.Transform.prototype = {
 };
 
 /*
- * This class was ported from a Flash Tween library to JavaScript by Xaric.
+* The Tween class was ported from a Adobe Flash Tween library
+* to JavaScript by Xaric.  In the context of KineticJS, a Tween is
+* an animation of a single Node property.  A Transition is a set of
+* multiple tweens
 */
-Kinetic.Transition = function(obj, propFunc, func, begin, finish, duration) {
+
+/**
+ * Transition constructor.  KineticJS transitions contain
+ * multiple Tweens
+ */
+Kinetic.Transition = function(node, config) {
+    this.node = node;
+    this.config = config;
+    this.tweens = [];
+
+    // add tween for each property
+    for(var key in config) {
+        if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
+            if(config[key].x !== undefined) {
+                this.add(that._getComponentTween(key, 'x', config));
+            }
+            else if(config[key].y !== undefined) {
+                this.add(that._getComponentTween(key, 'y', config));
+            }
+            else {
+                this.add(this._getTween(key, config));
+            }
+        }
+    }
+};
+/*
+ * Transition methods
+ */
+Kinetic.Transition.prototype = {
+    add: function(tween) {
+        this.tweens.push(tween);
+    },
+    start: function() {
+        for(var n = 0; n < this.tweens.length; n++) {
+            this.tweens[n].start();
+        }
+    },
+    run: function() {
+        for(var n = 0; n < this.tweens.length; n++) {
+            this.tweens[n].onEnterFrame();
+        }
+    },
+    _getTween: function(key) {
+        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) {
+            node[key] = i;
+        }, Kinetic.Tweens[easing], node[key], config[key], config.duration);
+
+        return tween;
+    },
+    _getComponentTween: function(key, prop) {
+        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) {
+            node[key][prop] = i;
+        }, Kinetic.Tweens[easing], node[key][prop], config[key][prop], config.duration);
+
+        return tween;
+    },
+};
+
+/**
+ * Tween constructor
+ */
+Kinetic.Tween = function(obj, propFunc, func, begin, finish, duration) {
     this._listeners = [];
     this.addListener(this);
     this.obj = obj;
@@ -2896,8 +2892,10 @@ Kinetic.Transition = function(obj, propFunc, func, begin, finish, duration) {
     this.func = func;
     this.setFinish(finish);
 };
-
+/*
-Kinetic.Transition.prototype = {
+ * Tween methods
+ */
+Kinetic.Tween.prototype = {
     setTime: function(t) {
         this.prevTime = this._time;
         if(t > this.getDuration()) {
@@ -3061,7 +3059,7 @@ Kinetic.Transition.prototype = {
     }
 };
 
-Kinetic.Transitions = {
+Kinetic.Tweens = {
     'back-ease-in': function(t, b, c, d, a, p) {
         var s = 1.70158;
         return c * (t /= d) * t * ((s + 1) * t - s) + b;
@@ -3157,14 +3155,14 @@ Kinetic.Transitions = {
         }
     },
     'bounce-ease-in': function(t, b, c, d) {
-        return c - Kinetic.Transitions.bounceEaseOut(d - t, 0, c, d) + b;
+        return c - Kinetic.Tweens.bounceEaseOut(d - t, 0, c, d) + b;
     },
     'bounce-ease-in-out': function(t, b, c, d) {
         if(t < d / 2) {
-            return Kinetic.Transitions.bounceEaseIn(t * 2, 0, c, d) * 0.5 + b;
+            return Kinetic.Tweens.bounceEaseIn(t * 2, 0, c, d) * 0.5 + b;
         }
         else {
-            return Kinetic.Transitions.bounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
+            return Kinetic.Tweens.bounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
         }
     },
     // duplicate

src/GlobalObject.js

@@ -35,8 +35,9 @@ Kinetic.GlobalObject = {
             }
         }
     },
-    addAnimation: function(func) {
+    addAnimation: function(anim) {
-        this.animations.push(func);
+        anim.id = Kinetic.GlobalObject.animIdCounter++;
+        this.animations.push(anim);
     },
     removeAnimation: function(id) {
         var animations = this.animations;

src/Node.js

@@ -484,22 +484,17 @@ Kinetic.Node.prototype = {
         var that = this;
         var go = Kinetic.GlobalObject;
 
-        // add transition for each property
+        var trans = new Kinetic.Transition(this, config);
-        for(var key in config) {
-            if(key !== 'duration' && key !== 'easing' && key !== 'on') {
 
-                if(config[key].x === undefined && config[key].y === undefined) {
+        go.addAnimation({
-                    this._addTransition(key, config);
+            func: function() {
-                }
+                trans.run();
-                else {
+            },
-                    var props = ['x', 'y'];
+            drawId: layer.id,
-                    for(var n = 0; n < props.length; n++) {
+            draw: layer
-                        var prop = props[n];
+        });
-                        that._addComponentTransition(key, prop, config);
+
-                    }
+        trans.start();
-                }
-            }
-        }
 
         go._handleAnimation();
     },
@@ -580,83 +575,6 @@ Kinetic.Node.prototype = {
 
         return m;
     },
-    /**
-     * add transition listeners based on "on" config key.  Can subscribe to
-     * "finished", "looped", "started", "changed", "stopped" and "resumed" events
-     */
-    _addTransitionListeners: function(trans, config) {
-        if(config.on !== undefined) {
-            var on = config.on;
-
-            for(var key in on) {
-                var capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
-                trans['on' + capitalizedKey] = on[key];
-            }
-        }
-    },
-    _addTransition: function(key, config) {
-        var easing = config.easing;
-        if(easing === undefined) {
-            easing = 'linear';
-        }
-
-        var go = Kinetic.GlobalObject;
-        var that = this;
-        var layer = this.getLayer();
-        var id = go.animIdCounter++;
-
-        var trans = new Kinetic.Transition(that, function(i) {
-            that[key] = i;
-        }, Kinetic.Transitions[easing], that[key], config[key], config.duration);
-
-        go.addAnimation({
-            id: id,
-            func: function() {
-                trans.onEnterFrame();
-            },
-            drawId: layer.id,
-            draw: layer
-        });
-
-        trans.onFinished = function() {
-            go.removeAnimation(id);
-        };
-
-        this._addTransitionListeners(trans, config);
-        trans.start();
-    },
-    _addComponentTransition: function(key, prop, config) {
-        var easing = config.easing;
-        if(easing === undefined) {
-            easing = 'linear';
-        }
-
-        var go = Kinetic.GlobalObject;
-        var that = this;
-        var layer = this.getLayer();
-
-        if(config[key][prop] !== undefined) {
-            var id = go.animIdCounter++;
-            var trans = new Kinetic.Transition(that, function(i) {
-                that[key][prop] = i;
-            }, Kinetic.Transitions[easing], that[key][prop], config[key][prop], config.duration);
-
-            go.addAnimation({
-                id: id,
-                func: function() {
-                    trans.onEnterFrame();
-                },
-                drawId: layer.id,
-                draw: layer
-            });
-
-            trans.onFinished = function() {
-                go.removeAnimation(id);
-            };
-            this._addTransitionListeners(trans, config);
-            trans.start();
-        }
-    },
     /**
      * initialize drag and drop
      */

src/Stage.js

@@ -74,7 +74,6 @@ Kinetic.Stage.prototype = {
     onFrame: function(func) {
         var go = Kinetic.GlobalObject;
         this.anim = {
-            id: go.animIdCounter++,
             func: func
         };
     },

src/util/Transition.js

@@ -1,7 +1,85 @@
 /*
- * This class was ported from a Flash Tween library to JavaScript by Xaric.
+* The Tween class was ported from a Adobe Flash Tween library
+* to JavaScript by Xaric.  In the context of KineticJS, a Tween is
+* an animation of a single Node property.  A Transition is a set of
+* multiple tweens
 */
-Kinetic.Transition = function(obj, propFunc, func, begin, finish, duration) {
+
+/**
+ * Transition constructor.  KineticJS transitions contain
+ * multiple Tweens
+ */
+Kinetic.Transition = function(node, config) {
+    this.node = node;
+    this.config = config;
+    this.tweens = [];
+
+    // add tween for each property
+    for(var key in config) {
+        if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
+            if(config[key].x !== undefined) {
+                this.add(that._getComponentTween(key, 'x', config));
+            }
+            else if(config[key].y !== undefined) {
+                this.add(that._getComponentTween(key, 'y', config));
+            }
+            else {
+                this.add(this._getTween(key, config));
+            }
+        }
+    }
+};
+/*
+ * Transition methods
+ */
+Kinetic.Transition.prototype = {
+    add: function(tween) {
+        this.tweens.push(tween);
+    },
+    start: function() {
+        for(var n = 0; n < this.tweens.length; n++) {
+            this.tweens[n].start();
+        }
+    },
+    run: function() {
+        for(var n = 0; n < this.tweens.length; n++) {
+            this.tweens[n].onEnterFrame();
+        }
+    },
+    _getTween: function(key) {
+        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) {
+            node[key] = i;
+        }, Kinetic.Tweens[easing], node[key], config[key], config.duration);
+
+        return tween;
+    },
+    _getComponentTween: function(key, prop) {
+        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) {
+            node[key][prop] = i;
+        }, Kinetic.Tweens[easing], node[key][prop], config[key][prop], config.duration);
+
+        return tween;
+    },
+};
+
+/**
+ * Tween constructor
+ */
+Kinetic.Tween = function(obj, propFunc, func, begin, finish, duration) {
     this._listeners = [];
     this.addListener(this);
     this.obj = obj;
@@ -22,8 +100,10 @@ Kinetic.Transition = function(obj, propFunc, func, begin, finish, duration) {
     this.func = func;
     this.setFinish(finish);
 };
-
+/*
-Kinetic.Transition.prototype = {
+ * Tween methods
+ */
+Kinetic.Tween.prototype = {
     setTime: function(t) {
         this.prevTime = this._time;
         if(t > this.getDuration()) {
@@ -187,7 +267,7 @@ Kinetic.Transition.prototype = {
     }
 };
 
-Kinetic.Transitions = {
+Kinetic.Tweens = {
     'back-ease-in': function(t, b, c, d, a, p) {
         var s = 1.70158;
         return c * (t /= d) * t * ((s + 1) * t - s) + b;
@@ -283,14 +363,14 @@ Kinetic.Transitions = {
         }
     },
     'bounce-ease-in': function(t, b, c, d) {
-        return c - Kinetic.Transitions.bounceEaseOut(d - t, 0, c, d) + b;
+        return c - Kinetic.Tweens.bounceEaseOut(d - t, 0, c, d) + b;
     },
     'bounce-ease-in-out': function(t, b, c, d) {
         if(t < d / 2) {
-            return Kinetic.Transitions.bounceEaseIn(t * 2, 0, c, d) * 0.5 + b;
+            return Kinetic.Tweens.bounceEaseIn(t * 2, 0, c, d) * 0.5 + b;
         }
         else {
-            return Kinetic.Transitions.bounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
+            return Kinetic.Tweens.bounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
         }
     },
     // duplicate

tests/js/functionalTests.js

@@ -24,12 +24,7 @@ Test.prototype.tests = {
             x: 400,
             y: 30,
             rotation: Math.PI * 2,
-            easing: 'bounce-ease-out',
+            easing: 'bounce-ease-out'
-            on: {
-                finished: function() {
-                    console.log('finished');
-                }
-            }
         });
     },
     'TRANSITION - transition position and rotation with two transitions': function(containerId) {