lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-18 17:21:36 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Kinetic.Animation is now a class that can be instantiated to better represent animation objects. Rather than creating new animation objects and destroying them each time an animation is started and restarted, the same animation obect is now reused, which should help with performance

Browse Source
This commit is contained in:
Eric Rowell
2012-07-31 23:23:00 -07:00
parent d5eee80c0e
commit 9ad9121259
8 changed files with 214 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
dist/kinetic-core.js vendored
View File

@@ -1091,20 +1091,27 @@ Kinetic.Transform.prototype = {
///////////////////////////////////////////////////////////////////////
// Animation
///////////////////////////////////////////////////////////////////////
Kinetic.Animation = {
animations: [],
animIdCounter: 0,
animRunning: false,
frame: {
Kinetic.Animation = function(config) {
if(!config) {
config = {};
}
for(var key in config) {
this[key] = config[key];
}
this.id = Kinetic.Animation.animIdCounter++;
};
Kinetic.Animation.animations = [];
Kinetic.Animation.animIdCounter = 0;
Kinetic.Animation.animRunning = false;
Kinetic.Animation.frame = {
time: 0,
timeDiff: 0,
lastTime: new Date().getTime()
},
_addAnimation: function(anim) {
anim.id = this.animIdCounter++;
};
Kinetic.Animation._addAnimation = function(anim) {
this.animations.push(anim);
},
_removeAnimation: function(anim) {
};
Kinetic.Animation._removeAnimation = function(anim) {
var id = anim.id;
var animations = this.animations;
for(var n = 0; n < animations.length; n++) {
@@ -1113,8 +1120,8 @@ Kinetic.Animation = {
return false;
}
}
},
_runFrames: function() {
};
Kinetic.Animation._runFrames = function() {
var nodes = {};
/*
* loop through all animations and execute animation
@@ -1137,14 +1144,14 @@ Kinetic.Animation = {
for(var key in nodes) {
nodes[key].draw();
}
},
_updateFrameObject: function() {
};
Kinetic.Animation._updateFrameObject = function() {
var time = new Date().getTime();
this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff;
},
_animationLoop: function() {
};
Kinetic.Animation._animationLoop = function() {
if(this.animations.length > 0) {
this._updateFrameObject();
this._runFrames();
@@ -1157,8 +1164,8 @@ Kinetic.Animation = {
this.animRunning = false;
this.frame.lastTime = 0;
}
},
_handleAnimation: function() {
};
Kinetic.Animation._handleAnimation = function() {
var that = this;
if(!this.animRunning) {
this.animRunning = true;
@@ -1167,7 +1174,6 @@ Kinetic.Animation = {
else {
this.frame.lastTime = 0;
}
}
};
requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
@@ -1240,6 +1246,7 @@ Kinetic.Node = Kinetic.Class.extend({
this.setDefaultAttrs(this.defaultNodeAttrs);
this.eventListeners = {};
this.lastDragTime = 0;
this.transAnim = new Kinetic.Animation();
this.setAttrs(config);
// bind events
@@ -1854,10 +1861,7 @@ Kinetic.Node = Kinetic.Class.extend({
* clear transition if one is currently running for this
* node
*/
if(this.transAnim) {
a._removeAnimation(this.transAnim);
this.transAnim = null;
}
/*
* create new transition
@@ -1865,29 +1869,22 @@ Kinetic.Node = Kinetic.Class.extend({
var node = this.nodeType === 'Stage' ? this : this.getLayer();
var that = this;
var trans = new Kinetic.Transition(this, config);
var anim = {
func: function() {
this.transAnim.func = function() {
trans._onEnterFrame();
},
node: node
};
// store reference to transition animation
this.transAnim = anim;
this.transAnim.node = node;
/*
* adding the animation with the addAnimation
* method auto generates an id
*/
a._addAnimation(anim);
a._addAnimation(this.transAnim);
// subscribe to onFinished for first tween
trans.onFinished = function() {
// remove animation
a._removeAnimation(anim);
that.transAnim = null;
anim.node.draw();
a._removeAnimation(that.transAnim);
that.transAnim.node.draw();
// callback
if(config.callback) {
@@ -1896,9 +1893,7 @@ Kinetic.Node = Kinetic.Class.extend({
};
// auto start
trans.start();
a._handleAnimation();
return trans;
},
/**
@@ -2561,7 +2556,11 @@ Kinetic.Container = Kinetic.Node.extend({
remove: function(child) {
if(child && child.index !== undefined && this.children[child.index]._id == child._id) {
var stage = this.getStage();
if(stage !== undefined) {
/*
* remove event listeners and references to the node
* from the ids and names hashes
*/
if(stage) {
stage._removeId(child.getId());
stage._removeName(child.getName(), child._id);
}
@@ -2783,6 +2782,7 @@ Kinetic.Stage = Kinetic.Container.extend({
go.stages.push(this);
this._addId(this);
this._addName(this);
},
/**
* sets onFrameFunc for animation
@@ -2791,9 +2791,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* @param {function} func
*/
onFrame: function(func) {
this.anim = {
func: func
};
this.anim.func = func;
},
/**
* start animation
@@ -3686,7 +3684,7 @@ Kinetic.Stage = Kinetic.Container.extend({
this.ids = {};
this.names = {};
this.anim = undefined;
this.anim = new Kinetic.Animation();
this.animRunning = false;
},
_draw: function(canvas) {
@@ -5396,6 +5394,7 @@ Kinetic.Sprite = Kinetic.Shape.extend({
config.drawFunc = this.drawFunc;
// call super constructor
this._super(config);
this.anim = new Kinetic.Animation();
var that = this;
this.on('animationChange.kinetic', function() {
// reset index when animation changes
@@ -5426,10 +5425,7 @@ Kinetic.Sprite = Kinetic.Shape.extend({
var ka = Kinetic.Animation;
// if sprite already has an animation, remove it
if(this.anim) {
ka._removeAnimation(this.anim);
this.anim = null;
}
/*
* animation object has no executable function because
@@ -5437,9 +5433,7 @@ Kinetic.Sprite = Kinetic.Shape.extend({
* below. The anim object only needs the layer reference for
* redraw
*/
this.anim = {
node: layer
};
this.anim.node = layer;
/*
* adding the animation with the addAnimation
@@ -5463,11 +5457,7 @@ Kinetic.Sprite = Kinetic.Shape.extend({
* @methodOf Kinetic.Sprite.prototype
*/
stop: function() {
var ka = Kinetic.Animation;
if(this.anim) {
ka._removeAnimation(this.anim);
this.anim = null;
}
Kinetic.Animation._removeAnimation(this.anim);
clearInterval(this.interval);
},
/**

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

File diff suppressed because one or more lines are too long

44
src/Animation.js
View File

@@ -1,20 +1,27 @@
///////////////////////////////////////////////////////////////////////
// Animation
///////////////////////////////////////////////////////////////////////
Kinetic.Animation = {
animations: [],
animIdCounter: 0,
animRunning: false,
frame: {
Kinetic.Animation = function(config) {
if(!config) {
config = {};
}
for(var key in config) {
this[key] = config[key];
}
this.id = Kinetic.Animation.animIdCounter++;
};
Kinetic.Animation.animations = [];
Kinetic.Animation.animIdCounter = 0;
Kinetic.Animation.animRunning = false;
Kinetic.Animation.frame = {
time: 0,
timeDiff: 0,
lastTime: new Date().getTime()
},
_addAnimation: function(anim) {
anim.id = this.animIdCounter++;
};
Kinetic.Animation._addAnimation = function(anim) {
this.animations.push(anim);
},
_removeAnimation: function(anim) {
};
Kinetic.Animation._removeAnimation = function(anim) {
var id = anim.id;
var animations = this.animations;
for(var n = 0; n < animations.length; n++) {
@@ -23,8 +30,8 @@ Kinetic.Animation = {
return false;
}
}
},
_runFrames: function() {
};
Kinetic.Animation._runFrames = function() {
var nodes = {};
/*
* loop through all animations and execute animation
@@ -47,14 +54,14 @@ Kinetic.Animation = {
for(var key in nodes) {
nodes[key].draw();
}
},
_updateFrameObject: function() {
};
Kinetic.Animation._updateFrameObject = function() {
var time = new Date().getTime();
this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff;
},
_animationLoop: function() {
};
Kinetic.Animation._animationLoop = function() {
if(this.animations.length > 0) {
this._updateFrameObject();
this._runFrames();
@@ -67,8 +74,8 @@ Kinetic.Animation = {
this.animRunning = false;
this.frame.lastTime = 0;
}
},
_handleAnimation: function() {
};
Kinetic.Animation._handleAnimation = function() {
var that = this;
if(!this.animRunning) {
this.animRunning = true;
@@ -77,7 +84,6 @@ Kinetic.Animation = {
else {
this.frame.lastTime = 0;
}
}
};
requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

6
src/Container.js
View File

@@ -99,7 +99,11 @@ Kinetic.Container = Kinetic.Node.extend({
remove: function(child) {
if(child && child.index !== undefined && this.children[child.index]._id == child._id) {
var stage = this.getStage();
if(stage !== undefined) {
/*
* remove event listeners and references to the node
* from the ids and names hashes
*/
if(stage) {
stage._removeId(child.getId());
stage._removeName(child.getName(), child._id);
}

25
src/Node.js
View File

@@ -62,6 +62,7 @@ Kinetic.Node = Kinetic.Class.extend({
this.setDefaultAttrs(this.defaultNodeAttrs);
this.eventListeners = {};
this.lastDragTime = 0;
this.transAnim = new Kinetic.Animation();
this.setAttrs(config);
// bind events
@@ -676,10 +677,7 @@ Kinetic.Node = Kinetic.Class.extend({
* clear transition if one is currently running for this
* node
*/
if(this.transAnim) {
a._removeAnimation(this.transAnim);
this.transAnim = null;
}
/*
* create new transition
@@ -687,29 +685,22 @@ Kinetic.Node = Kinetic.Class.extend({
var node = this.nodeType === 'Stage' ? this : this.getLayer();
var that = this;
var trans = new Kinetic.Transition(this, config);
var anim = {
func: function() {
this.transAnim.func = function() {
trans._onEnterFrame();
},
node: node
};
// store reference to transition animation
this.transAnim = anim;
this.transAnim.node = node;
/*
* adding the animation with the addAnimation
* method auto generates an id
*/
a._addAnimation(anim);
a._addAnimation(this.transAnim);
// subscribe to onFinished for first tween
trans.onFinished = function() {
// remove animation
a._removeAnimation(anim);
that.transAnim = null;
anim.node.draw();
a._removeAnimation(that.transAnim);
that.transAnim.node.draw();
// callback
if(config.callback) {
@@ -718,9 +709,7 @@ Kinetic.Node = Kinetic.Class.extend({
};
// auto start
trans.start();
a._handleAnimation();
return trans;
},
/**

7
src/Stage.js
View File

@@ -69,6 +69,7 @@ Kinetic.Stage = Kinetic.Container.extend({
go.stages.push(this);
this._addId(this);
this._addName(this);
},
/**
* sets onFrameFunc for animation
@@ -77,9 +78,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* @param {function} func
*/
onFrame: function(func) {
this.anim = {
func: func
};
this.anim.func = func;
},
/**
* start animation
@@ -972,7 +971,7 @@ Kinetic.Stage = Kinetic.Container.extend({
this.ids = {};
this.names = {};
this.anim = undefined;
this.anim = new Kinetic.Animation();
this.animRunning = false;
},
_draw: function(canvas) {

14
src/shapes/Sprite.js
View File

@@ -17,6 +17,7 @@ Kinetic.Sprite = Kinetic.Shape.extend({
config.drawFunc = this.drawFunc;
// call super constructor
this._super(config);
this.anim = new Kinetic.Animation();
var that = this;
this.on('animationChange.kinetic', function() {
// reset index when animation changes
@@ -47,10 +48,7 @@ Kinetic.Sprite = Kinetic.Shape.extend({
var ka = Kinetic.Animation;
// if sprite already has an animation, remove it
if(this.anim) {
ka._removeAnimation(this.anim);
this.anim = null;
}
/*
* animation object has no executable function because
@@ -58,9 +56,7 @@ Kinetic.Sprite = Kinetic.Shape.extend({
* below. The anim object only needs the layer reference for
* redraw
*/
this.anim = {
node: layer
};
this.anim.node = layer;
/*
* adding the animation with the addAnimation
@@ -84,11 +80,7 @@ Kinetic.Sprite = Kinetic.Shape.extend({
* @methodOf Kinetic.Sprite.prototype
*/
stop: function() {
var ka = Kinetic.Animation;
if(this.anim) {
ka._removeAnimation(this.anim);
this.anim = null;
}
Kinetic.Animation._removeAnimation(this.anim);
clearInterval(this.interval);
},
/**

22
tests/js/unitTests.js
View File

@@ -748,7 +748,6 @@ Test.prototype.tests = {
test(go.tempNodes[circle._id] === undefined, 'circle shouldn\'t be in the temp nodes hash');
},
'CONTAINER - remove layer with shape': function(containerId) {
var stage = new Kinetic.Stage({
@@ -4505,22 +4504,29 @@ Test.prototype.tests = {
test(stage.animRunning === false, 'animRunning should be false');
stage.start();
test(a.animations.length === 1, 'should be 1 animation running');
test(stage.animRunning === true, 'animRunning should be true');
stage.start();
test(a.animations.length === 1, 'should be 1 animation running');
test(a.animations[0].id === stage.anim.id, 'animation id is incorrect');
test(stage.animRunning === true, 'animRunning should be true');
stage.stop();
test(a.animations.length === 0, 'should be no animations running');
test(stage.animRunning === false, 'animRunning should be false');
stage.start();
test(a.animations.length === 1, 'should be 1 animation running');
test(a.animations[0].id === stage.anim.id, 'animation id is incorrect');
test(stage.animRunning === true, 'animRunning should be true');
stage.start();
test(a.animations.length === 1, 'should be 1 animation running');
test(a.animations[0].id === stage.anim.id, 'animation id is incorrect');
test(stage.animRunning === true, 'animRunning should be true');
stage.stop();
test(a.animations.length === 0, 'should be no animations running');
test(stage.animRunning === false, 'animRunning should be false');
stage.stop();
test(a.animations.length === 0, 'should be no animations running');
test(stage.animRunning === false, 'animRunning should be false');
},