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

fixed clear transition bug

Browse Source
This commit is contained in:
Eric Rowell 2012-03-20 22:46:54 -07:00
parent bceedc08f6
commit 8aa5fcf560
7 changed files with 98 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/ * http://www.kineticjs.com/
* Copyright 2012, Eric Rowell * Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: Mar 19 2012 * Date: Mar 20 2012
* *
* Copyright (C) 2011 - 2012 by Eric Rowell * Copyright (C) 2011 - 2012 by Eric Rowell
* *
@ -70,7 +70,7 @@ Kinetic.GlobalObject = {
for(var i = 0; i < stage.children.length; i++) { for(var i = 0; i < stage.children.length; i++) {
var layer = stage.children[i]; var layer = stage.children[i];
if(layer.isTransitioning) { if(layer.transitions.length > 0) {
return true; return true;
} }
} }
@ -164,20 +164,13 @@ Kinetic.GlobalObject = {
} }
} }
}, },
_removeTransition: function(transition) { _clearTransition: function(node) {
var layer = transition.node.getLayer(); var layer = node.getLayer();
var id = transition.id;
for(var n = 0; n < layer.transitions.length; n++) { for(var n = 0; n < layer.transitions.length; n++) {
if(layer.transitions[n].id === id) { if(layer.transitions[n].node.id === node.id) {
layer.transitions.splice(0, 1); layer.transitions.splice(n, 1);
// exit loop
n = layer.transitions.length;
} }
} }
if(layer.transitions.length === 0) {
layer.isTransitioning = false;
}
}, },
_runFrames: function() { _runFrames: function() {
for(var n = 0; n < this.stages.length; n++) { for(var n = 0; n < this.stages.length; n++) {
@ -199,7 +192,7 @@ Kinetic.GlobalObject = {
transition.time += this.frame.timeDiff; transition.time += this.frame.timeDiff;
if(transition.time >= transition.config.duration * 1000) { if(transition.time >= transition.config.duration * 1000) {
this._endTransition.apply(transition); this._endTransition.apply(transition);
this._removeTransition(transition); this._clearTransition(transition.node);
if(transition.config.callback !== undefined) { if(transition.config.callback !== undefined) {
transition.config.callback(); transition.config.callback();
} }
@ -709,7 +702,7 @@ Kinetic.Node.prototype = {
* This make it easy to start new transitions without * This make it easy to start new transitions without
* having to explicitly cancel old ones * having to explicitly cancel old ones
*/ */
layer._clearTransition(this); Kinetic.GlobalObject._clearTransition(this);
for(var key in config) { for(var key in config) {
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') { if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
@ -737,7 +730,6 @@ Kinetic.Node.prototype = {
starts: starts starts: starts
}); });
layer.isTransitioning = true;
Kinetic.GlobalObject._handleAnimation(); Kinetic.GlobalObject._handleAnimation();
}, },
/** /**
@ -1655,7 +1647,6 @@ Kinetic.Layer = function(config) {
this.canvas.style.position = 'absolute'; this.canvas.style.position = 'absolute';
this.transitions = []; this.transitions = [];
this.transitionIdCounter = 0; this.transitionIdCounter = 0;
this.isTransitioning = false;
// call super constructors // call super constructors
Kinetic.Container.apply(this, []); Kinetic.Container.apply(this, []);
@ -1717,10 +1708,10 @@ Kinetic.Layer.prototype = {
/** /**
* clear transition if one is running * clear transition if one is running
*/ */
_clearTransition: function(shape) { _clearTransition: function(node) {
for(var n = 0; n < this.transitions.length; n++) { for(var n = 0; n < this.transitions.length; n++) {
var transition = this.transitions[n]; var transition = this.transitions[n];
if(transition.node.id === shape.id) { if(transition.node.id === node.id) {
Kinetic.GlobalObject._removeTransition(transition); Kinetic.GlobalObject._removeTransition(transition);
} }
} }

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

File diff suppressed because one or more lines are too long

19
src/GlobalObject.js
View File

@ -42,7 +42,7 @@ Kinetic.GlobalObject = {
for(var i = 0; i < stage.children.length; i++) { for(var i = 0; i < stage.children.length; i++) {
var layer = stage.children[i]; var layer = stage.children[i];
if(layer.isTransitioning) { if(layer.transitions.length > 0) {
return true; return true;
} }
} }
@ -136,20 +136,13 @@ Kinetic.GlobalObject = {
} }
} }
}, },
_removeTransition: function(transition) { _clearTransition: function(node) {
var layer = transition.node.getLayer(); var layer = node.getLayer();
var id = transition.id;
for(var n = 0; n < layer.transitions.length; n++) { for(var n = 0; n < layer.transitions.length; n++) {
if(layer.transitions[n].id === id) { if(layer.transitions[n].node.id === node.id) {
layer.transitions.splice(0, 1); layer.transitions.splice(n, 1);
// exit loop
n = layer.transitions.length;
} }
} }
if(layer.transitions.length === 0) {
layer.isTransitioning = false;
}
}, },
_runFrames: function() { _runFrames: function() {
for(var n = 0; n < this.stages.length; n++) { for(var n = 0; n < this.stages.length; n++) {
@ -171,7 +164,7 @@ Kinetic.GlobalObject = {
transition.time += this.frame.timeDiff; transition.time += this.frame.timeDiff;
if(transition.time >= transition.config.duration * 1000) { if(transition.time >= transition.config.duration * 1000) {
this._endTransition.apply(transition); this._endTransition.apply(transition);
this._removeTransition(transition); this._clearTransition(transition.node);
if(transition.config.callback !== undefined) { if(transition.config.callback !== undefined) {
transition.config.callback(); transition.config.callback();
} }

5
src/Layer.js
View File

@ -16,7 +16,6 @@ Kinetic.Layer = function(config) {
this.canvas.style.position = 'absolute'; this.canvas.style.position = 'absolute';
this.transitions = []; this.transitions = [];
this.transitionIdCounter = 0; this.transitionIdCounter = 0;
this.isTransitioning = false;
// call super constructors // call super constructors
Kinetic.Container.apply(this, []); Kinetic.Container.apply(this, []);
@ -78,10 +77,10 @@ Kinetic.Layer.prototype = {
/** /**
* clear transition if one is running * clear transition if one is running
*/ */
_clearTransition: function(shape) { _clearTransition: function(node) {
for(var n = 0; n < this.transitions.length; n++) { for(var n = 0; n < this.transitions.length; n++) {
var transition = this.transitions[n]; var transition = this.transitions[n];
if(transition.node.id === shape.id) { if(transition.node.id === node.id) {
Kinetic.GlobalObject._removeTransition(transition); Kinetic.GlobalObject._removeTransition(transition);
} }
} }

3
src/Node.js
View File

@ -455,7 +455,7 @@ Kinetic.Node.prototype = {
* This make it easy to start new transitions without * This make it easy to start new transitions without
* having to explicitly cancel old ones * having to explicitly cancel old ones
*/ */
layer._clearTransition(this); Kinetic.GlobalObject._clearTransition(this);
for(var key in config) { for(var key in config) {
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') { if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
@ -483,7 +483,6 @@ Kinetic.Node.prototype = {
starts: starts starts: starts
}); });
layer.isTransitioning = true;
Kinetic.GlobalObject._handleAnimation(); Kinetic.GlobalObject._handleAnimation();
}, },
/** /**

2
tests/js/Test.js
View File

@ -10,7 +10,7 @@ function log(message) {
* Test constructor * Test constructor
*/ */
function Test() { function Test() {
this.testOnly = ''; this.testOnly = 'TRANSITION - ease-in, ease-out, ease-in-out hovers';
this.counter = 0; this.counter = 0;
} }
/** /**

76
tests/js/functionalTests.js
View File

@ -251,6 +251,82 @@ Test.prototype.tests = {
stage.add(layer); stage.add(layer);
}, },
'TRANSITION - ease-in, ease-out, ease-in-out hovers': function(containerId) {
function addHovers(shape, easing) {
shape.on("mouseover", function() {
this.transitionTo({
scale: {
x: 1.5,
y: 1.5
},
duration: 1,
easing: easing
});
});
shape.on("mouseout", function() {
this.transitionTo({
scale: {
x: 1,
y: 1
},
duration: 1,
easing: easing
});
});
}
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var greenBox = new Kinetic.Rect({
x: 50,
y: stage.height / 2 - 25,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
x: 50,
y: 25
}
});
var blueBox = new Kinetic.Rect({
x: stage.width / 2 - 50,
y: stage.height / 2 - 25,
width: 100,
height: 50,
fill: 'blue',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
x: 50,
y: 25
}
});
var redBox = new Kinetic.Rect({
x: 428,
y: stage.height / 2 - 25,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
x: 50,
y: 25
}
});
addHovers(greenBox, "ease-in");
addHovers(blueBox, "ease-out");
addHovers(redBox, "ease-in-out");
layer.add(greenBox);
layer.add(blueBox);
layer.add(redBox);
stage.add(layer);
},
'EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap': function(containerId) { 'EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200); var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();