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

added foundation for transition support, and added linear transitions. easeIn, easeOut, and easeInOut transitions will come later.

Browse Source 
git status
This commit is contained in:
Eric Rowell
2012-03-12 22:41:09 -07:00
parent 0375fdc400
commit 1ac858dea5
8 changed files with 252 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
tests/functionalTests.js
View File

@@ -2,6 +2,57 @@ function Test() {
this.testOnly = "";
this.counter = 0;
this.tests = {
"TRANSITION - transition position": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 10,
y: 100,
width: 100,
height: 50,
fill: "green",
stroke: "black",
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
rect.transitionTo({
x: 400,
y: 30,
rotation: Math.PI * 2,
duration: 1
});
},
"ANIMATION - run animation": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: "green",
stroke: "black",
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
var amplitude = 150;
var period = 1000;
// in ms
var centerX = stage.width / 2 - 100 / 2;
stage.onFrame(function(frame) {
rect.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX;
layer.draw();
});
stage.start();
},
"EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();

28
tests/unitTests.js
View File

@@ -1179,34 +1179,6 @@ function Test() {
test(stage.isAnimating === false, "stage should not be animating");
test(Kinetic.GlobalObject.isAnimating === false, "global object should not be animating");
},
"ANIMATION - run animation": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: "green",
stroke: "black",
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
var amplitude = 150;
var period = 1000;
// in ms
var centerX = stage.width / 2 - 100 / 2;
stage.onFrame(function(frame) {
rect.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX;
layer.draw();
});
stage.start();
}
};
}