lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-30 01:00:25 +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 timeDiff = this.frame.timeDiff;
if(prop !== undefined) {
var start = transition.starts[key][prop];
var change = config[key][prop] - start;
var velocity = change / (config.duration * 1000);
transition.node[key][prop] = velocity * transition.time + start;
var b = change / (Math.pow(config.duration * 1000, pow));
transition.node[key][prop] = b * Math.pow(transition.time, pow) + start;
}
else {
var start = transition.starts[key];
var change = config[key] - start;
var velocity = change / (config.duration * 1000);
transition.node[key] = velocity * transition.time + start;
var b = change / (Math.pow(config.duration * 1000, pow));
transition.node[key] = b * Math.pow(transition.time, pow) + start;
}
},
_easeInOutTransition: function(transition, key, prop) {
},
_chooseTransition: function(transition, key, prop) {
var config = transition.config;
var that = this;
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;
// linear is default
default:
this._linearTransition(transition, key, prop);
this._transitionPow(transition, key, prop, function() {
return 1;
});
break;
}
},
_runTransition: function(transition) {
var config = transition.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) {
var propArray = ['x', 'y'];
for(var n = 0; n < propArray.length; n++) {
@ -169,9 +187,6 @@ Kinetic.GlobalObject = {
stage.onFrameFunc(this.frame);
}
/*
* run transitions
*/
// loop through layers
var layers = stage.getChildren();
for(var k = 0; k < layers.length; k++) {
@ -692,7 +707,7 @@ Kinetic.Node.prototype = {
layer._clearTransition(this);
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) {
starts[key] = {};
var propArray = ['x', 'y'];
@ -1702,7 +1717,6 @@ Kinetic.Layer.prototype = {
var transition = this.transitions[n];
if(transition.node.id === shape.id) {
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 timeDiff = this.frame.timeDiff;
if(prop !== undefined) {
var start = transition.starts[key][prop];
var change = config[key][prop] - start;
var velocity = change / (config.duration * 1000);
transition.node[key][prop] = velocity * transition.time + start;
var b = change / (Math.pow(config.duration * 1000, pow));
transition.node[key][prop] = b * Math.pow(transition.time, pow) + start;
}
else {
var start = transition.starts[key];
var change = config[key] - start;
var velocity = change / (config.duration * 1000);
transition.node[key] = velocity * transition.time + start;
var b = change / (Math.pow(config.duration * 1000, pow));
transition.node[key] = b * Math.pow(transition.time, pow) + start;
}
},
_easeInOutTransition: function(transition, key, prop) {
},
_chooseTransition: function(transition, key, prop) {
var config = transition.config;
var that = this;
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;
// linear is default
default:
this._linearTransition(transition, key, prop);
this._transitionPow(transition, key, prop, function() {
return 1;
});
break;
}
},
_runTransition: function(transition) {
var config = transition.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) {
var propArray = ['x', 'y'];
for(var n = 0; n < propArray.length; n++) {
@ -141,9 +159,6 @@ Kinetic.GlobalObject = {
stage.onFrameFunc(this.frame);
}
/*
* run transitions
*/
// loop through layers
var layers = stage.getChildren();
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];
if(transition.node.id === shape.id) {
Kinetic.GlobalObject._removeTransition(transition);
return false;
}
}
}

2
src/Node.js
View File

@ -453,7 +453,7 @@ Kinetic.Node.prototype = {
layer._clearTransition(this);
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) {
starts[key] = {};
var propArray = ['x', 'y'];

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"
});
});