lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-19 02:37:59 +08:00
Code Issues Actions 2 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
Download Patch File Download Diff File Expand all files Collapse all files

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