lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-27 23:17:42 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
dist/kinetic-core.js vendored
View File

@ -98,39 +98,57 @@ Kinetic.GlobalObject = {
} }
} }
}, },
_linearTransition: function(transition, key, prop) { _transitionPow: function(transition, key, prop, powFunc) {
var pow = powFunc();
var config = transition.config; var config = transition.config;
var timeDiff = this.frame.timeDiff; var timeDiff = this.frame.timeDiff;
if(prop !== undefined) { if(prop !== undefined) {
var start = transition.starts[key][prop]; var start = transition.starts[key][prop];
var change = config[key][prop] - start; var change = config[key][prop] - start;
var velocity = change / (config.duration * 1000); var b = change / (Math.pow(config.duration * 1000, pow));
transition.node[key][prop] = velocity * transition.time + start; transition.node[key][prop] = b * Math.pow(transition.time, pow) + start;
} }
else { else {
var start = transition.starts[key]; var start = transition.starts[key];
var change = config[key] - start; var change = config[key] - start;
var velocity = change / (config.duration * 1000); var b = change / (Math.pow(config.duration * 1000, pow));
transition.node[key] = velocity * transition.time + start; transition.node[key] = b * Math.pow(transition.time, pow) + start;
} }
},
_easeInOutTransition: function(transition, key, prop) {
}, },
_chooseTransition: function(transition, key, prop) { _chooseTransition: function(transition, key, prop) {
var config = transition.config; var config = transition.config;
var that = this;
switch(config.easing) { switch(config.easing) {
case 'easeInOut': case 'ease-in':
this._transitionPow(transition, key, prop, function() {
return 2.5;
});
break;
case 'ease-out':
this._transitionPow(transition, key, prop, function() {
return 0.4;
});
break;
case 'ease-in-out':
this._transitionPow(transition, key, prop, function() {
var change = -2.1;
var b = change / (config.duration * 1000);
return 2.5 + b * transition.time;
});
break; break;
// linear is default // linear is default
default: default:
this._linearTransition(transition, key, prop); this._transitionPow(transition, key, prop, function() {
return 1;
});
break;
} }
}, },
_runTransition: function(transition) { _runTransition: function(transition) {
var config = transition.config; var config = transition.config;
for(var key in config) { for(var key in config) {
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing') { if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
if(config[key].x !== undefined || config[key].y !== undefined) { if(config[key].x !== undefined || config[key].y !== undefined) {
var propArray = ['x', 'y']; var propArray = ['x', 'y'];
for(var n = 0; n < propArray.length; n++) { for(var n = 0; n < propArray.length; n++) {
@ -169,9 +187,6 @@ Kinetic.GlobalObject = {
stage.onFrameFunc(this.frame); stage.onFrameFunc(this.frame);
} }
/*
* run transitions
*/
// loop through layers // loop through layers
var layers = stage.getChildren(); var layers = stage.getChildren();
for(var k = 0; k < layers.length; k++) { for(var k = 0; k < layers.length; k++) {
@ -692,7 +707,7 @@ Kinetic.Node.prototype = {
layer._clearTransition(this); layer._clearTransition(this);
for(var key in config) { for(var key in config) {
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing') { if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
if(config[key].x !== undefined || config[key].y !== undefined) { if(config[key].x !== undefined || config[key].y !== undefined) {
starts[key] = {}; starts[key] = {};
var propArray = ['x', 'y']; var propArray = ['x', 'y'];
@ -1702,7 +1717,6 @@ Kinetic.Layer.prototype = {
var transition = this.transitions[n]; var transition = this.transitions[n];
if(transition.node.id === shape.id) { if(transition.node.id === shape.id) {
Kinetic.GlobalObject._removeTransition(transition); Kinetic.GlobalObject._removeTransition(transition);
return false;
} }
} }
} }

2
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

43
src/GlobalObject.js
View File

@ -70,39 +70,57 @@ Kinetic.GlobalObject = {
} }
} }
}, },
_linearTransition: function(transition, key, prop) { _transitionPow: function(transition, key, prop, powFunc) {
var pow = powFunc();
var config = transition.config; var config = transition.config;
var timeDiff = this.frame.timeDiff; var timeDiff = this.frame.timeDiff;
if(prop !== undefined) { if(prop !== undefined) {
var start = transition.starts[key][prop]; var start = transition.starts[key][prop];
var change = config[key][prop] - start; var change = config[key][prop] - start;
var velocity = change / (config.duration * 1000); var b = change / (Math.pow(config.duration * 1000, pow));
transition.node[key][prop] = velocity * transition.time + start; transition.node[key][prop] = b * Math.pow(transition.time, pow) + start;
} }
else { else {
var start = transition.starts[key]; var start = transition.starts[key];
var change = config[key] - start; var change = config[key] - start;
var velocity = change / (config.duration * 1000); var b = change / (Math.pow(config.duration * 1000, pow));
transition.node[key] = velocity * transition.time + start; transition.node[key] = b * Math.pow(transition.time, pow) + start;
} }
},
_easeInOutTransition: function(transition, key, prop) {
}, },
_chooseTransition: function(transition, key, prop) { _chooseTransition: function(transition, key, prop) {
var config = transition.config; var config = transition.config;
var that = this;
switch(config.easing) { switch(config.easing) {
case 'easeInOut': case 'ease-in':
this._transitionPow(transition, key, prop, function() {
return 2.5;
});
break;
case 'ease-out':
this._transitionPow(transition, key, prop, function() {
return 0.4;
});
break;
case 'ease-in-out':
this._transitionPow(transition, key, prop, function() {
var change = -2.1;
var b = change / (config.duration * 1000);
return 2.5 + b * transition.time;
});
break; break;
// linear is default // linear is default
default: default:
this._linearTransition(transition, key, prop); this._transitionPow(transition, key, prop, function() {
return 1;
});
break;
} }
}, },
_runTransition: function(transition) { _runTransition: function(transition) {
var config = transition.config; var config = transition.config;
for(var key in config) { for(var key in config) {
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing') { if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
if(config[key].x !== undefined || config[key].y !== undefined) { if(config[key].x !== undefined || config[key].y !== undefined) {
var propArray = ['x', 'y']; var propArray = ['x', 'y'];
for(var n = 0; n < propArray.length; n++) { for(var n = 0; n < propArray.length; n++) {
@ -141,9 +159,6 @@ Kinetic.GlobalObject = {
stage.onFrameFunc(this.frame); stage.onFrameFunc(this.frame);
} }
/*
* run transitions
*/
// loop through layers // loop through layers
var layers = stage.getChildren(); var layers = stage.getChildren();
for(var k = 0; k < layers.length; k++) { for(var k = 0; k < layers.length; k++) {

1
src/Layer.js
View File

@ -83,7 +83,6 @@ Kinetic.Layer.prototype = {
var transition = this.transitions[n]; var transition = this.transitions[n];
if(transition.node.id === shape.id) { if(transition.node.id === shape.id) {
Kinetic.GlobalObject._removeTransition(transition); Kinetic.GlobalObject._removeTransition(transition);
return false;
} }
} }
} }

2
src/Node.js
View File

@ -453,7 +453,7 @@ Kinetic.Node.prototype = {
layer._clearTransition(this); layer._clearTransition(this);
for(var key in config) { for(var key in config) {
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing') { if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
if(config[key].x !== undefined || config[key].y !== undefined) { if(config[key].x !== undefined || config[key].y !== undefined) {
starts[key] = {}; starts[key] = {};
var propArray = ['x', 'y']; var propArray = ['x', 'y'];

139
tests/js/functionalTests.js
View File

@ -79,7 +79,7 @@ Test.prototype.tests = {
setTimeout(function() { setTimeout(function() {
stage.stop(); stage.stop();
}, 1000); }, 3000);
}, },
'TRANSITION - hover linear transition': function(containerId) { 'TRANSITION - hover linear transition': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200); var stage = new Kinetic.Stage(containerId, 578, 200);
@ -101,10 +101,10 @@ Test.prototype.tests = {
rect.on("mouseover", function() { rect.on("mouseover", function() {
this.transitionTo({ this.transitionTo({
scale: { scale: {
x: 1.3, x: 1.5,
y: 1.3 y: 1.5
}, },
duration: 0.3 duration: 1
}); });
}); });
@ -114,7 +114,136 @@ Test.prototype.tests = {
x: 1, x: 1,
y: 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"
}); });
}); });