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

cleaned up animation and transition interaction

Browse Source
This commit is contained in:
Eric Rowell 2012-03-18 19:50:20 -07:00
parent 84e7e71461
commit 70fe63b2b6
9 changed files with 127 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
dist/kinetic-core.js vendored
View File

@ -41,7 +41,6 @@ var Kinetic = {};
Kinetic.GlobalObject = {
stages: [],
idCounter: 0,
isAnimating: false,
frame: {
time: 0,
timeDiff: 0,
@ -64,9 +63,17 @@ Kinetic.GlobalObject = {
},
_isaCanvasAnimating: function() {
for(var n = 0; n < this.stages.length; n++) {
if(this.stages[n].isAnimating) {
var stage = this.stages[n];
if(stage.isAnimating) {
return true;
}
for(var i = 0; i < stage.children.length; i++) {
var layer = stage.children[i];
if(layer.isTransitioning) {
return true;
}
}
}
return false;
},
@ -111,13 +118,17 @@ Kinetic.GlobalObject = {
_removeTransition: function(transition) {
var layer = transition.node.getLayer();
var id = transition.id;
for(var n = 0; n < layer.transitions.length; n++) {
if(layer.transitions[n].id === id) {
layer.transitions.splice(0, 1);
return false;
// exit loop
n = layer.transitions.length;
}
}
if(layer.transitions.length === 0) {
layer.isTransitioning = false;
}
},
_runFrames: function() {
for(var n = 0; n < this.stages.length; n++) {
@ -171,7 +182,7 @@ Kinetic.GlobalObject = {
}
},
_animationLoop: function() {
if(this.isAnimating) {
if(this._isaCanvasAnimating()) {
this._updateFrameObject();
this._runFrames();
var that = this;
@ -182,12 +193,10 @@ Kinetic.GlobalObject = {
},
_handleAnimation: function() {
var that = this;
if(!this.isAnimating && this._isaCanvasAnimating()) {
this.isAnimating = true;
if(this._isaCanvasAnimating()) {
that._animationLoop();
}
else if(this.isAnimating && !this._isaCanvasAnimating()) {
this.isAnimating = false;
else {
this.frame.lastTime = 0;
}
}
@ -672,6 +681,9 @@ Kinetic.Node.prototype = {
node: this,
changes: changes
});
layer.isTransitioning = true;
Kinetic.GlobalObject._handleAnimation();
},
/**
* set drag constraint
@ -885,6 +897,7 @@ Kinetic.Container.prototype = {
* Stage constructor. A stage is used to contain multiple layers and handle
* animations
* @constructor
* @augments Kinetic.Container
* @param {String|DomElement} cont Container id or DOM element
* @param {int} width
* @param {int} height
@ -1587,6 +1600,7 @@ Kinetic.Layer = function(config) {
this.canvas.style.position = 'absolute';
this.transitions = [];
this.transitionIdCounter = 0;
this.isTransitioning = false;
// call super constructors
Kinetic.Container.apply(this, []);

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

File diff suppressed because one or more lines are too long

27
src/GlobalObject.js
View File

@ -13,7 +13,6 @@ var Kinetic = {};
Kinetic.GlobalObject = {
stages: [],
idCounter: 0,
isAnimating: false,
frame: {
time: 0,
timeDiff: 0,
@ -36,9 +35,17 @@ Kinetic.GlobalObject = {
},
_isaCanvasAnimating: function() {
for(var n = 0; n < this.stages.length; n++) {
if(this.stages[n].isAnimating) {
var stage = this.stages[n];
if(stage.isAnimating) {
return true;
}
for(var i = 0; i < stage.children.length; i++) {
var layer = stage.children[i];
if(layer.isTransitioning) {
return true;
}
}
}
return false;
},
@ -83,13 +90,17 @@ Kinetic.GlobalObject = {
_removeTransition: function(transition) {
var layer = transition.node.getLayer();
var id = transition.id;
for(var n = 0; n < layer.transitions.length; n++) {
if(layer.transitions[n].id === id) {
layer.transitions.splice(0, 1);
return false;
// exit loop
n = layer.transitions.length;
}
}
if(layer.transitions.length === 0) {
layer.isTransitioning = false;
}
},
_runFrames: function() {
for(var n = 0; n < this.stages.length; n++) {
@ -143,7 +154,7 @@ Kinetic.GlobalObject = {
}
},
_animationLoop: function() {
if(this.isAnimating) {
if(this._isaCanvasAnimating()) {
this._updateFrameObject();
this._runFrames();
var that = this;
@ -154,12 +165,10 @@ Kinetic.GlobalObject = {
},
_handleAnimation: function() {
var that = this;
if(!this.isAnimating && this._isaCanvasAnimating()) {
this.isAnimating = true;
if(this._isaCanvasAnimating()) {
that._animationLoop();
}
else if(this.isAnimating && !this._isaCanvasAnimating()) {
this.isAnimating = false;
else {
this.frame.lastTime = 0;
}
}

1
src/Layer.js
View File

@ -16,6 +16,7 @@ Kinetic.Layer = function(config) {
this.canvas.style.position = 'absolute';
this.transitions = [];
this.transitionIdCounter = 0;
this.isTransitioning = false;
// call super constructors
Kinetic.Container.apply(this, []);

3
src/Node.js
View File

@ -470,6 +470,9 @@ Kinetic.Node.prototype = {
node: this,
changes: changes
});
layer.isTransitioning = true;
Kinetic.GlobalObject._handleAnimation();
},
/**
* set drag constraint

1
src/Stage.js
View File

@ -5,6 +5,7 @@
* Stage constructor. A stage is used to contain multiple layers and handle
* animations
* @constructor
* @augments Kinetic.Container
* @param {String|DomElement} cont Container id or DOM element
* @param {int} width
* @param {int} height

2
tests/js/Test.js
View File

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

4
tests/js/functionalTests.js
View File

@ -76,6 +76,10 @@ Test.prototype.tests = {
});
stage.start();
setTimeout(function() {
stage.stop();
}, 1000);
},
'EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);

96
tests/js/unitTests.js
View File

@ -200,6 +200,76 @@ Test.prototype.tests = {
layer.add(group);
stage.add(layer);
},
'GROUPS - hide group': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
group.add(circle);
layer.add(group);
stage.add(layer);
group.hide();
layer.draw();
},
'GROUPS - create two groups, move first group': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var greenLayer = new Kinetic.Layer();
var blueLayer = new Kinetic.Layer();
var greenGroup = new Kinetic.Group();
var blueGroup = new Kinetic.Group();
var greenCircle = new Kinetic.Circle({
x: stage.width / 2 - 100,
y: stage.height / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
var blueCircle = new Kinetic.Circle({
x: stage.width / 2 + 100,
y: stage.height / 2,
radius: 70,
fill: 'blue',
stroke: 'black',
strokeWidth: 4
});
greenGroup.add(greenCircle);
blueGroup.add(blueCircle);
greenLayer.add(greenGroup);
blueLayer.add(blueGroup);
stage.add(greenLayer);
stage.add(blueLayer);
blueLayer.removeChildren();
var blueGroup2 = new Kinetic.Group();
var blueCircle2 = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: 'blue',
stroke: 'black',
strokeWidth: 4
});
blueGroup2.add(blueCircle2);
blueLayer.add(blueGroup2);
blueLayer.draw();
blueGroup2.setPosition(100, 0);
blueLayer.draw();
},
////////////////////////////////////////////////////////////////////////
// SHAPES tests
////////////////////////////////////////////////////////////////////////
@ -850,26 +920,6 @@ Test.prototype.tests = {
circle.show();
layer.draw();
},
'GROUPS - hide group': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
group.add(circle);
layer.add(group);
stage.add(layer);
group.hide();
layer.draw();
},
'SHAPES - set shape alpha to 0.5': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
@ -1212,16 +1262,16 @@ Test.prototype.tests = {
layer.draw();
});
test(stage.isAnimating === false, 'stage should not be animating');
test(Kinetic.GlobalObject.isAnimating === false, 'global object should not be animating');
test(Kinetic.GlobalObject._isaCanvasAnimating() === false, 'global object should not be animating');
stage.start();
test(stage.isAnimating === true, 'stage should be animating');
test(Kinetic.GlobalObject.isAnimating === true, 'global object should be animating');
test(Kinetic.GlobalObject._isaCanvasAnimating() === true, 'global object should be animating');
stage.stop();
test(stage.isAnimating === false, 'stage should not be animating');
test(Kinetic.GlobalObject.isAnimating === false, 'global object should not be animating');
test(Kinetic.GlobalObject._isaCanvasAnimating() === false, 'global object should not be animating');
}
};