diff --git a/src/Transition.js b/src/Transition.js deleted file mode 100644 index 01ed8fa9..00000000 --- a/src/Transition.js +++ /dev/null @@ -1,151 +0,0 @@ -(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 - * to stop, resume, or restart the transition - * @constructor - */ - Kinetic.Transition = function(node, config, anim) { - var that = this, - easing = config.easing || 'linear', - easingFunc = Kinetic.Tweens[easing], - duration = config.duration || 0, - configVal = null, - lastTween = null; - - this.tweens = []; - this.attrs = {}; - this.node = node; - - for (var key in config) { - if(key !== 'duration' && key !== 'easing' && key !== 'callback') { - configVal = config[key]; - that.tweens.push(createTween(this.attrs, key, easingFunc, node.getAttr(key), configVal, duration)); - } - } - - lastTween = this.tweens[this.tweens.length - 1]; - - // map first last event to transition event - lastTween.onStarted = function() { - - }; - lastTween.onStopped = function() { - anim.stop(); - }; - lastTween.onResumed = function() { - anim.start(); - }; - lastTween.onLooped = function() { - - }; - lastTween.onChanged = function() { - - }; - lastTween.onFinished = function() { - var newAttrs = {}; - // create new attr obj - for(var key in config) { - if(key !== 'duration' && key !== 'easing' && key !== 'callback') { - newAttrs[key] = config[key]; - } - } - anim.stop(); - node.setAttrs(newAttrs); - if(config.callback) { - config.callback.call(node); - } - }; - }; - /* - * Transition methods - */ - Kinetic.Transition.prototype = { - _mapTweens: function(method) { - var tweens = this.tweens, - len = tweens.length, - n; - - for(n = 0; n < len; n++) { - tweens[n][method](); - } - }, - /** - * start transition - * @name start - * @methodOf Kinetic.Transition.prototype - */ - start: function() { - this._mapTweens('start'); - }, - /** - * stop transition - * @name stop - * @methodOf Kinetic.Transition.prototype - */ - stop: function() { - for(var n = 0; n < this.tweens.length; n++) { - this.tweens[n].stop(); - } - }, - /** - * resume transition - * @name resume - * @methodOf Kinetic.Transition.prototype - */ - resume: function() { - for(var n = 0; n < this.tweens.length; n++) { - this.tweens[n].resume(); - } - }, - _onEnterFrame: function() { - 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); - } - }; - - /** - * transition node to another state. Any property that can accept a real - * 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 - * @config {Number} duration duration that the transition runs in seconds - * @config {String} [easing] easing function. can be linear, ease-in, ease-out, ease-in-out, - * back-ease-in, back-ease-out, back-ease-in-out, elastic-ease-in, elastic-ease-out, - * elastic-ease-in-out, bounce-ease-out, bounce-ease-in, bounce-ease-in-out, - * strong-ease-in, strong-ease-out, or strong-ease-in-out - * linear is the default - * @config {Function} [callback] callback function to be executed when - * transition completes - */ - Kinetic.Node.prototype.transitionTo = function(config) { - var that = this, - anim = new Kinetic.Animation(), - trans = new Kinetic.Transition(this, config, anim); - - anim.func = function() { - trans._onEnterFrame(); - }; - anim.node = this.nodeType === 'Stage' ? this : this.getLayer(); - - // auto start - trans.start(); - anim.start(); - return trans; - }; -})(); diff --git a/src/util/Tween.js b/src/util/Tween.js deleted file mode 100644 index 791a095e..00000000 --- a/src/util/Tween.js +++ /dev/null @@ -1,334 +0,0 @@ -(function() { - /* - * The Tween class was ported from an 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.Tween = function(propFunc, func, begin, finish, duration) { - this._listeners = []; - this.addListener(this); - 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 = ''; - this.func = func; - this.setFinish(finish); - }; - /* - * Tween methods - */ - Kinetic.Tween.prototype = { - setTime: function(t) { - this.prevTime = this._time; - if(t > this.getDuration()) { - if(this.looping) { - this.rewind(t - this._duration); - this.update(); - this.broadcastMessage('onLooped', { - target: this, - type: 'onLooped' - }); - } - else { - this._time = this._duration; - this.update(); - this.stop(); - this.broadcastMessage('onFinished', { - target: this, - type: 'onFinished' - }); - } - } - 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; - this.propFunc(p); - this._pos = p; - this.broadcastMessage('onChanged', { - target: this, - type: 'onChanged' - }); - }, - 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('onStarted', { - target: this, - type: 'onStarted' - }); - }, - 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('onStopped', { - target: this, - type: 'onStopped' - }); - }, - 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('onResumed', { - target: this, - type: 'onResumed' - }); - }, - 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 = []; - 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.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; - }, - 'back-ease-out': function(t, b, c, d, a, p) { - var s = 1.70158; - return c * (( t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; - }, - 'back-ease-in-out': 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; - }, - 'elastic-ease-in': 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; - }, - 'elastic-ease-out': 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); - }, - 'elastic-ease-in-out': function(t, b, c, d, a, p) { - // added s = 0 - 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; - }, - 'bounce-ease-out': 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; - } - }, - 'bounce-ease-in': function(t, b, c, d) { - return c - Kinetic.Tweens['bounce-ease-out'](d - t, 0, c, d) + b; - }, - 'bounce-ease-in-out': function(t, b, c, d) { - if(t < d / 2) { - return Kinetic.Tweens['bounce-ease-in'](t * 2, 0, c, d) * 0.5 + b; - } - else { - return Kinetic.Tweens['bounce-ease-out'](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; - }, - */ - 'ease-in': function(t, b, c, d) { - return c * (t /= d) * t + b; - }, - 'ease-out': function(t, b, c, d) { - return -c * (t /= d) * (t - 2) + b; - }, - 'ease-in-out': function(t, b, c, d) { - if((t /= d / 2) < 1) { - return c / 2 * t * t + b; - } - return -c / 2 * ((--t) * (t - 2) - 1) + b; - }, - 'strong-ease-in': function(t, b, c, d) { - return c * (t /= d) * t * t * t * t + b; - }, - 'strong-ease-out': function(t, b, c, d) { - return c * (( t = t / d - 1) * t * t * t * t + 1) + b; - }, - 'strong-ease-in-out': 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; - }, - 'linear': function(t, b, c, d) { - return c * t / d + b; - } - }; -})(); diff --git a/tests/js/unit/transitionTests.js b/tests/js/unit/transitionTests.js deleted file mode 100644 index a46948b1..00000000 --- a/tests/js/unit/transitionTests.js +++ /dev/null @@ -1,207 +0,0 @@ -Test.Modules.TRANSITION = { - 'start animation when transition completes': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ - x: 0, - y: 100, - width: 100, - height: 50, - fill: 'green', - stroke: 'black', - strokeWidth: 4, - id: 'rect' - }); - - layer.add(rect); - stage.add(layer); - - var amplitude = 150; - var period = 1000; - var centerX = 0; - - var anim = new Kinetic.Animation(function(frame) { - rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX); - }, layer); - - anim.start(); - anim.stop(); - centerX = 300; - - var go = Kinetic.Global; - - rect.transitionTo({ - x: 300, - duration: 1, - callback: function() { - test(this.getX() === 300, 'rect x is not 300'); - test(this.getId() === 'rect', 'rect id should be rect'); - anim.start(); - } - }); - }, - 'stop and resume transition': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ - x: 100, - y: 100, - width: 100, - height: 50, - fill: 'green', - stroke: 'black', - strokeWidth: 4 - }); - - layer.add(rect); - stage.add(layer); - - var transFinished = false; - - var trans = rect.transitionTo({ - duration: 0.2, - x: 400, - y: 30, - rotation: Math.PI * 2, - easing: 'bounce-ease-out', - callback: function() { - transFinished = true; - } - }); - - setTimeout(function() { - trans.stop(); - }, 100); - setTimeout(function() { - trans.resume(); - }, 100); - }, - 'transition stage': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ - x: 100, - y: 100, - width: 100, - height: 50, - fill: 'green', - stroke: 'black', - strokeWidth: 4 - }); - - layer.add(rect); - stage.add(layer); - - var trans = stage.transitionTo({ - duration: 1, - x: 400, - y: 30, - rotation: Math.PI * 2, - easing: 'bounce-ease-out', - callback: function() { - test(stage.getX() === 400, 'stage x should be 400'); - test(stage.getY() === 30, 'stage y should be 30'); - test(stage.getRotation() == Math.PI * 2, 'stage rotation should be Math.PI * 2'); - } - }); - }, - 'overwrite active transition with new transition': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ - x: 100, - y: 100, - width: 100, - height: 50, - fill: 'green', - stroke: 'black', - strokeWidth: 4 - }); - - layer.add(rect); - stage.add(layer); - - rect.transitionTo({ - x: 400, - y: 30, - duration: 500 - }); - - rect.transitionTo({ - rotation: Math.PI * 2, - duration: 1, - callback: function() { - /* - * TODO: this method fails every now and then, seemingly - * from a race condition. need to investigate - */ - /* - test(rect.getX() === 100, 'rect x should be 100'); - test(rect.getY() === 100, 'rect y should be 100'); - test(rect.getRotation() == Math.PI * 2, 'rect x should be Math.PI * 2'); - */ - } - }); - }, - 'stop transition': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ - x: 100, - y: 100, - width: 100, - height: 50, - fill: 'green', - stroke: 'black', - strokeWidth: 4, - shadowColor: 'black', - shadowOffset: 10, - shadowOpacity: 0.5 - }); - - layer.add(rect); - stage.add(layer); - - var trans = rect.transitionTo({ - duration: 2, - shadowOffsetX: 80, - x: 400, - y: 30, - rotation: Math.PI * 2, - easing: 'bounce-ease-out' - }); - - /* - setTimeout(function() { - test(rect.transAnim.isRunning(), 'rect trans should be running'); - trans.stop(); - test(!rect.transAnim.isRunning(), 'rect trans should not be running'); - }, 1000); - - setTimeout(function() { - trans.resume(); - test(rect.transAnim.isRunning(), 'rect trans should be running after resume'); - }, 1500); - */ - } -};