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

rewrote Animation API to improve flexibility. Animations are no longer tied to the stage. You can now instantiate as many individual animations as you like, and manage them however you like

Browse Source
This commit is contained in:
Eric Rowell 2012-08-04 00:23:56 -07:00
parent 9ad9121259
commit b6db65301c
7 changed files with 155 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Jul 31 2012
* Date: Aug 04 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@ -1091,6 +1091,14 @@ Kinetic.Transform.prototype = {
///////////////////////////////////////////////////////////////////////
// Animation
///////////////////////////////////////////////////////////////////////
/**
* Stage constructor. A stage is used to contain multiple layers and handle
* animations
* @constructor
* @augments Kinetic.Container
* @param {Object} config
* @param {Function} config.func function to be executed on each animation frame
*/
Kinetic.Animation = function(config) {
if(!config) {
config = {};
@ -1098,16 +1106,43 @@ Kinetic.Animation = function(config) {
for(var key in config) {
this[key] = config[key];
}
// add frame object
this.frame = {
time: 0,
timeDiff: 0,
lastTime: new Date().getTime()
};
this.id = Kinetic.Animation.animIdCounter++;
};
/*
* Animation methods
*/
Kinetic.Animation.prototype = {
/**
* start animation
* @name start
* @methodOf Kinetic.Animation.prototype
*/
start: function() {
this.stop();
this.frame.lastTime = new Date().getTime();
Kinetic.Animation._addAnimation(this);
Kinetic.Animation._handleAnimation();
},
/**
* stop animation
* @name stop
* @methodOf Kinetic.Animation.prototype
*/
stop: function() {
Kinetic.Animation._removeAnimation(this);
}
};
Kinetic.Animation.animations = [];
Kinetic.Animation.animIdCounter = 0;
Kinetic.Animation.animRunning = false;
Kinetic.Animation.frame = {
time: 0,
timeDiff: 0,
lastTime: new Date().getTime()
};
Kinetic.Animation._addAnimation = function(anim) {
this.animations.push(anim);
};
@ -1121,6 +1156,12 @@ Kinetic.Animation._removeAnimation = function(anim) {
}
}
};
Kinetic.Animation._updateFrameObject = function(anim) {
var time = new Date().getTime();
anim.frame.timeDiff = time - anim.frame.lastTime;
anim.frame.lastTime = time;
anim.frame.time += anim.frame.timeDiff;
};
Kinetic.Animation._runFrames = function() {
var nodes = {};
/*
@ -1132,12 +1173,13 @@ Kinetic.Animation._runFrames = function() {
*/
for(var n = 0; n < this.animations.length; n++) {
var anim = this.animations[n];
this._updateFrameObject(anim);
if(anim.node && anim.node._id !== undefined) {
nodes[anim.node._id] = anim.node;
}
// if animation object has a function, execute it
if(anim.func) {
anim.func(this.frame);
anim.func(anim.frame);
}
}
@ -1145,15 +1187,8 @@ Kinetic.Animation._runFrames = function() {
nodes[key].draw();
}
};
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;
};
Kinetic.Animation._animationLoop = function() {
if(this.animations.length > 0) {
this._updateFrameObject();
this._runFrames();
var that = this;
requestAnimFrame(function() {
@ -1162,7 +1197,6 @@ Kinetic.Animation._animationLoop = function() {
}
else {
this.animRunning = false;
this.frame.lastTime = 0;
}
};
Kinetic.Animation._handleAnimation = function() {
@ -1171,9 +1205,6 @@ Kinetic.Animation._handleAnimation = function() {
this.animRunning = true;
that._animationLoop();
}
else {
this.frame.lastTime = 0;
}
};
requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
@ -2715,8 +2746,7 @@ Kinetic.Container = Kinetic.Node.extend({
// Stage
///////////////////////////////////////////////////////////////////////
/**
* Stage constructor. A stage is used to contain multiple layers and handle
* animations
* Stage constructor. A stage is used to contain multiple layers
* @constructor
* @augments Kinetic.Container
* @param {Object} config
@ -2784,37 +2814,6 @@ Kinetic.Stage = Kinetic.Container.extend({
this._addName(this);
},
/**
* sets onFrameFunc for animation
* @name onFrame
* @methodOf Kinetic.Stage.prototype
* @param {function} func
*/
onFrame: function(func) {
this.anim.func = func;
},
/**
* start animation
* @name start
* @methodOf Kinetic.Stage.prototype
*/
start: function() {
if(!this.animRunning) {
var a = Kinetic.Animation;
a._addAnimation(this.anim);
a._handleAnimation();
this.animRunning = true;
}
},
/**
* stop animation
* @name stop
* @methodOf Kinetic.Stage.prototype
*/
stop: function() {
Kinetic.Animation._removeAnimation(this.anim);
this.animRunning = false;
},
/**
* draw children
* @name draw
@ -3684,8 +3683,6 @@ Kinetic.Stage = Kinetic.Container.extend({
this.ids = {};
this.names = {};
this.anim = new Kinetic.Animation();
this.animRunning = false;
},
_draw: function(canvas) {
this._drawChildren(canvas);

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

File diff suppressed because one or more lines are too long

65
src/Animation.js
View File

@ -1,6 +1,14 @@
///////////////////////////////////////////////////////////////////////
// Animation
///////////////////////////////////////////////////////////////////////
/**
* Stage constructor. A stage is used to contain multiple layers and handle
* animations
* @constructor
* @augments Kinetic.Container
* @param {Object} config
* @param {Function} config.func function to be executed on each animation frame
*/
Kinetic.Animation = function(config) {
if(!config) {
config = {};
@ -8,16 +16,43 @@ Kinetic.Animation = function(config) {
for(var key in config) {
this[key] = config[key];
}
// add frame object
this.frame = {
time: 0,
timeDiff: 0,
lastTime: new Date().getTime()
};
this.id = Kinetic.Animation.animIdCounter++;
};
/*
* Animation methods
*/
Kinetic.Animation.prototype = {
/**
* start animation
* @name start
* @methodOf Kinetic.Animation.prototype
*/
start: function() {
this.stop();
this.frame.lastTime = new Date().getTime();
Kinetic.Animation._addAnimation(this);
Kinetic.Animation._handleAnimation();
},
/**
* stop animation
* @name stop
* @methodOf Kinetic.Animation.prototype
*/
stop: function() {
Kinetic.Animation._removeAnimation(this);
}
};
Kinetic.Animation.animations = [];
Kinetic.Animation.animIdCounter = 0;
Kinetic.Animation.animRunning = false;
Kinetic.Animation.frame = {
time: 0,
timeDiff: 0,
lastTime: new Date().getTime()
};
Kinetic.Animation._addAnimation = function(anim) {
this.animations.push(anim);
};
@ -31,6 +66,12 @@ Kinetic.Animation._removeAnimation = function(anim) {
}
}
};
Kinetic.Animation._updateFrameObject = function(anim) {
var time = new Date().getTime();
anim.frame.timeDiff = time - anim.frame.lastTime;
anim.frame.lastTime = time;
anim.frame.time += anim.frame.timeDiff;
};
Kinetic.Animation._runFrames = function() {
var nodes = {};
/*
@ -42,12 +83,13 @@ Kinetic.Animation._runFrames = function() {
*/
for(var n = 0; n < this.animations.length; n++) {
var anim = this.animations[n];
this._updateFrameObject(anim);
if(anim.node && anim.node._id !== undefined) {
nodes[anim.node._id] = anim.node;
}
// if animation object has a function, execute it
if(anim.func) {
anim.func(this.frame);
anim.func(anim.frame);
}
}
@ -55,15 +97,8 @@ Kinetic.Animation._runFrames = function() {
nodes[key].draw();
}
};
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;
};
Kinetic.Animation._animationLoop = function() {
if(this.animations.length > 0) {
this._updateFrameObject();
this._runFrames();
var that = this;
requestAnimFrame(function() {
@ -72,7 +107,6 @@ Kinetic.Animation._animationLoop = function() {
}
else {
this.animRunning = false;
this.frame.lastTime = 0;
}
};
Kinetic.Animation._handleAnimation = function() {
@ -81,9 +115,6 @@ Kinetic.Animation._handleAnimation = function() {
this.animRunning = true;
that._animationLoop();
}
else {
this.frame.lastTime = 0;
}
};
requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

36
src/Stage.js
View File

@ -2,8 +2,7 @@
// Stage
///////////////////////////////////////////////////////////////////////
/**
* Stage constructor. A stage is used to contain multiple layers and handle
* animations
* Stage constructor. A stage is used to contain multiple layers
* @constructor
* @augments Kinetic.Container
* @param {Object} config
@ -71,37 +70,6 @@ Kinetic.Stage = Kinetic.Container.extend({
this._addName(this);
},
/**
* sets onFrameFunc for animation
* @name onFrame
* @methodOf Kinetic.Stage.prototype
* @param {function} func
*/
onFrame: function(func) {
this.anim.func = func;
},
/**
* start animation
* @name start
* @methodOf Kinetic.Stage.prototype
*/
start: function() {
if(!this.animRunning) {
var a = Kinetic.Animation;
a._addAnimation(this.anim);
a._handleAnimation();
this.animRunning = true;
}
},
/**
* stop animation
* @name stop
* @methodOf Kinetic.Stage.prototype
*/
stop: function() {
Kinetic.Animation._removeAnimation(this.anim);
this.animRunning = false;
},
/**
* draw children
* @name draw
@ -971,8 +939,6 @@ Kinetic.Stage = Kinetic.Container.extend({
this.ids = {};
this.names = {};
this.anim = new Kinetic.Animation();
this.animRunning = false;
},
_draw: function(canvas) {
this._drawChildren(canvas);

30
tests/js/manualTests.js
View File

@ -167,15 +167,17 @@ Test.prototype.tests = {
// in ms
var centerX = stage.getWidth() / 2 - 100 / 2;
stage.onFrame(function(frame) {
rect.attrs.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX;
layer.draw();
var anim = new Kinetic.Animation({
func: function(frame) {
rect.attrs.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX;
layer.draw();
}
});
stage.start();
anim.start();
setTimeout(function() {
stage.stop();
anim.stop();
}, 3000);
},
'TRANSITION - ease-in, ease-out, ease-in-out hovers': function(containerId) {
@ -780,14 +782,6 @@ Test.prototype.tests = {
}
})
});
/*
stage.onFrame(function(frame) {
star.rotate(1 * frame.timeDiff / 1000);
layer.draw();
});
stage.start();
*/
},
'DRAG AND DROP - two draggable shapes': function(containerId) {
var stage = new Kinetic.Stage({
@ -1345,11 +1339,13 @@ Test.prototype.tests = {
layer.add(group);
stage.add(layer);
stage.onFrame(function() {
rect.rotate(0.01);
layer.draw();
var anim = new Kinetic.Animation({
func: function() {
rect.rotate(0.01);
layer.draw();
}
});
stage.start();
anim.start();
},
'STAGE - hide stage': function(containerId) {
var stage = new Kinetic.Stage({

26
tests/js/performanceTests.js
View File

@ -52,17 +52,23 @@ Test.prototype.tests = {
// in ms
var centerX = stage.getWidth() / 2 - 100 / 2;
stage.onFrame(function(frame) {
rect.attrs.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX;
layer.draw();
//console.log(frame.timeDiff)
var anim = new Kinetic.Animation({
func: function(frame) {
rect.attrs.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX;
layer.draw();
//console.log(frame.timeDiff)
}
});
stage.start();
anim.start();
setTimeout(function() {
//stage.stop();
}, 1000)
anim.stop();
}, 2000);
setTimeout(function() {
anim.start();
}, 4000);
},
'DRAWING - draw rect vs image from image data': function(containerId) {
var stage = new Kinetic.Stage({
@ -220,7 +226,7 @@ Test.prototype.tests = {
}
});
},
'*PATH - add map path': function(containerId) {
'PATH - add map path': function(containerId) {
startTimer();
var stage = new Kinetic.Stage({
container: containerId,
@ -262,10 +268,10 @@ Test.prototype.tests = {
stage.add(mapLayer);
endTimer('time build and to draw map');
mapLayer.beforeDraw(startTimer);
mapLayer.afterDraw(function() {
endTimer('redraw layer');
endTimer('redraw layer');
});
}
};

79
tests/js/unitTests.js
View File

@ -1683,11 +1683,6 @@ Test.prototype.tests = {
test(darth.getWidth() === 438, 'image width should be 438');
test(darth.getHeight() === 300, 'image height should be 300');
stage.onFrame(function() {
darth.rotate(0.1);
layer.draw();
});
darth.applyFilter({
filter: Kinetic.Filters.Grayscale,
callback: function() {
@ -1970,11 +1965,6 @@ Test.prototype.tests = {
layer.add(poly);
stage.add(layer);
stage.onFrame(function() {
poly.rotate(Math.PI / 100);
layer.draw();
});
//stage.start();
},
'SHAPE - add line': function(containerId) {
var stage = new Kinetic.Stage({
@ -2251,14 +2241,6 @@ Test.prototype.tests = {
test(star.getLineJoin() === 'bevel', 'lineJoin property should be bevel');
star.setLineJoin('round');
/*
stage.onFrame(function(frame) {
star.rotate(1 * frame.timeDiff / 1000);
layer.draw();
});
stage.start();
*/
},
'SHAPE - add stroke rect': function(containerId) {
var stage = new Kinetic.Stage({
@ -3842,13 +3824,6 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
stage.onFrame(function(frame) {
circle.rotation += 0.1;
layer.draw();
});
//stage.start();
},
'NODE - simulate event': function(containerId) {
var stage = new Kinetic.Stage({
@ -4494,41 +4469,33 @@ Test.prototype.tests = {
// in ms
var centerX = stage.getWidth() / 2 - 100 / 2;
stage.onFrame(function(frame) {
rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
layer.draw();
var anim = new Kinetic.Animation({
func: function(frame) {
rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
layer.draw();
}
});
var a = Kinetic.Animation;
test(a.animations.length === 0, 'should be no animations running');
test(stage.animRunning === false, 'animRunning should be false');
stage.start();
test(a.animations.length === 0, 'should be no animations running');
anim.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();
anim.stop();
test(a.animations.length === 0, 'should be no animations running');
test(stage.animRunning === false, 'animRunning should be false');
stage.start();
anim.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');
anim.start();
test(a.animations.length === 1, 'should be 1 animation runningg');
stage.stop();
anim.stop();
test(a.animations.length === 0, 'should be no animations running');
anim.stop();
test(a.animations.length === 0, 'should be no animations running');
test(stage.animRunning === false, 'animRunning should be false');
},
////////////////////////////////////////////////////////////////////////
// TRANSITION tests
@ -4558,13 +4525,15 @@ Test.prototype.tests = {
var period = 1000;
var centerX = 0;
stage.onFrame(function(frame) {
rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
layer.draw();
var anim = new Kinetic.Animation({
func: function(frame) {
rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
layer.draw();
}
});
stage.start();
stage.stop();
anim.start();
anim.stop();
centerX = 300;
var go = Kinetic.Global;
@ -4574,7 +4543,7 @@ Test.prototype.tests = {
duration: 1,
callback: function() {
test(rect.getX() === 300, 'rect x is not 300');
stage.start();
anim.start();
}
});
},