round 1 of animation + transition rewrite, while combing Xaric's Tween port

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/Transform.js", "src/Transitions.js"
   ]
   
   desc "dev", "Concatenate all the js files into /dist/kinetic-VERSION.js."

dist/kinetic-core.js

@@ -3,7 +3,7 @@
  * http://www.kineticjs.com/
  * Copyright 2012, Eric Rowell
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Apr 01 2012
+ * Date: Apr 02 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -41,6 +41,8 @@ var Kinetic = {};
 Kinetic.GlobalObject = {
     stages: [],
     idCounter: 0,
+    animations: [],
+    animIdCounter: 0,
     frame: {
         time: 0,
         timeDiff: 0,
@@ -61,152 +63,141 @@ Kinetic.GlobalObject = {
             }
         }
     },
-    _isaCanvasAnimating: function() {
+    /*
-        for(var n = 0; n < this.stages.length; n++) {
+     _endTransition: function() {
-            var stage = this.stages[n];
+     var config = this.config;
-            if(stage.isAnimating) {
+     for(var key in config) {
-                return true;
+     if(config.hasOwnProperty(key)) {
-            }
+     if(config[key].x !== undefined || config[key].y !== undefined) {
+     var propArray = ['x', 'y'];
+     for(var n = 0; n < propArray.length; n++) {
+     var prop = propArray[n];
+     if(config[key][prop] !== undefined) {
+     this.node[key][prop] = config[key][prop];
+     }
+     }
+     }
+     else {
+     this.node[key] = config[key];
+     }
+     }
+     }
+     },
+     _transitionPow: function(transition, key, prop, powFunc) {
+     var pow = powFunc();
 
-            for(var i = 0; i < stage.children.length; i++) {
+     var config = transition.config;
-                var layer = stage.children[i];
+     var timeDiff = this.frame.timeDiff;
-                if(layer.transitions.length > 0) {
+     if(prop !== undefined) {
-                    return true;
+     var start = transition.starts[key][prop];
-                }
+     var change = config[key][prop] - start;
-            }
+     var b = change / (Math.pow(config.duration * 1000, pow));
-        }
+     transition.node[key][prop] = b * Math.pow(transition.time, pow) + start;
-
+     }
-        this.frame.lastTime = 0;
+     else {
-        return false;
+     var start = transition.starts[key];
-    },
+     var change = config[key] - start;
-    _endTransition: function() {
+     var b = change / (Math.pow(config.duration * 1000, pow));
-        var config = this.config;
+     transition.node[key] = b * Math.pow(transition.time, pow) + start;
-        for(var key in config) {
+     }
-            if(config.hasOwnProperty(key)) {
+     },
-                if(config[key].x !== undefined || config[key].y !== undefined) {
+     _chooseTransition: function(transition, key, prop) {
-                    var propArray = ['x', 'y'];
+     var config = transition.config;
-                    for(var n = 0; n < propArray.length; n++) {
+     var that = this;
-                        var prop = propArray[n];
+     switch(config.easing) {
-                        if(config[key][prop] !== undefined) {
+     case 'ease-in':
-                            this.node[key][prop] = config[key][prop];
+     this._transitionPow(transition, key, prop, function() {
-                        }
+     return 2.5;
-                    }
+     });
-                }
+     break;
-                else {
+     case 'ease-out':
-                    this.node[key] = config[key];
+     this._transitionPow(transition, key, prop, function() {
-                }
+     return 0.4;
-            }
+     });
-        }
+     break;
-    },
+     case 'ease-in-out':
-    _transitionPow: function(transition, key, prop, powFunc) {
+     this._transitionPow(transition, key, prop, function() {
-        var pow = powFunc();
+     var change = -2.1;
-
+     var b = change / (config.duration * 1000);
-        var config = transition.config;
+     return 2.5 + b * transition.time;
-        var timeDiff = this.frame.timeDiff;
+     });
-        if(prop !== undefined) {
+     break;
-            var start = transition.starts[key][prop];
+     // linear is default
-            var change = config[key][prop] - start;
+     default:
-            var b = change / (Math.pow(config.duration * 1000, pow));
+     this._transitionPow(transition, key, prop, function() {
-            transition.node[key][prop] = b * Math.pow(transition.time, pow) + start;
+     return 1;
-        }
+     });
-        else {
+     break;
-            var start = transition.starts[key];
+     }
-            var change = config[key] - start;
+     },
-            var b = change / (Math.pow(config.duration * 1000, pow));
+     _runTransition: function(transition) {
-            transition.node[key] = b * Math.pow(transition.time, pow) + start;
+     var config = transition.config;
-        }
+     for(var key in config) {
-    },
+     if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
-    _chooseTransition: function(transition, key, prop) {
+     if(config[key].x !== undefined || config[key].y !== undefined) {
-        var config = transition.config;
+     var propArray = ['x', 'y'];
-        var that = this;
+     for(var n = 0; n < propArray.length; n++) {
-        switch(config.easing) {
+     var prop = propArray[n];
-            case 'ease-in':
+     if(config[key][prop] !== undefined) {
-                this._transitionPow(transition, key, prop, function() {
+     this._chooseTransition(transition, key, prop);
-                    return 2.5;
+     }
-                });
+     }
-                break;
+     }
-            case 'ease-out':
+     else {
-                this._transitionPow(transition, key, prop, function() {
+     this._chooseTransition(transition, key);
-                    return 0.4;
+     }
-                });
+     }
-                break;
+     }
-            case 'ease-in-out':
+     },
-                this._transitionPow(transition, key, prop, function() {
+     _clearTransition: function(node) {
-                    var change = -2.1;
+     var layer = node.getLayer();
-                    var b = change / (config.duration * 1000);
+     for(var n = 0; n < layer.transitions.length; n++) {
-                    return 2.5 + b * transition.time;
+     if(layer.transitions[n].node.id === node.id) {
-                });
+     layer.transitions.splice(n, 1);
-                break;
+     }
-            // linear is default
+     }
-            default:
+     },
-                this._transitionPow(transition, key, prop, function() {
+     */
-                    return 1;
-                });
-                break;
-        }
-    },
-    _runTransition: function(transition) {
-        var config = transition.config;
-        for(var key in config) {
-            if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
-                if(config[key].x !== undefined || config[key].y !== undefined) {
-                    var propArray = ['x', 'y'];
-                    for(var n = 0; n < propArray.length; n++) {
-                        var prop = propArray[n];
-                        if(config[key][prop] !== undefined) {
-                            this._chooseTransition(transition, key, prop);
-                        }
-                    }
-                }
-                else {
-                    this._chooseTransition(transition, key);
-                }
-            }
-        }
-    },
-    _clearTransition: function(node) {
-        var layer = node.getLayer();
-        for(var n = 0; n < layer.transitions.length; n++) {
-            if(layer.transitions[n].node.id === node.id) {
-                layer.transitions.splice(n, 1);
-            }
-        }
-    },
     _runFrames: function() {
-        for(var n = 0; n < this.stages.length; n++) {
+        for(var n = 0; n < this.animations.length; n++) {
-            var stage = this.stages[n];
+            this.animations[n].func(this.frame);
-            // run animation if available
-            if(stage.isAnimating && stage.onFrameFunc !== undefined) {
-                stage.onFrameFunc(this.frame);
-            }
-
-            // loop through layers
-            var layers = stage.getChildren();
-            for(var k = 0; k < layers.length; k++) {
-                var layer = layers[k];
-                var didTransition = false;
-                // loop through transitions
-                for(var i = 0; i < layer.transitions.length; i++) {
-                    didTransition = true;
-                    var transition = layer.transitions[i];
-                    transition.time += this.frame.timeDiff;
-                    if(transition.time >= transition.config.duration * 1000) {
-                        this._endTransition.apply(transition);
-                        this._clearTransition(transition.node);
-                        if(transition.config.callback !== undefined) {
-                            transition.config.callback();
-                        }
-                    }
-                    else {
-                        this._runTransition(transition);
-                    }
-                }
-
-                if(didTransition) {
-                    layer.draw();
-                }
-            }
         }
+        /*
+         for(var n = 0; n < this.stages.length; n++) {
+         var stage = this.stages[n];
+         // run animation if available
+         if(stage.isAnimating && stage.onFrameFunc !== undefined) {
+         stage.onFrameFunc(this.frame);
+         }
+
+         // loop through layers
+         var layers = stage.getChildren();
+         for(var k = 0; k < layers.length; k++) {
+         var layer = layers[k];
+         var didTransition = false;
+         // loop through transitions
+         for(var i = 0; i < layer.transitions.length; i++) {
+         didTransition = true;
+         var transition = layer.transitions[i];
+         transition.time += this.frame.timeDiff;
+         if(transition.time >= transition.config.duration * 1000) {
+         this._endTransition.apply(transition);
+         this._clearTransition(transition.node);
+         if(transition.config.callback !== undefined) {
+         transition.config.callback();
+         }
+         }
+         else {
+         this._runTransition(transition);
+         }
+         }
+
+         if(didTransition) {
+         layer.draw();
+         }
+         }
+         }
+         */
     },
     _updateFrameObject: function() {
         var date = new Date();
@@ -221,7 +212,7 @@ Kinetic.GlobalObject = {
         }
     },
     _animationLoop: function() {
-        if(this._isaCanvasAnimating()) {
+        if(this.animations.length > 0) {
             this._updateFrameObject();
             this._runFrames();
             var that = this;
@@ -229,12 +220,18 @@ Kinetic.GlobalObject = {
                 that._animationLoop();
             });
         }
+        else {
+            this.frame.lastTime = 0;
+        }
     },
     _handleAnimation: function() {
         var that = this;
-        if(this._isaCanvasAnimating()) {
+        if(this.animations.length > 0) {
             that._animationLoop();
         }
+        else {
+            this.frame.lastTime = 0;
+        }
     }
 };
 
@@ -729,15 +726,19 @@ Kinetic.Node.prototype = {
     transitionTo: function(config) {
         var layer = this.getLayer();
         var that = this;
-        var duration = config.duration * 1000;
+        
-        var starts = {};
+        
+        //var duration = config.duration * 1000;
+        //var starts = {};
+        //var go = Kinetic.GlobalObject;
 
         /*
          * clear transition if one is currenlty running.
          * This make it easy to start new transitions without
          * having to explicitly cancel old ones
          */
-        Kinetic.GlobalObject._clearTransition(this);
+        /*
+        go._clearTransition(this);
 
         for(var key in config) {
             if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
@@ -757,15 +758,16 @@ Kinetic.Node.prototype = {
             }
         }
 
-        layer.transitions.push({
+        go.transitions.push({
             id: layer.transitionIdCounter++,
             time: 0,
             config: config,
             node: this,
             starts: starts
         });
+        */
 
-        Kinetic.GlobalObject._handleAnimation();
+        go._handleAnimation();
     },
     /**
      * set drag constraint
@@ -1080,10 +1082,6 @@ Kinetic.Stage = function(config) {
     // set stage id
     this.id = Kinetic.GlobalObject.idCounter++;
 
-    // animation support
-    this.isAnimating = false;
-    this.onFrameFunc = undefined;
-
     this._buildDOM();
     this._listen();
     this._prepareDrag();
@@ -1104,20 +1102,22 @@ Kinetic.Stage.prototype = {
      * @param {function} func
      */
     onFrame: function(func) {
-        this.onFrameFunc = func;
+        var go = Kinetic.GlobalObject;
+        go.animations.push({
+        	id: go.animIdCounter++,
+        	func: func
+        });
     },
     /**
      * start animation
      */
     start: function() {
-        this.isAnimating = true;
         Kinetic.GlobalObject._handleAnimation();
     },
     /**
      * stop animation
      */
     stop: function() {
-        this.isAnimating = false;
         Kinetic.GlobalObject._handleAnimation();
     },
     /**
@@ -1796,8 +1796,6 @@ Kinetic.Layer = function(config) {
     this.canvas = document.createElement('canvas');
     this.context = this.canvas.getContext('2d');
     this.canvas.style.position = 'absolute';
-    this.transitions = [];
-    this.transitionIdCounter = 0;
 
     // call super constructors
     Kinetic.Container.apply(this, []);
@@ -2923,3 +2921,339 @@ Kinetic.Transform.prototype = {
     }
 };
 
+Kinetic.Transition = function(obj, propFunc, func, begin, finish, duration) {
+    this._listeners = [];
+    this.addListener(this);
+    this.obj = obj;
+    this.propFunc = propFunc;
+    this.begin = begin;
+    this._pos = begin;
+    this.setDuration(duration);
+
+    this.isPlaying = false;
+
+    this._change = 0;
+
+    this.prevTime = 0;
+    this.prevPos = 0;
+    this.looping = false;
+
+    this._time = 0;
+    this._position = 0;
+    this._startTime = 0;
+    this._finish = 0;
+
+    this.name = '';
+
+    //set the tweening function
+    if(func !== null && func !== '') {
+        this.func = func;
+    }
+    else {
+        this.func = function(t, b, c, d) {
+            return c * t / d + b;
+        };
+    }
+
+    this.setFinish(finish);
+};
+
+Kinetic.Transition.prototype = {
+    setTime: function(t) {
+        this.prevTime = this._time;
+        if(t > this.getDuration()) {
+            if(this.looping) {
+                this.rewind(t - this._duration);
+                this.update();
+                this.broadcastMessage('onTweenLooped', {
+                    target: this,
+                    type: 'onTweenLooped'
+                });
+            }
+            else {
+                this._time = this._duration;
+                this.update();
+                this.stop();
+                this.broadcastMessage('onTweenFinished', {
+                    target: this,
+                    type: 'onTweenFinished'
+                });
+            }
+        }
+        else if(t < 0) {
+            this.rewind();
+            this.update();
+        }
+        else {
+            this._time = t;
+            this.update();
+        }
+    },
+    getTime: function() {
+        return this._time;
+    },
+    setDuration: function(d) {
+        this._duration = (d == null || d <= 0) ? 100000 : d;
+    },
+    getDuration: function() {
+        return this._duration;
+    },
+    setPosition: function(p) {
+        this.prevPos = this._pos;
+        //var a = this.suffixe != '' ? this.suffixe : '';
+        this.propFunc(p);
+        //+ a;
+        //this.obj(Math.round(p));
+        this._pos = p;
+        this.broadcastMessage('onTweenChanged', {
+            target: this,
+            type: 'onTweenChanged'
+        });
+    },
+    getPosition: function(t) {
+        if(t == undefined)
+            t = this._time;
+        return this.func(t, this.begin, this._change, this._duration);
+    },
+    setFinish: function(f) {
+        this._change = f - this.begin;
+    },
+    getFinish: function() {
+        return this.begin + this._change;
+    },
+    start: function() {
+        this.rewind();
+        this.startEnterFrame();
+        this.broadcastMessage('onTweenStarted', {
+            target: this,
+            type: 'onTweenStarted'
+        });
+    },
+    rewind: function(t) {
+        this.stop();
+        this._time = (t == undefined) ? 0 : t;
+        this.fixTime();
+        this.update();
+    },
+    fforward: function() {
+        this._time = this._duration;
+        this.fixTime();
+        this.update();
+    },
+    update: function() {
+        this.setPosition(this.getPosition(this._time));
+    },
+    startEnterFrame: function() {
+        this.stopEnterFrame();
+        this.isPlaying = true;
+        this.onEnterFrame();
+    },
+    onEnterFrame: function() {
+        if(this.isPlaying)
+            this.nextFrame();
+    },
+    nextFrame: function() {
+        this.setTime((this.getTimer() - this._startTime) / 1000);
+    },
+    stop: function() {
+        this.stopEnterFrame();
+        this.broadcastMessage('onTweenStopped', {
+            target: this,
+            type: 'onTweenStopped'
+        });
+    },
+    stopEnterFrame: function() {
+        this.isPlaying = false;
+    },
+    continueTo: function(finish, duration) {
+        this.begin = this._pos;
+        this.setFinish(finish);
+        if(this._duration != undefined)
+            this.setDuration(duration);
+        this.start();
+    },
+    resume: function() {
+        this.fixTime();
+        this.startEnterFrame();
+        this.broadcastMessage('onTweenResumed', {
+            target: this,
+            type: 'onTweenResumed'
+        });
+    },
+    yoyo: function() {
+        this.continueTo(this.begin, this._time);
+    },
+    addListener: function(o) {
+        this.removeListener(o);
+        return this._listeners.push(o);
+    },
+    removeListener: function(o) {
+        var a = this._listeners;
+        var i = a.length;
+        while(i--) {
+            if(a[i] == o) {
+                a.splice(i, 1);
+                return true;
+            }
+        }
+        return false;
+    },
+    broadcastMessage: function() {
+        var arr = new Array();
+        for(var i = 0; i < arguments.length; i++) {
+            arr.push(arguments[i])
+        }
+        var e = arr.shift();
+        var a = this._listeners;
+        var l = a.length;
+        for(var i = 0; i < l; i++) {
+            if(a[i][e])
+                a[i][e].apply(a[i], arr);
+        }
+    },
+    fixTime: function() {
+        this._startTime = this.getTimer() - this._time * 1000;
+    },
+    getTimer: function() {
+        return new Date().getTime() - this._time;
+    }
+};
+
+Kinetic.Transitions = {
+    backEaseIn: function(t, b, c, d, a, p) {
+        var s = 1.70158;
+        return c * (t /= d) * t * ((s + 1) * t - s) + b;
+    },
+    backEaseOut: function(t, b, c, d, a, p) {
+        var s = 1.70158;
+        return c * (( t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
+    },
+    backEaseInOut: function(t, b, c, d, a, p) {
+        var s = 1.70158;
+        if((t /= d / 2) < 1) {
+            return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
+        }
+        return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
+    },
+    elasticEaseIn: function(t, b, c, d, a, p) {
+        // added s = 0
+        var s = 0;
+        if(t === 0) {
+            return b;
+        }
+        if((t /= d) == 1) {
+            return b + c;
+        }
+        if(!p) {
+            p = d * 0.3;
+        }
+        if(!a || a < Math.abs(c)) {
+            a = c;
+            s = p / 4;
+        }
+        else {
+            s = p / (2 * Math.PI) * Math.asin(c / a);
+        }
+        return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+    },
+    elasticEaseOut: function(t, b, c, d, a, p) {
+        // added s = 0
+        var s = 0;
+        if(t === 0) {
+            return b;
+        }
+        if((t /= d) == 1) {
+            return b + c;
+        }
+        if(!p) {
+            p = d * 0.3;
+        }
+        if(!a || a < Math.abs(c)) {
+            a = c;
+            s = p / 4;
+        }
+        else {
+            s = p / (2 * Math.PI) * Math.asin(c / a);
+        }
+        return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
+    },
+    elasticEaseInOut: function(t, b, c, d, a, p) {
+        var s = 0;
+        if(t === 0) {
+            return b;
+        }
+        if((t /= d / 2) == 2) {
+            return b + c;
+        }
+        if(!p) {
+            p = d * (0.3 * 1.5);
+        }
+        if(!a || a < Math.abs(c)) {
+            a = c;
+            s = p / 4;
+        }
+        else {
+            s = p / (2 * Math.PI) * Math.asin(c / a);
+        }
+        if(t < 1) {
+            return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+        }
+        return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
+    },
+    bounceEaseOut: function(t, b, c, d) {
+        if((t /= d) < (1 / 2.75)) {
+            return c * (7.5625 * t * t) + b;
+        }
+        else if(t < (2 / 2.75)) {
+            return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
+        }
+        else if(t < (2.5 / 2.75)) {
+            return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
+        }
+        else {
+            return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
+        }
+    },
+    bounceEaseIn: function(t, b, c, d) {
+        return c - Kinetic.Transitions.bounceEaseOut(d - t, 0, c, d) + b;
+    },
+    bounceEaseInOut: function(t, b, c, d) {
+        if(t < d / 2) {
+            return Kinetic.Transitions.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;
+        }
+    },
+    // duplicate
+    /*
+     strongEaseInOut: function(t, b, c, d) {
+     return c * (t /= d) * t * t * t * t + b;
+     },
+     */
+    regularEaseIn: function(t, b, c, d) {
+        return c * (t /= d) * t + b;
+    },
+    regularEaseOut: function(t, b, c, d) {
+        return -c * (t /= d) * (t - 2) + b;
+    },
+    regularEaseInOut: function(t, b, c, d) {
+        if((t /= d / 2) < 1) {
+            return c / 2 * t * t + b;
+        }
+        return -c / 2 * ((--t) * (t - 2) - 1) + b;
+    },
+    strongEaseIn: function(t, b, c, d) {
+        return c * (t /= d) * t * t * t * t + b;
+    },
+    strongEaseOut: function(t, b, c, d) {
+        return c * (( t = t / d - 1) * t * t * t * t + 1) + b;
+    },
+    strongEaseInOut: function(t, b, c, d) {
+        if((t /= d / 2) < 1) {
+            return c / 2 * t * t * t * t * t + b;
+        }
+        return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
+    }
+};
+

src/GlobalObject.js

@@ -13,6 +13,8 @@ var Kinetic = {};
 Kinetic.GlobalObject = {
     stages: [],
     idCounter: 0,
+    animations: [],
+    animIdCounter: 0,
     frame: {
         time: 0,
         timeDiff: 0,
@@ -33,152 +35,141 @@ Kinetic.GlobalObject = {
             }
         }
     },
-    _isaCanvasAnimating: function() {
+    /*
-        for(var n = 0; n < this.stages.length; n++) {
+     _endTransition: function() {
-            var stage = this.stages[n];
+     var config = this.config;
-            if(stage.isAnimating) {
+     for(var key in config) {
-                return true;
+     if(config.hasOwnProperty(key)) {
-            }
+     if(config[key].x !== undefined || config[key].y !== undefined) {
+     var propArray = ['x', 'y'];
+     for(var n = 0; n < propArray.length; n++) {
+     var prop = propArray[n];
+     if(config[key][prop] !== undefined) {
+     this.node[key][prop] = config[key][prop];
+     }
+     }
+     }
+     else {
+     this.node[key] = config[key];
+     }
+     }
+     }
+     },
+     _transitionPow: function(transition, key, prop, powFunc) {
+     var pow = powFunc();
 
-            for(var i = 0; i < stage.children.length; i++) {
+     var config = transition.config;
-                var layer = stage.children[i];
+     var timeDiff = this.frame.timeDiff;
-                if(layer.transitions.length > 0) {
+     if(prop !== undefined) {
-                    return true;
+     var start = transition.starts[key][prop];
-                }
+     var change = config[key][prop] - start;
-            }
+     var b = change / (Math.pow(config.duration * 1000, pow));
-        }
+     transition.node[key][prop] = b * Math.pow(transition.time, pow) + start;
-
+     }
-        this.frame.lastTime = 0;
+     else {
-        return false;
+     var start = transition.starts[key];
-    },
+     var change = config[key] - start;
-    _endTransition: function() {
+     var b = change / (Math.pow(config.duration * 1000, pow));
-        var config = this.config;
+     transition.node[key] = b * Math.pow(transition.time, pow) + start;
-        for(var key in config) {
+     }
-            if(config.hasOwnProperty(key)) {
+     },
-                if(config[key].x !== undefined || config[key].y !== undefined) {
+     _chooseTransition: function(transition, key, prop) {
-                    var propArray = ['x', 'y'];
+     var config = transition.config;
-                    for(var n = 0; n < propArray.length; n++) {
+     var that = this;
-                        var prop = propArray[n];
+     switch(config.easing) {
-                        if(config[key][prop] !== undefined) {
+     case 'ease-in':
-                            this.node[key][prop] = config[key][prop];
+     this._transitionPow(transition, key, prop, function() {
-                        }
+     return 2.5;
-                    }
+     });
-                }
+     break;
-                else {
+     case 'ease-out':
-                    this.node[key] = config[key];
+     this._transitionPow(transition, key, prop, function() {
-                }
+     return 0.4;
-            }
+     });
-        }
+     break;
-    },
+     case 'ease-in-out':
-    _transitionPow: function(transition, key, prop, powFunc) {
+     this._transitionPow(transition, key, prop, function() {
-        var pow = powFunc();
+     var change = -2.1;
-
+     var b = change / (config.duration * 1000);
-        var config = transition.config;
+     return 2.5 + b * transition.time;
-        var timeDiff = this.frame.timeDiff;
+     });
-        if(prop !== undefined) {
+     break;
-            var start = transition.starts[key][prop];
+     // linear is default
-            var change = config[key][prop] - start;
+     default:
-            var b = change / (Math.pow(config.duration * 1000, pow));
+     this._transitionPow(transition, key, prop, function() {
-            transition.node[key][prop] = b * Math.pow(transition.time, pow) + start;
+     return 1;
-        }
+     });
-        else {
+     break;
-            var start = transition.starts[key];
+     }
-            var change = config[key] - start;
+     },
-            var b = change / (Math.pow(config.duration * 1000, pow));
+     _runTransition: function(transition) {
-            transition.node[key] = b * Math.pow(transition.time, pow) + start;
+     var config = transition.config;
-        }
+     for(var key in config) {
-    },
+     if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
-    _chooseTransition: function(transition, key, prop) {
+     if(config[key].x !== undefined || config[key].y !== undefined) {
-        var config = transition.config;
+     var propArray = ['x', 'y'];
-        var that = this;
+     for(var n = 0; n < propArray.length; n++) {
-        switch(config.easing) {
+     var prop = propArray[n];
-            case 'ease-in':
+     if(config[key][prop] !== undefined) {
-                this._transitionPow(transition, key, prop, function() {
+     this._chooseTransition(transition, key, prop);
-                    return 2.5;
+     }
-                });
+     }
-                break;
+     }
-            case 'ease-out':
+     else {
-                this._transitionPow(transition, key, prop, function() {
+     this._chooseTransition(transition, key);
-                    return 0.4;
+     }
-                });
+     }
-                break;
+     }
-            case 'ease-in-out':
+     },
-                this._transitionPow(transition, key, prop, function() {
+     _clearTransition: function(node) {
-                    var change = -2.1;
+     var layer = node.getLayer();
-                    var b = change / (config.duration * 1000);
+     for(var n = 0; n < layer.transitions.length; n++) {
-                    return 2.5 + b * transition.time;
+     if(layer.transitions[n].node.id === node.id) {
-                });
+     layer.transitions.splice(n, 1);
-                break;
+     }
-            // linear is default
+     }
-            default:
+     },
-                this._transitionPow(transition, key, prop, function() {
+     */
-                    return 1;
-                });
-                break;
-        }
-    },
-    _runTransition: function(transition) {
-        var config = transition.config;
-        for(var key in config) {
-            if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
-                if(config[key].x !== undefined || config[key].y !== undefined) {
-                    var propArray = ['x', 'y'];
-                    for(var n = 0; n < propArray.length; n++) {
-                        var prop = propArray[n];
-                        if(config[key][prop] !== undefined) {
-                            this._chooseTransition(transition, key, prop);
-                        }
-                    }
-                }
-                else {
-                    this._chooseTransition(transition, key);
-                }
-            }
-        }
-    },
-    _clearTransition: function(node) {
-        var layer = node.getLayer();
-        for(var n = 0; n < layer.transitions.length; n++) {
-            if(layer.transitions[n].node.id === node.id) {
-                layer.transitions.splice(n, 1);
-            }
-        }
-    },
     _runFrames: function() {
-        for(var n = 0; n < this.stages.length; n++) {
+        for(var n = 0; n < this.animations.length; n++) {
-            var stage = this.stages[n];
+            this.animations[n].func(this.frame);
-            // run animation if available
-            if(stage.isAnimating && stage.onFrameFunc !== undefined) {
-                stage.onFrameFunc(this.frame);
-            }
-
-            // loop through layers
-            var layers = stage.getChildren();
-            for(var k = 0; k < layers.length; k++) {
-                var layer = layers[k];
-                var didTransition = false;
-                // loop through transitions
-                for(var i = 0; i < layer.transitions.length; i++) {
-                    didTransition = true;
-                    var transition = layer.transitions[i];
-                    transition.time += this.frame.timeDiff;
-                    if(transition.time >= transition.config.duration * 1000) {
-                        this._endTransition.apply(transition);
-                        this._clearTransition(transition.node);
-                        if(transition.config.callback !== undefined) {
-                            transition.config.callback();
-                        }
-                    }
-                    else {
-                        this._runTransition(transition);
-                    }
-                }
-
-                if(didTransition) {
-                    layer.draw();
-                }
-            }
         }
+        /*
+         for(var n = 0; n < this.stages.length; n++) {
+         var stage = this.stages[n];
+         // run animation if available
+         if(stage.isAnimating && stage.onFrameFunc !== undefined) {
+         stage.onFrameFunc(this.frame);
+         }
+
+         // loop through layers
+         var layers = stage.getChildren();
+         for(var k = 0; k < layers.length; k++) {
+         var layer = layers[k];
+         var didTransition = false;
+         // loop through transitions
+         for(var i = 0; i < layer.transitions.length; i++) {
+         didTransition = true;
+         var transition = layer.transitions[i];
+         transition.time += this.frame.timeDiff;
+         if(transition.time >= transition.config.duration * 1000) {
+         this._endTransition.apply(transition);
+         this._clearTransition(transition.node);
+         if(transition.config.callback !== undefined) {
+         transition.config.callback();
+         }
+         }
+         else {
+         this._runTransition(transition);
+         }
+         }
+
+         if(didTransition) {
+         layer.draw();
+         }
+         }
+         }
+         */
     },
     _updateFrameObject: function() {
         var date = new Date();
@@ -193,7 +184,7 @@ Kinetic.GlobalObject = {
         }
     },
     _animationLoop: function() {
-        if(this._isaCanvasAnimating()) {
+        if(this.animations.length > 0) {
             this._updateFrameObject();
             this._runFrames();
             var that = this;
@@ -201,12 +192,18 @@ Kinetic.GlobalObject = {
                 that._animationLoop();
             });
         }
+        else {
+            this.frame.lastTime = 0;
+        }
     },
     _handleAnimation: function() {
         var that = this;
-        if(this._isaCanvasAnimating()) {
+        if(this.animations.length > 0) {
             that._animationLoop();
         }
+        else {
+            this.frame.lastTime = 0;
+        }
     }
 };
 

src/Layer.js

@@ -14,8 +14,6 @@ Kinetic.Layer = function(config) {
     this.canvas = document.createElement('canvas');
     this.context = this.canvas.getContext('2d');
     this.canvas.style.position = 'absolute';
-    this.transitions = [];
-    this.transitionIdCounter = 0;
 
     // call super constructors
     Kinetic.Container.apply(this, []);

src/Node.js

@@ -482,15 +482,19 @@ Kinetic.Node.prototype = {
     transitionTo: function(config) {
         var layer = this.getLayer();
         var that = this;
-        var duration = config.duration * 1000;
+        
-        var starts = {};
+        
+        //var duration = config.duration * 1000;
+        //var starts = {};
+        //var go = Kinetic.GlobalObject;
 
         /*
          * clear transition if one is currenlty running.
          * This make it easy to start new transitions without
          * having to explicitly cancel old ones
          */
-        Kinetic.GlobalObject._clearTransition(this);
+        /*
+        go._clearTransition(this);
 
         for(var key in config) {
             if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
@@ -510,15 +514,16 @@ Kinetic.Node.prototype = {
             }
         }
 
-        layer.transitions.push({
+        go.transitions.push({
             id: layer.transitionIdCounter++,
             time: 0,
             config: config,
             node: this,
             starts: starts
         });
+        */
 
-        Kinetic.GlobalObject._handleAnimation();
+        go._handleAnimation();
     },
     /**
      * set drag constraint

src/Stage.js

@@ -50,10 +50,6 @@ Kinetic.Stage = function(config) {
     // set stage id
     this.id = Kinetic.GlobalObject.idCounter++;
 
-    // animation support
-    this.isAnimating = false;
-    this.onFrameFunc = undefined;
-
     this._buildDOM();
     this._listen();
     this._prepareDrag();
@@ -74,20 +70,22 @@ Kinetic.Stage.prototype = {
      * @param {function} func
      */
     onFrame: function(func) {
-        this.onFrameFunc = func;
+        var go = Kinetic.GlobalObject;
+        go.animations.push({
+        	id: go.animIdCounter++,
+        	func: func
+        });
     },
     /**
      * start animation
      */
     start: function() {
-        this.isAnimating = true;
         Kinetic.GlobalObject._handleAnimation();
     },
     /**
      * stop animation
      */
     stop: function() {
-        this.isAnimating = false;
         Kinetic.GlobalObject._handleAnimation();
     },
     /**

src/Transitions.js

@@ -0,0 +1,335 @@
+Kinetic.Transition = function(obj, propFunc, func, begin, finish, duration) {
+    this._listeners = [];
+    this.addListener(this);
+    this.obj = obj;
+    this.propFunc = propFunc;
+    this.begin = begin;
+    this._pos = begin;
+    this.setDuration(duration);
+
+    this.isPlaying = false;
+
+    this._change = 0;
+
+    this.prevTime = 0;
+    this.prevPos = 0;
+    this.looping = false;
+
+    this._time = 0;
+    this._position = 0;
+    this._startTime = 0;
+    this._finish = 0;
+
+    this.name = '';
+
+    //set the tweening function
+    if(func !== null && func !== '') {
+        this.func = func;
+    }
+    else {
+        this.func = function(t, b, c, d) {
+            return c * t / d + b;
+        };
+    }
+
+    this.setFinish(finish);
+};
+
+Kinetic.Transition.prototype = {
+    setTime: function(t) {
+        this.prevTime = this._time;
+        if(t > this.getDuration()) {
+            if(this.looping) {
+                this.rewind(t - this._duration);
+                this.update();
+                this.broadcastMessage('onTweenLooped', {
+                    target: this,
+                    type: 'onTweenLooped'
+                });
+            }
+            else {
+                this._time = this._duration;
+                this.update();
+                this.stop();
+                this.broadcastMessage('onTweenFinished', {
+                    target: this,
+                    type: 'onTweenFinished'
+                });
+            }
+        }
+        else if(t < 0) {
+            this.rewind();
+            this.update();
+        }
+        else {
+            this._time = t;
+            this.update();
+        }
+    },
+    getTime: function() {
+        return this._time;
+    },
+    setDuration: function(d) {
+        this._duration = (d == null || d <= 0) ? 100000 : d;
+    },
+    getDuration: function() {
+        return this._duration;
+    },
+    setPosition: function(p) {
+        this.prevPos = this._pos;
+        //var a = this.suffixe != '' ? this.suffixe : '';
+        this.propFunc(p);
+        //+ a;
+        //this.obj(Math.round(p));
+        this._pos = p;
+        this.broadcastMessage('onTweenChanged', {
+            target: this,
+            type: 'onTweenChanged'
+        });
+    },
+    getPosition: function(t) {
+        if(t == undefined)
+            t = this._time;
+        return this.func(t, this.begin, this._change, this._duration);
+    },
+    setFinish: function(f) {
+        this._change = f - this.begin;
+    },
+    getFinish: function() {
+        return this.begin + this._change;
+    },
+    start: function() {
+        this.rewind();
+        this.startEnterFrame();
+        this.broadcastMessage('onTweenStarted', {
+            target: this,
+            type: 'onTweenStarted'
+        });
+    },
+    rewind: function(t) {
+        this.stop();
+        this._time = (t == undefined) ? 0 : t;
+        this.fixTime();
+        this.update();
+    },
+    fforward: function() {
+        this._time = this._duration;
+        this.fixTime();
+        this.update();
+    },
+    update: function() {
+        this.setPosition(this.getPosition(this._time));
+    },
+    startEnterFrame: function() {
+        this.stopEnterFrame();
+        this.isPlaying = true;
+        this.onEnterFrame();
+    },
+    onEnterFrame: function() {
+        if(this.isPlaying)
+            this.nextFrame();
+    },
+    nextFrame: function() {
+        this.setTime((this.getTimer() - this._startTime) / 1000);
+    },
+    stop: function() {
+        this.stopEnterFrame();
+        this.broadcastMessage('onTweenStopped', {
+            target: this,
+            type: 'onTweenStopped'
+        });
+    },
+    stopEnterFrame: function() {
+        this.isPlaying = false;
+    },
+    continueTo: function(finish, duration) {
+        this.begin = this._pos;
+        this.setFinish(finish);
+        if(this._duration != undefined)
+            this.setDuration(duration);
+        this.start();
+    },
+    resume: function() {
+        this.fixTime();
+        this.startEnterFrame();
+        this.broadcastMessage('onTweenResumed', {
+            target: this,
+            type: 'onTweenResumed'
+        });
+    },
+    yoyo: function() {
+        this.continueTo(this.begin, this._time);
+    },
+    addListener: function(o) {
+        this.removeListener(o);
+        return this._listeners.push(o);
+    },
+    removeListener: function(o) {
+        var a = this._listeners;
+        var i = a.length;
+        while(i--) {
+            if(a[i] == o) {
+                a.splice(i, 1);
+                return true;
+            }
+        }
+        return false;
+    },
+    broadcastMessage: function() {
+        var arr = new Array();
+        for(var i = 0; i < arguments.length; i++) {
+            arr.push(arguments[i])
+        }
+        var e = arr.shift();
+        var a = this._listeners;
+        var l = a.length;
+        for(var i = 0; i < l; i++) {
+            if(a[i][e])
+                a[i][e].apply(a[i], arr);
+        }
+    },
+    fixTime: function() {
+        this._startTime = this.getTimer() - this._time * 1000;
+    },
+    getTimer: function() {
+        return new Date().getTime() - this._time;
+    }
+};
+
+Kinetic.Transitions = {
+    backEaseIn: function(t, b, c, d, a, p) {
+        var s = 1.70158;
+        return c * (t /= d) * t * ((s + 1) * t - s) + b;
+    },
+    backEaseOut: function(t, b, c, d, a, p) {
+        var s = 1.70158;
+        return c * (( t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
+    },
+    backEaseInOut: function(t, b, c, d, a, p) {
+        var s = 1.70158;
+        if((t /= d / 2) < 1) {
+            return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
+        }
+        return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
+    },
+    elasticEaseIn: function(t, b, c, d, a, p) {
+        // added s = 0
+        var s = 0;
+        if(t === 0) {
+            return b;
+        }
+        if((t /= d) == 1) {
+            return b + c;
+        }
+        if(!p) {
+            p = d * 0.3;
+        }
+        if(!a || a < Math.abs(c)) {
+            a = c;
+            s = p / 4;
+        }
+        else {
+            s = p / (2 * Math.PI) * Math.asin(c / a);
+        }
+        return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+    },
+    elasticEaseOut: function(t, b, c, d, a, p) {
+        // added s = 0
+        var s = 0;
+        if(t === 0) {
+            return b;
+        }
+        if((t /= d) == 1) {
+            return b + c;
+        }
+        if(!p) {
+            p = d * 0.3;
+        }
+        if(!a || a < Math.abs(c)) {
+            a = c;
+            s = p / 4;
+        }
+        else {
+            s = p / (2 * Math.PI) * Math.asin(c / a);
+        }
+        return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
+    },
+    elasticEaseInOut: function(t, b, c, d, a, p) {
+        var s = 0;
+        if(t === 0) {
+            return b;
+        }
+        if((t /= d / 2) == 2) {
+            return b + c;
+        }
+        if(!p) {
+            p = d * (0.3 * 1.5);
+        }
+        if(!a || a < Math.abs(c)) {
+            a = c;
+            s = p / 4;
+        }
+        else {
+            s = p / (2 * Math.PI) * Math.asin(c / a);
+        }
+        if(t < 1) {
+            return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+        }
+        return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
+    },
+    bounceEaseOut: function(t, b, c, d) {
+        if((t /= d) < (1 / 2.75)) {
+            return c * (7.5625 * t * t) + b;
+        }
+        else if(t < (2 / 2.75)) {
+            return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
+        }
+        else if(t < (2.5 / 2.75)) {
+            return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
+        }
+        else {
+            return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
+        }
+    },
+    bounceEaseIn: function(t, b, c, d) {
+        return c - Kinetic.Transitions.bounceEaseOut(d - t, 0, c, d) + b;
+    },
+    bounceEaseInOut: function(t, b, c, d) {
+        if(t < d / 2) {
+            return Kinetic.Transitions.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;
+        }
+    },
+    // duplicate
+    /*
+     strongEaseInOut: function(t, b, c, d) {
+     return c * (t /= d) * t * t * t * t + b;
+     },
+     */
+    regularEaseIn: function(t, b, c, d) {
+        return c * (t /= d) * t + b;
+    },
+    regularEaseOut: function(t, b, c, d) {
+        return -c * (t /= d) * (t - 2) + b;
+    },
+    regularEaseInOut: function(t, b, c, d) {
+        if((t /= d / 2) < 1) {
+            return c / 2 * t * t + b;
+        }
+        return -c / 2 * ((--t) * (t - 2) - 1) + b;
+    },
+    strongEaseIn: function(t, b, c, d) {
+        return c * (t /= d) * t * t * t * t + b;
+    },
+    strongEaseOut: function(t, b, c, d) {
+        return c * (( t = t / d - 1) * t * t * t * t + 1) + b;
+    },
+    strongEaseInOut: function(t, b, c, d) {
+        if((t /= d / 2) < 1) {
+            return c / 2 * t * t * t * t * t + b;
+        }
+        return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
+    }
+};

tests/js/Test.js

@@ -10,7 +10,7 @@ function log(message) {
  * Test constructor
  */
 function Test() {
-    this.testOnly = '';
+    this.testOnly = 'TRANSITION - transition position and rotation';
     this.counter = 0;
 }
 /**

tests/js/functionalTests.js

@@ -19,12 +19,26 @@ Test.prototype.tests = {
         layer.add(rect);
         stage.add(layer);
 
-        rect.transitionTo({
+        var tween = new Kinetic.Transition(rect, function(i) {
-            x: 400,
+            rect.setScale(i);
-            y: 30,
+        }, Kinetic.Transitions.bounceEaseOut, 10, 1, 2);
-            rotation: Math.PI * 2,
+
-            duration: 1
+        stage.onFrame(function(frame) {
+            tween.onEnterFrame();
+            layer.draw();
         });
+
+        tween.start();
+        stage.start();
+
+        /*
+         rect.transitionTo({
+         x: 400,
+         y: 30,
+         rotation: Math.PI * 2,
+         duration: 1
+         });
+         */
     },
     'TRANSITION - transition position and rotation with two transitions': function(containerId) {
         var stage = new Kinetic.Stage({