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

moved animation logic into Animation.js. Global.js now only contains logic and properties that operate on stages

Browse Source
This commit is contained in:
Eric Rowell 2012-07-03 23:00:52 -07:00
parent 6126c73a84
commit de7cab4cf3
13 changed files with 228 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Thorfile
View File

@ -3,7 +3,7 @@ require 'json/pure'
class Build < Thor
# This is the list of files to concatenate. The first file will appear at the top of the final file. All files are relative to the lib directory.
FILES = [
"license.js", "src/Global.js", "src/util/Type.js", "src/util/Class.js", "src/Node.js", "src/Container.js", "src/Stage.js",
"license.js", "src/Global.js", "src/util/Type.js", "src/util/Class.js", "src/Animation.js", "src/Node.js", "src/Container.js", "src/Stage.js",
"src/Layer.js", "src/Group.js", "src/Shape.js", "src/shapes/Rect.js", "src/shapes/Ellipse.js", "src/shapes/Image.js",
"src/shapes/Sprite.js", "src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js",
"src/shapes/Line.js", "src/shapes/Path.js", "src/util/Transform.js", "src/Transition.js", "src/util/Tween.js"

208
dist/kinetic-core.js vendored
View File

@ -27,33 +27,20 @@
*/
///////////////////////////////////////////////////////////////////////
// Global Object
// Global
///////////////////////////////////////////////////////////////////////
/**
* Kinetic Namespace
* @namespace
*/
var Kinetic = {};
/**
* Kinetic Global
* @property {Object} Global
*/
Kinetic.Global = {
stages: [],
idCounter: 0,
tempNodes: [],
animations: [],
animIdCounter: 0,
animRunning: false,
maxDragTimeInterval: 20,
frame: {
time: 0,
timeDiff: 0,
lastTime: 0
},
drag: {
moving: false,
node: undefined,
offset: {
x: 0,
y: 0
@ -71,83 +58,12 @@ Kinetic.Global = {
n -= 1;
}
}
},
/*
* 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++) {
var anim = this.animations[n];
if(anim.node && anim.node._id !== undefined) {
nodes[anim.node._id] = anim.node;
}
anim.func(this.frame);
}
for(var key in nodes) {
nodes[key].draw();
}
},
_updateFrameObject: function() {
var date = new Date();
var time = date.getTime();
if(this.frame.lastTime === 0) {
this.frame.lastTime = time;
}
else {
this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff;
}
},
_animationLoop: function() {
if(this.animations.length > 0) {
this._updateFrameObject();
this._runFrames();
var that = this;
requestAnimFrame(function() {
that._animationLoop();
});
}
else {
this.animRunning = false;
this.frame.lastTime = 0;
}
},
_handleAnimation: function() {
var that = this;
if(!this.animRunning) {
this.animRunning = true;
that._animationLoop();
}
else {
this.frame.lastTime = 0;
}
}
};
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
///////////////////////////////////////////////////////////////////////
// Type
///////////////////////////////////////////////////////////////////////
/*
* utilities that determine data type and transform
* one type into another
@ -355,6 +271,9 @@ Kinetic.Type = {
}
};
///////////////////////////////////////////////////////////////////////
// Class
///////////////////////////////////////////////////////////////////////
/* Simple JavaScript Inheritance
* By John Resig http://ejohn.org/
* MIT Licensed.
@ -415,6 +334,90 @@ Kinetic.Type = {
return Class;
};
})();
///////////////////////////////////////////////////////////////////////
// Animation
///////////////////////////////////////////////////////////////////////
Kinetic.Animation = {
animations: [],
animIdCounter: 0,
animRunning: false,
frame: {
time: 0,
timeDiff: 0,
lastTime: 0
},
_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++) {
var anim = this.animations[n];
if(anim.node && anim.node._id !== undefined) {
nodes[anim.node._id] = anim.node;
}
anim.func(this.frame);
}
for(var key in nodes) {
nodes[key].draw();
}
},
_updateFrameObject: function() {
var date = new Date();
var time = date.getTime();
if(this.frame.lastTime === 0) {
this.frame.lastTime = time;
}
else {
this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff;
}
},
_animationLoop: function() {
if(this.animations.length > 0) {
this._updateFrameObject();
this._runFrames();
var that = this;
requestAnimFrame(function() {
that._animationLoop();
});
}
else {
this.animRunning = false;
this.frame.lastTime = 0;
}
},
_handleAnimation: function() {
var that = this;
if(!this.animRunning) {
this.animRunning = true;
that._animationLoop();
}
else {
this.frame.lastTime = 0;
}
}
};
requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
///////////////////////////////////////////////////////////////////////
// Node
///////////////////////////////////////////////////////////////////////
@ -1003,14 +1006,14 @@ Kinetic.Node = Kinetic.Class.extend({
* transition completes
*/
transitionTo: function(config) {
var go = Kinetic.Global;
var a = Kinetic.Animation;
/*
* clear transition if one is currently running for this
* node
*/
if(this.transAnim !== undefined) {
go._removeAnimation(this.transAnim);
a._removeAnimation(this.transAnim);
this.transAnim = undefined;
}
@ -1034,12 +1037,12 @@ Kinetic.Node = Kinetic.Class.extend({
* adding the animation with the addAnimation
* method auto generates an id
*/
go._addAnimation(anim);
a._addAnimation(anim);
// subscribe to onFinished for first tween
trans.onFinished = function() {
// remove animation
go._removeAnimation(anim);
a._removeAnimation(anim);
that.transAnim = undefined;
// callback
@ -1052,7 +1055,7 @@ Kinetic.Node = Kinetic.Class.extend({
// auto start
trans.start();
go._handleAnimation();
a._handleAnimation();
return trans;
},
@ -1676,7 +1679,6 @@ Kinetic.Stage = Kinetic.Container.extend({
* @param {function} func
*/
onFrame: function(func) {
var go = Kinetic.Global;
this.anim = {
func: func
};
@ -1686,9 +1688,9 @@ Kinetic.Stage = Kinetic.Container.extend({
*/
start: function() {
if(!this.animRunning) {
var go = Kinetic.Global;
go._addAnimation(this.anim);
go._handleAnimation();
var a = Kinetic.Animation;
a._addAnimation(this.anim);
a._handleAnimation();
this.animRunning = true;
}
},
@ -1696,8 +1698,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* stop animation
*/
stop: function() {
var go = Kinetic.Global;
go._removeAnimation(this.anim);
Kinetic.Animation._removeAnimation(this.anim);
this.animRunning = false;
},
/**
@ -4792,6 +4793,9 @@ Kinetic.Node.addGettersSetters(Kinetic.Path, ['data']);
* @name getData
* @methodOf Kinetic.Path.prototype
*/
///////////////////////////////////////////////////////////////////////
// Transform
///////////////////////////////////////////////////////////////////////
/*
* Last updated November 2011
* By Simon Sarris
@ -4909,6 +4913,9 @@ Kinetic.Transform.prototype = {
}
};
///////////////////////////////////////////////////////////////////////
// Transition
///////////////////////////////////////////////////////////////////////
/**
* Transition constructor. The transitionTo() Node method
* returns a reference to the transition object which you can use
@ -5003,6 +5010,9 @@ Kinetic.Transition.prototype = {
}
};
///////////////////////////////////////////////////////////////////////
// Tween
///////////////////////////////////////////////////////////////////////
/*
* The Tween class was ported from an Adobe Flash Tween library
* to JavaScript by Xaric. In the context of KineticJS, a Tween is

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

File diff suppressed because one or more lines are too long

83
src/Animation.js Normal file
View File

@ -0,0 +1,83 @@
///////////////////////////////////////////////////////////////////////
// Animation
///////////////////////////////////////////////////////////////////////
Kinetic.Animation = {
animations: [],
animIdCounter: 0,
animRunning: false,
frame: {
time: 0,
timeDiff: 0,
lastTime: 0
},
_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++) {
var anim = this.animations[n];
if(anim.node && anim.node._id !== undefined) {
nodes[anim.node._id] = anim.node;
}
anim.func(this.frame);
}
for(var key in nodes) {
nodes[key].draw();
}
},
_updateFrameObject: function() {
var date = new Date();
var time = date.getTime();
if(this.frame.lastTime === 0) {
this.frame.lastTime = time;
}
else {
this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff;
}
},
_animationLoop: function() {
if(this.animations.length > 0) {
this._updateFrameObject();
this._runFrames();
var that = this;
requestAnimFrame(function() {
that._animationLoop();
});
}
else {
this.animRunning = false;
this.frame.lastTime = 0;
}
},
_handleAnimation: function() {
var that = this;
if(!this.animRunning) {
this.animRunning = true;
that._animationLoop();
}
else {
this.frame.lastTime = 0;
}
}
};
requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

89
src/Global.js
View File

@ -1,31 +1,18 @@
///////////////////////////////////////////////////////////////////////
// Global Object
// Global
///////////////////////////////////////////////////////////////////////
/**
* Kinetic Namespace
* @namespace
*/
var Kinetic = {};
/**
* Kinetic Global
* @property {Object} Global
*/
Kinetic.Global = {
stages: [],
idCounter: 0,
tempNodes: [],
animations: [],
animIdCounter: 0,
animRunning: false,
maxDragTimeInterval: 20,
frame: {
time: 0,
timeDiff: 0,
lastTime: 0
},
drag: {
moving: false,
node: undefined,
offset: {
x: 0,
y: 0
@ -43,79 +30,5 @@ Kinetic.Global = {
n -= 1;
}
}
},
/*
* 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++) {
var anim = this.animations[n];
if(anim.node && anim.node._id !== undefined) {
nodes[anim.node._id] = anim.node;
}
anim.func(this.frame);
}
for(var key in nodes) {
nodes[key].draw();
}
},
_updateFrameObject: function() {
var date = new Date();
var time = date.getTime();
if(this.frame.lastTime === 0) {
this.frame.lastTime = time;
}
else {
this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff;
}
},
_animationLoop: function() {
if(this.animations.length > 0) {
this._updateFrameObject();
this._runFrames();
var that = this;
requestAnimFrame(function() {
that._animationLoop();
});
}
else {
this.animRunning = false;
this.frame.lastTime = 0;
}
},
_handleAnimation: function() {
var that = this;
if(!this.animRunning) {
this.animRunning = true;
that._animationLoop();
}
else {
this.frame.lastTime = 0;
}
}
};
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

10
src/Node.js
View File

@ -586,14 +586,14 @@ Kinetic.Node = Kinetic.Class.extend({
* transition completes
*/
transitionTo: function(config) {
var go = Kinetic.Global;
var a = Kinetic.Animation;
/*
* clear transition if one is currently running for this
* node
*/
if(this.transAnim !== undefined) {
go._removeAnimation(this.transAnim);
a._removeAnimation(this.transAnim);
this.transAnim = undefined;
}
@ -617,12 +617,12 @@ Kinetic.Node = Kinetic.Class.extend({
* adding the animation with the addAnimation
* method auto generates an id
*/
go._addAnimation(anim);
a._addAnimation(anim);
// subscribe to onFinished for first tween
trans.onFinished = function() {
// remove animation
go._removeAnimation(anim);
a._removeAnimation(anim);
that.transAnim = undefined;
// callback
@ -635,7 +635,7 @@ Kinetic.Node = Kinetic.Class.extend({
// auto start
trans.start();
go._handleAnimation();
a._handleAnimation();
return trans;
},

10
src/Stage.js
View File

@ -53,7 +53,6 @@ Kinetic.Stage = Kinetic.Container.extend({
* @param {function} func
*/
onFrame: function(func) {
var go = Kinetic.Global;
this.anim = {
func: func
};
@ -63,9 +62,9 @@ Kinetic.Stage = Kinetic.Container.extend({
*/
start: function() {
if(!this.animRunning) {
var go = Kinetic.Global;
go._addAnimation(this.anim);
go._handleAnimation();
var a = Kinetic.Animation;
a._addAnimation(this.anim);
a._handleAnimation();
this.animRunning = true;
}
},
@ -73,8 +72,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* stop animation
*/
stop: function() {
var go = Kinetic.Global;
go._removeAnimation(this.anim);
Kinetic.Animation._removeAnimation(this.anim);
this.animRunning = false;
},
/**

3
src/Transition.js
View File

@ -1,3 +1,6 @@
///////////////////////////////////////////////////////////////////////
// Transition
///////////////////////////////////////////////////////////////////////
/**
* Transition constructor. The transitionTo() Node method
* returns a reference to the transition object which you can use

3
src/util/Class.js
View File

@ -1,3 +1,6 @@
///////////////////////////////////////////////////////////////////////
// Class
///////////////////////////////////////////////////////////////////////
/* Simple JavaScript Inheritance
* By John Resig http://ejohn.org/
* MIT Licensed.

3
src/util/Transform.js
View File

@ -1,3 +1,6 @@
///////////////////////////////////////////////////////////////////////
// Transform
///////////////////////////////////////////////////////////////////////
/*
* Last updated November 2011
* By Simon Sarris

3
src/util/Tween.js
View File

@ -1,3 +1,6 @@
///////////////////////////////////////////////////////////////////////
// Tween
///////////////////////////////////////////////////////////////////////
/*
* The Tween class was ported from an Adobe Flash Tween library
* to JavaScript by Xaric. In the context of KineticJS, a Tween is

3
src/util/Type.js
View File

@ -1,3 +1,6 @@
///////////////////////////////////////////////////////////////////////
// Type
///////////////////////////////////////////////////////////////////////
/*
* utilities that determine data type and transform
* one type into another

16
tests/js/unitTests.js
View File

@ -667,7 +667,7 @@ Test.prototype.tests = {
id: 'myCircle'
});
var go = Kinetic.GlobalObject;
var go = Kinetic.Global;
test(go.tempNodes.length === 0, 'shouldn\'t be nodes in the tempNdoes array');
@ -4470,29 +4470,29 @@ Test.prototype.tests = {
rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
layer.draw();
});
var go = Kinetic.GlobalObject;
var a = Kinetic.Animation;
test(go.animations.length === 0, 'should be no animations running');
test(a.animations.length === 0, 'should be no animations running');
test(stage.animRunning === false, 'animRunning should be false');
stage.start();
test(go.animations.length === 1, 'should be 1 animation running');
test(a.animations.length === 1, 'should be 1 animation running');
test(stage.animRunning === true, 'animRunning should be true');
stage.start();
test(go.animations.length === 1, 'should be 1 animation running');
test(a.animations.length === 1, 'should be 1 animation running');
test(stage.animRunning === true, 'animRunning should be true');
stage.stop();
test(go.animations.length === 0, 'should be no animations running');
test(a.animations.length === 0, 'should be no animations running');
test(stage.animRunning === false, 'animRunning should be false');
stage.stop();
test(go.animations.length === 0, 'should be no animations running');
test(a.animations.length === 0, 'should be no animations running');
test(stage.animRunning === false, 'animRunning should be false');
},
////////////////////////////////////////////////////////////////////////
@ -4532,7 +4532,7 @@ Test.prototype.tests = {
stage.stop();
centerX = 300;
var go = Kinetic.GlobalObject;
var go = Kinetic.Global;
rect.transitionTo({
x: 300,