lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-27 21:21:51 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added first phase of transition event subscription

Browse Source
This commit is contained in:
Eric Rowell 2012-04-03 14:08:06 -07:00
parent a6b526ee76
commit 9e3baf69c1
5 changed files with 85 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
dist/kinetic-core.js vendored
View File

@ -618,8 +618,9 @@ Kinetic.Node.prototype = {
var that = this; var that = this;
var go = Kinetic.GlobalObject; var go = Kinetic.GlobalObject;
// add transition for each property
for(var key in config) { for(var key in config) {
if(key !== 'duration' && key !== 'easing') { if(key !== 'duration' && key !== 'easing' && key !== 'on') {
if(config[key].x === undefined && config[key].y === undefined) { if(config[key].x === undefined && config[key].y === undefined) {
this._addTransition(key, config); this._addTransition(key, config);
@ -713,6 +714,20 @@ Kinetic.Node.prototype = {
return m; 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) { _addTransition: function(key, config) {
var easing = config.easing; var easing = config.easing;
if(easing === undefined) { if(easing === undefined) {
@ -724,24 +739,25 @@ Kinetic.Node.prototype = {
var layer = this.getLayer(); var layer = this.getLayer();
var id = go.animIdCounter++; var id = go.animIdCounter++;
var tween = new Kinetic.Transition(that, function(i) { var trans = new Kinetic.Transition(that, function(i) {
that[key] = i; that[key] = i;
}, Kinetic.Transitions[easing], that[key], config[key], config.duration); }, Kinetic.Transitions[easing], that[key], config[key], config.duration);
go.addAnimation({ go.addAnimation({
id: id, id: id,
func: function() { func: function() {
tween.onEnterFrame(); trans.onEnterFrame();
}, },
drawId: layer.id, drawId: layer.id,
draw: layer draw: layer
}); });
tween.onTweenFinished = function() { trans.onFinished = function() {
go.removeAnimation(id); go.removeAnimation(id);
}; };
tween.start(); this._addTransitionListeners(trans, config);
trans.start();
}, },
_addComponentTransition: function(key, prop, config) { _addComponentTransition: function(key, prop, config) {
var easing = config.easing; var easing = config.easing;
@ -755,24 +771,24 @@ Kinetic.Node.prototype = {
if(config[key][prop] !== undefined) { if(config[key][prop] !== undefined) {
var id = go.animIdCounter++; var id = go.animIdCounter++;
var tween = new Kinetic.Transition(that, function(i) { var trans = new Kinetic.Transition(that, function(i) {
that[key][prop] = i; that[key][prop] = i;
}, Kinetic.Transitions[easing], that[key][prop], config[key][prop], config.duration); }, Kinetic.Transitions[easing], that[key][prop], config[key][prop], config.duration);
go.addAnimation({ go.addAnimation({
id: id, id: id,
func: function() { func: function() {
tween.onEnterFrame(); trans.onEnterFrame();
}, },
drawId: layer.id, drawId: layer.id,
draw: layer draw: layer
}); });
tween.onTweenFinished = function() { trans.onFinished = function() {
go.removeAnimation(id); go.removeAnimation(id);
}; };
this._addTransitionListeners(trans, config);
tween.start(); trans.start();
} }
}, },
/** /**
@ -2888,18 +2904,18 @@ Kinetic.Transition.prototype = {
if(this.looping) { if(this.looping) {
this.rewind(t - this._duration); this.rewind(t - this._duration);
this.update(); this.update();
this.broadcastMessage('onTweenLooped', { this.broadcastMessage('onLooped', {
target: this, target: this,
type: 'onTweenLooped' type: 'onLooped'
}); });
} }
else { else {
this._time = this._duration; this._time = this._duration;
this.update(); this.update();
this.stop(); this.stop();
this.broadcastMessage('onTweenFinished', { this.broadcastMessage('onFinished', {
target: this, target: this,
type: 'onTweenFinished' type: 'onFinished'
}); });
} }
} }
@ -2928,9 +2944,9 @@ Kinetic.Transition.prototype = {
//+ a; //+ a;
//this.obj(Math.round(p)); //this.obj(Math.round(p));
this._pos = p; this._pos = p;
this.broadcastMessage('onTweenChanged', { this.broadcastMessage('onChanged', {
target: this, target: this,
type: 'onTweenChanged' type: 'onChanged'
}); });
}, },
getPosition: function(t) { getPosition: function(t) {
@ -2948,9 +2964,9 @@ Kinetic.Transition.prototype = {
start: function() { start: function() {
this.rewind(); this.rewind();
this.startEnterFrame(); this.startEnterFrame();
this.broadcastMessage('onTweenStarted', { this.broadcastMessage('onStarted', {
target: this, target: this,
type: 'onTweenStarted' type: 'onStarted'
}); });
}, },
rewind: function(t) { rewind: function(t) {
@ -2982,9 +2998,9 @@ Kinetic.Transition.prototype = {
}, },
stop: function() { stop: function() {
this.stopEnterFrame(); this.stopEnterFrame();
this.broadcastMessage('onTweenStopped', { this.broadcastMessage('onStopped', {
target: this, target: this,
type: 'onTweenStopped' type: 'onStopped'
}); });
}, },
stopEnterFrame: function() { stopEnterFrame: function() {
@ -3000,9 +3016,9 @@ Kinetic.Transition.prototype = {
resume: function() { resume: function() {
this.fixTime(); this.fixTime();
this.startEnterFrame(); this.startEnterFrame();
this.broadcastMessage('onTweenResumed', { this.broadcastMessage('onResumed', {
target: this, target: this,
type: 'onTweenResumed' type: 'onResumed'
}); });
}, },
yoyo: function() { yoyo: function() {

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

36
src/Node.js
View File

@ -484,8 +484,9 @@ Kinetic.Node.prototype = {
var that = this; var that = this;
var go = Kinetic.GlobalObject; var go = Kinetic.GlobalObject;
// add transition for each property
for(var key in config) { for(var key in config) {
if(key !== 'duration' && key !== 'easing') { if(key !== 'duration' && key !== 'easing' && key !== 'on') {
if(config[key].x === undefined && config[key].y === undefined) { if(config[key].x === undefined && config[key].y === undefined) {
this._addTransition(key, config); this._addTransition(key, config);
@ -579,6 +580,20 @@ Kinetic.Node.prototype = {
return m; 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) { _addTransition: function(key, config) {
var easing = config.easing; var easing = config.easing;
if(easing === undefined) { if(easing === undefined) {
@ -590,24 +605,25 @@ Kinetic.Node.prototype = {
var layer = this.getLayer(); var layer = this.getLayer();
var id = go.animIdCounter++; var id = go.animIdCounter++;
var tween = new Kinetic.Transition(that, function(i) { var trans = new Kinetic.Transition(that, function(i) {
that[key] = i; that[key] = i;
}, Kinetic.Transitions[easing], that[key], config[key], config.duration); }, Kinetic.Transitions[easing], that[key], config[key], config.duration);
go.addAnimation({ go.addAnimation({
id: id, id: id,
func: function() { func: function() {
tween.onEnterFrame(); trans.onEnterFrame();
}, },
drawId: layer.id, drawId: layer.id,
draw: layer draw: layer
}); });
tween.onTweenFinished = function() { trans.onFinished = function() {
go.removeAnimation(id); go.removeAnimation(id);
}; };
tween.start(); this._addTransitionListeners(trans, config);
trans.start();
}, },
_addComponentTransition: function(key, prop, config) { _addComponentTransition: function(key, prop, config) {
var easing = config.easing; var easing = config.easing;
@ -621,24 +637,24 @@ Kinetic.Node.prototype = {
if(config[key][prop] !== undefined) { if(config[key][prop] !== undefined) {
var id = go.animIdCounter++; var id = go.animIdCounter++;
var tween = new Kinetic.Transition(that, function(i) { var trans = new Kinetic.Transition(that, function(i) {
that[key][prop] = i; that[key][prop] = i;
}, Kinetic.Transitions[easing], that[key][prop], config[key][prop], config.duration); }, Kinetic.Transitions[easing], that[key][prop], config[key][prop], config.duration);
go.addAnimation({ go.addAnimation({
id: id, id: id,
func: function() { func: function() {
tween.onEnterFrame(); trans.onEnterFrame();
}, },
drawId: layer.id, drawId: layer.id,
draw: layer draw: layer
}); });
tween.onTweenFinished = function() { trans.onFinished = function() {
go.removeAnimation(id); go.removeAnimation(id);
}; };
this._addTransitionListeners(trans, config);
tween.start(); trans.start();
} }
}, },
/** /**

24
src/Transitions.js
View File

@ -30,18 +30,18 @@ Kinetic.Transition.prototype = {
if(this.looping) { if(this.looping) {
this.rewind(t - this._duration); this.rewind(t - this._duration);
this.update(); this.update();
this.broadcastMessage('onTweenLooped', { this.broadcastMessage('onLooped', {
target: this, target: this,
type: 'onTweenLooped' type: 'onLooped'
}); });
} }
else { else {
this._time = this._duration; this._time = this._duration;
this.update(); this.update();
this.stop(); this.stop();
this.broadcastMessage('onTweenFinished', { this.broadcastMessage('onFinished', {
target: this, target: this,
type: 'onTweenFinished' type: 'onFinished'
}); });
} }
} }
@ -70,9 +70,9 @@ Kinetic.Transition.prototype = {
//+ a; //+ a;
//this.obj(Math.round(p)); //this.obj(Math.round(p));
this._pos = p; this._pos = p;
this.broadcastMessage('onTweenChanged', { this.broadcastMessage('onChanged', {
target: this, target: this,
type: 'onTweenChanged' type: 'onChanged'
}); });
}, },
getPosition: function(t) { getPosition: function(t) {
@ -90,9 +90,9 @@ Kinetic.Transition.prototype = {
start: function() { start: function() {
this.rewind(); this.rewind();
this.startEnterFrame(); this.startEnterFrame();
this.broadcastMessage('onTweenStarted', { this.broadcastMessage('onStarted', {
target: this, target: this,
type: 'onTweenStarted' type: 'onStarted'
}); });
}, },
rewind: function(t) { rewind: function(t) {
@ -124,9 +124,9 @@ Kinetic.Transition.prototype = {
}, },
stop: function() { stop: function() {
this.stopEnterFrame(); this.stopEnterFrame();
this.broadcastMessage('onTweenStopped', { this.broadcastMessage('onStopped', {
target: this, target: this,
type: 'onTweenStopped' type: 'onStopped'
}); });
}, },
stopEnterFrame: function() { stopEnterFrame: function() {
@ -142,9 +142,9 @@ Kinetic.Transition.prototype = {
resume: function() { resume: function() {
this.fixTime(); this.fixTime();
this.startEnterFrame(); this.startEnterFrame();
this.broadcastMessage('onTweenResumed', { this.broadcastMessage('onResumed', {
target: this, target: this,
type: 'onTweenResumed' type: 'onResumed'
}); });
}, },
yoyo: function() { yoyo: function() {

7
tests/js/functionalTests.js
View File

@ -24,7 +24,12 @@ Test.prototype.tests = {
x: 400, x: 400,
y: 30, y: 30,
rotation: Math.PI * 2, 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) { 'TRANSITION - transition position and rotation with two transitions': function(containerId) {