fixed glitchy flash on transitions when applying multiple transitions to the same node at different times

This commit is contained in:
Eric Rowell 2012-04-28 17:45:13 -07:00
parent bd17b54aa8
commit e8dcb8e584
5 changed files with 84 additions and 36 deletions

56
dist/kinetic-core.js vendored
View File

@ -67,19 +67,6 @@ Kinetic.GlobalObject = {
}
}
},
_addAnimation: function(anim) {
anim.id = this.animIdCounter++;
this.animations.push(anim);
},
_removeAnimation: function(id) {
var animations = this.animations;
for(var n = 0; n < animations.length; n++) {
if(animations[n].id === id) {
this.animations.splice(n, 1);
return false;
}
}
},
_pullNodes: function(stage) {
var tempNodes = this.tempNodes;
for(var n = 0; n < tempNodes.length; n++) {
@ -92,6 +79,23 @@ Kinetic.GlobalObject = {
}
}
},
/*
* animation support
*/
_addAnimation: function(anim) {
anim.id = this.animIdCounter++;
this.animations.push(anim);
},
_removeAnimation: function(anim) {
var id = anim.id;
var animations = this.animations;
for(var n = 0; n < animations.length; n++) {
if(animations[n].id === id) {
this.animations.splice(n, 1);
return false;
}
}
},
_runFrames: function() {
var nodes = {};
for(var n = 0; n < this.animations.length; n++) {
@ -140,6 +144,9 @@ Kinetic.GlobalObject = {
this.frame.lastTime = 0;
}
},
/*
* utilities
*/
_isElement: function(obj) {
return !!(obj && obj.nodeType == 1);
},
@ -829,9 +836,22 @@ Kinetic.Node.prototype = {
* transition completes
*/
transitionTo: function(config) {
var go = Kinetic.GlobalObject;
/*
* clear transition if one is currently running for this
* node
*/
if(this.transAnim !== undefined) {
go._removeAnimation(this.transAnim);
this.transAnim = undefined;
}
/*
* create new transition
*/
var node = this.nodeType === 'Stage' ? this : this.getLayer();
var that = this;
var go = Kinetic.GlobalObject;
var trans = new Kinetic.Transition(this, config);
var anim = {
func: function() {
@ -840,6 +860,9 @@ Kinetic.Node.prototype = {
node: node
};
// store reference to transition animation
this.transAnim = anim;
/*
* adding the animation with the addAnimation
* method auto generates an id
@ -848,7 +871,8 @@ Kinetic.Node.prototype = {
// subscribe to onFinished for first tween
trans.tweens[0].onFinished = function() {
go._removeAnimation(anim.id);
go._removeAnimation(anim);
this.transAnim = undefined;
if(config.callback !== undefined) {
config.callback();
}
@ -1291,7 +1315,7 @@ Kinetic.Stage.prototype = {
*/
stop: function() {
var go = Kinetic.GlobalObject;
go._removeAnimation(this.anim.id);
go._removeAnimation(this.anim);
go._handleAnimation();
},
/**

File diff suppressed because one or more lines are too long

View File

@ -39,19 +39,6 @@ Kinetic.GlobalObject = {
}
}
},
_addAnimation: function(anim) {
anim.id = this.animIdCounter++;
this.animations.push(anim);
},
_removeAnimation: function(id) {
var animations = this.animations;
for(var n = 0; n < animations.length; n++) {
if(animations[n].id === id) {
this.animations.splice(n, 1);
return false;
}
}
},
_pullNodes: function(stage) {
var tempNodes = this.tempNodes;
for(var n = 0; n < tempNodes.length; n++) {
@ -64,6 +51,23 @@ Kinetic.GlobalObject = {
}
}
},
/*
* animation support
*/
_addAnimation: function(anim) {
anim.id = this.animIdCounter++;
this.animations.push(anim);
},
_removeAnimation: function(anim) {
var id = anim.id;
var animations = this.animations;
for(var n = 0; n < animations.length; n++) {
if(animations[n].id === id) {
this.animations.splice(n, 1);
return false;
}
}
},
_runFrames: function() {
var nodes = {};
for(var n = 0; n < this.animations.length; n++) {
@ -112,6 +116,9 @@ Kinetic.GlobalObject = {
this.frame.lastTime = 0;
}
},
/*
* utilities
*/
_isElement: function(obj) {
return !!(obj && obj.nodeType == 1);
},

View File

@ -660,9 +660,22 @@ Kinetic.Node.prototype = {
* transition completes
*/
transitionTo: function(config) {
var go = Kinetic.GlobalObject;
/*
* clear transition if one is currently running for this
* node
*/
if(this.transAnim !== undefined) {
go._removeAnimation(this.transAnim);
this.transAnim = undefined;
}
/*
* create new transition
*/
var node = this.nodeType === 'Stage' ? this : this.getLayer();
var that = this;
var go = Kinetic.GlobalObject;
var trans = new Kinetic.Transition(this, config);
var anim = {
func: function() {
@ -671,6 +684,9 @@ Kinetic.Node.prototype = {
node: node
};
// store reference to transition animation
this.transAnim = anim;
/*
* adding the animation with the addAnimation
* method auto generates an id
@ -679,7 +695,8 @@ Kinetic.Node.prototype = {
// subscribe to onFinished for first tween
trans.tweens[0].onFinished = function() {
go._removeAnimation(anim.id);
go._removeAnimation(anim);
this.transAnim = undefined;
if(config.callback !== undefined) {
config.callback();
}

View File

@ -76,7 +76,7 @@ Kinetic.Stage.prototype = {
*/
stop: function() {
var go = Kinetic.GlobalObject;
go._removeAnimation(this.anim.id);
go._removeAnimation(this.anim);
go._handleAnimation();
},
/**