tweaked throttling algo and added unit tests

This commit is contained in:
Eric Rowell 2012-04-28 19:52:45 -07:00
parent ff31dcb0ae
commit ffd9924511
8 changed files with 65 additions and 17 deletions

33
dist/kinetic-core.js vendored
View File

@ -870,12 +870,17 @@ Kinetic.Node.prototype = {
go._addAnimation(anim);
// subscribe to onFinished for first tween
trans.tweens[0].onFinished = function() {
trans.onFinished = function() {
// remove animation
go._removeAnimation(anim);
this.transAnim = undefined;
that.transAnim = undefined;
// callback
if(config.callback !== undefined) {
config.callback();
}
anim.node.draw();
};
// auto start
trans.start();
@ -2205,6 +2210,7 @@ Kinetic.Layer.prototype = {
this.lastDrawTime = time;
if(this.drawTimeout !== undefined) {
clearTimeout(this.drawTimeout);
this.drawTimeout = undefined;
}
}
/*
@ -2213,10 +2219,15 @@ Kinetic.Layer.prototype = {
*/
else if(this.drawTimeout === undefined) {
var that = this;
/*
* if timeout duration is too short, we will
* get a lot of unecessary layer draws. Make sure
* that the timeout is slightly more than the throttle
* amount
*/
this.drawTimeout = setTimeout(function() {
that.draw();
clearTimeout(that.drawTimeout);
}, 5);
}, throttle + 10);
}
},
/**
@ -3462,6 +3473,18 @@ Kinetic.Transition = function(node, config) {
}
}
}
var finishedTweens = 0;
var that = this;
for(var n = 0; n < this.tweens.length; n++) {
var tween = this.tweens[n];
tween.onFinished = function() {
finishedTweens++;
if(finishedTweens >= that.tweens.length) {
that.onFinished();
}
};
}
};
/*
* Transition methods
@ -3786,7 +3809,7 @@ Kinetic.Tweens = {
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
},
'elastic-ease-in-out': function(t, b, c, d, a, p) {
// added s = 0
// added s = 0
var s = 0;
if(t === 0) {
return b;

File diff suppressed because one or more lines are too long

View File

@ -44,6 +44,7 @@ Kinetic.Layer.prototype = {
this.lastDrawTime = time;
if(this.drawTimeout !== undefined) {
clearTimeout(this.drawTimeout);
this.drawTimeout = undefined;
}
}
/*
@ -52,10 +53,15 @@ Kinetic.Layer.prototype = {
*/
else if(this.drawTimeout === undefined) {
var that = this;
/*
* if timeout duration is too short, we will
* get a lot of unecessary layer draws. Make sure
* that the timeout is slightly more than the throttle
* amount
*/
this.drawTimeout = setTimeout(function() {
that.draw();
clearTimeout(that.drawTimeout);
}, 5);
}, throttle + 10);
}
},
/**

View File

@ -694,12 +694,17 @@ Kinetic.Node.prototype = {
go._addAnimation(anim);
// subscribe to onFinished for first tween
trans.tweens[0].onFinished = function() {
trans.onFinished = function() {
// remove animation
go._removeAnimation(anim);
this.transAnim = undefined;
that.transAnim = undefined;
// callback
if(config.callback !== undefined) {
config.callback();
}
anim.node.draw();
};
// auto start
trans.start();

View File

@ -28,6 +28,18 @@ Kinetic.Transition = function(node, config) {
}
}
}
var finishedTweens = 0;
var that = this;
for(var n = 0; n < this.tweens.length; n++) {
var tween = this.tweens[n];
tween.onFinished = function() {
finishedTweens++;
if(finishedTweens >= that.tweens.length) {
that.onFinished();
}
};
}
};
/*
* Transition methods
@ -352,7 +364,7 @@ Kinetic.Tweens = {
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
},
'elastic-ease-in-out': function(t, b, c, d, a, p) {
// added s = 0
// added s = 0
var s = 0;
if(t === 0) {
return b;

View File

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

View File

@ -27,7 +27,7 @@ Test.prototype.tests = {
easing: 'bounce-ease-out'
});
},
/*
'TRANSITION - all transition types': function(containerId) {
document.getElementById(containerId).style.height = '300px';
@ -61,7 +61,7 @@ Test.prototype.tests = {
stage.add(layer);
},
*/
'TRANSITION - transition callback': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,

View File

@ -2594,7 +2594,7 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
x: 0,
y: 100,
width: 100,
height: 50,
@ -2609,7 +2609,7 @@ Test.prototype.tests = {
var amplitude = 150;
var period = 1000;
// in ms
var centerX = 200;
var centerX = 0;
stage.onFrame(function(frame) {
rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
@ -2628,6 +2628,8 @@ Test.prototype.tests = {
x: 300,
duration: 1,
callback: function() {
test(rect.getX() === 300, 'rect x is not 300');
test(go.animations.length === 0, 'should be no animations running');
test(stage.animRunning === false, 'animRunning should be false');