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

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

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);
};
})();

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);
};
})();

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;
},

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;
},
/**

View File

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

View File

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

View File

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

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

View File

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