lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-02-25 13:12:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

implemented ease-in, ease-out, and ease-in-out transitions

Browse Source
This commit is contained in:
Eric Rowell
2012-03-19 22:36:30 -07:00
parent 8f0aebad11
commit 2977d8f1d8
6 changed files with 195 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
tests/js/functionalTests.js
View File

@@ -79,7 +79,7 @@ Test.prototype.tests = {
setTimeout(function() {
stage.stop();
}, 1000);
}, 3000);
},
'TRANSITION - hover linear transition': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
@@ -101,10 +101,10 @@ Test.prototype.tests = {
rect.on("mouseover", function() {
this.transitionTo({
scale: {
x: 1.3,
y: 1.3
x: 1.5,
y: 1.5
},
duration: 0.3
duration: 1
});
});
@@ -114,7 +114,136 @@ Test.prototype.tests = {
x: 1,
y: 1
},
duration: 0.3
duration: 1
});
});
layer.add(rect);
stage.add(layer);
},
'TRANSITION - hover ease-in transition': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.width / 2 - 50,
y: stage.height / 2 - 25,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
x: 50,
y: 25
}
});
rect.on("mouseover", function() {
this.transitionTo({
scale: {
x: 1.5,
y: 1.5
},
duration: 1,
easing: "ease-in"
});
});
rect.on("mouseout", function() {
this.transitionTo({
scale: {
x: 1,
y: 1
},
duration: 1,
easing: "ease-in"
});
});
layer.add(rect);
stage.add(layer);
},
'TRANSITION - hover ease-out transition': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.width / 2 - 50,
y: stage.height / 2 - 25,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
x: 50,
y: 25
}
});
rect.on("mouseover", function() {
this.transitionTo({
scale: {
x: 1.5,
y: 1.5
},
duration: 1,
easing: "ease-out"
});
});
rect.on("mouseout", function() {
this.transitionTo({
scale: {
x: 1,
y: 1
},
duration: 1,
easing: "ease-out"
});
});
layer.add(rect);
stage.add(layer);
},
'TRANSITION - hover ease-in-out transition': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.width / 2 - 50,
y: stage.height / 2 - 25,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
x: 50,
y: 25
}
});
rect.on("mouseover", function() {
this.transitionTo({
scale: {
x: 1.5,
y: 1.5
},
duration: 1,
easing: "ease-in-out"
});
});
rect.on("mouseout", function() {
this.transitionTo({
scale: {
x: 1,
y: 1
},
duration: 1,
easing: "ease-in-out"
});
});