mirror of
https://github.com/konvajs/konva.git
synced 2025-06-27 21:30:35 +08:00
tweaked throttling algo and added unit tests
This commit is contained in:
parent
ff31dcb0ae
commit
ffd9924511
33
dist/kinetic-core.js
vendored
33
dist/kinetic-core.js
vendored
@ -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;
|
||||
|
4
dist/kinetic-core.min.js
vendored
4
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
10
src/Layer.js
10
src/Layer.js
@ -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);
|
||||
}
|
||||
},
|
||||
/**
|
||||
|
@ -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();
|
||||
|
@ -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;
|
||||
|
@ -10,7 +10,7 @@ function log(message) {
|
||||
* Test constructor
|
||||
*/
|
||||
function Test() {
|
||||
this.testOnly = '';
|
||||
this.testOnly = 'TRANSITION - all transition types';
|
||||
this.counter = 0;
|
||||
}
|
||||
/**
|
||||
|
@ -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,
|
||||
|
@ -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');
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user