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

finished new animation, transitions, and tweens functionality

Browse Source
This commit is contained in:
Eric Rowell
2012-04-03 23:00:35 -07:00
parent f953e4694f
commit 602220bdce
6 changed files with 234 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
tests/js/functionalTests.js
View File

@@ -27,6 +27,100 @@ Test.prototype.tests = {
easing: 'bounce-ease-out'
});
},
'TRANSITION - transition callback': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
rect.transitionTo({
duration: 2,
x: 400,
y: 30,
rotation: Math.PI * 2,
easing: 'bounce-ease-out',
callback: function() {
console.log('transition done!');
}
});
},
'TRANSITION - stop and resume transition': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
var trans = rect.transitionTo({
duration: 2,
x: 400,
y: 30,
rotation: Math.PI * 2,
easing: 'bounce-ease-out'
});
setTimeout(function() {
trans.stop();
}, 1000);
setTimeout(function() {
trans.resume();
}, 2000);
},
'TRANSITION - transition stage': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
var trans = stage.transitionTo({
duration: 2,
x: 400,
y: 30,
rotation: Math.PI * 2,
easing: 'bounce-ease-out'
});
},
'TRANSITION - transition position and rotation with two transitions': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,