diff --git a/src/Node.js b/src/Node.js index d125c58c..f085de4f 100644 --- a/src/Node.js +++ b/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 diff --git a/src/Transition.js b/src/Transition.js index d2ff22a2..866a46f4 100644 --- a/src/Transition.js +++ b/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 - function addTween(c, attrs, obj, rootObj) { - for(var key in c) { - if(key !== 'duration' && key !== 'easing' && key !== 'callback') { - // if val is an object then traverse - if(Kinetic.Type._isObject(c[key])) { - obj[key] = {}; - addTween(c[key], attrs[key], obj[key], rootObj); - } - else { - that._add(that._getTween(attrs, key, c[key], obj, rootObj)); + for (var key in config) { + if(key !== 'duration' && key !== 'easing' && key !== 'callback') { + configVal = config[key]; + obj = node.getAttr(key); + if(Kinetic.Type._isObject(obj)) { + configValX = configVal.x; + configValY = configVal.y; + + this.attrs[key] = {}; + if (configValX !== undefined) { + 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; } }; diff --git a/src/util/Tween.js b/src/util/Tween.js index df8ae853..791a095e 100644 --- a/src/util/Tween.js +++ b/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; diff --git a/tests/js/manualTests.js b/tests/js/manualTests.js index b3405e0e..ebf0dae3 100644 --- a/tests/js/manualTests.js +++ b/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() {