lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 00:36:20 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

prepared transition logic for new easing functions

Browse Source
This commit is contained in:
Eric Rowell 2012-03-19 21:09:13 -07:00
parent 588b65a849
commit 8f0aebad11
6 changed files with 128 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
dist/kinetic-core.js vendored
View File

@ -98,21 +98,50 @@ Kinetic.GlobalObject = {
} }
} }
}, },
_linearTransition: function(frame) { _linearTransition: function(transition, key, prop) {
var config = this.config; 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;
}
else {
var start = transition.starts[key];
var change = config[key] - start;
var velocity = change / (config.duration * 1000);
transition.node[key] = velocity * transition.time + start;
}
},
_easeInOutTransition: function(transition, key, prop) {
},
_chooseTransition: function(transition, key, prop) {
var config = transition.config;
switch(config.easing) {
case 'easeInOut':
break;
// linear is default
default:
this._linearTransition(transition, key, prop);
}
},
_runTransition: function(transition) {
var config = transition.config;
for(var key in config) { for(var key in config) {
if(config.hasOwnProperty(key)) { if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing') {
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++) {
var prop = propArray[n]; var prop = propArray[n];
if(config[key][prop] !== undefined) { if(config[key][prop] !== undefined) {
this.node[key][prop] += this.changes[key][prop] * frame.timeDiff; this._chooseTransition(transition, key, prop);
} }
} }
} }
else { else {
this.node[key] += this.changes[key] * frame.timeDiff; this._chooseTransition(transition, key);
} }
} }
} }
@ -161,7 +190,7 @@ Kinetic.GlobalObject = {
} }
} }
else { else {
this._linearTransition.apply(transition, [this.frame]); this._runTransition(transition);
} }
} }
@ -653,22 +682,29 @@ Kinetic.Node.prototype = {
var layer = this.getLayer(); var layer = this.getLayer();
var that = this; var that = this;
var duration = config.duration * 1000; var duration = config.duration * 1000;
var changes = {}; var starts = {};
/*
* clear transition if one is currenlty running.
* This make it easy to start new transitions without
* having to explicitly cancel old ones
*/
layer._clearTransition(this);
for(var key in config) { for(var key in config) {
if(config.hasOwnProperty(key)) { if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing') {
if(config[key].x !== undefined || config[key].y !== undefined) { if(config[key].x !== undefined || config[key].y !== undefined) {
changes[key] = {}; starts[key] = {};
var propArray = ['x', 'y']; var propArray = ['x', 'y'];
for(var n = 0; n < propArray.length; n++) { for(var n = 0; n < propArray.length; n++) {
var prop = propArray[n]; var prop = propArray[n];
if(config[key][prop] !== undefined) { if(config[key][prop] !== undefined) {
changes[key][prop] = (config[key][prop] - that[key][prop]) / duration; starts[key][prop] = this[key][prop];
} }
} }
} }
else { else {
changes[key] = (config[key] - that[key]) / duration; starts[key] = this[key];
} }
} }
} }
@ -678,7 +714,7 @@ Kinetic.Node.prototype = {
time: 0, time: 0,
config: config, config: config,
node: this, node: this,
changes: changes starts: starts
}); });
layer.isTransitioning = true; layer.isTransitioning = true;
@ -1657,6 +1693,18 @@ Kinetic.Layer.prototype = {
if(this.visible) { if(this.visible) {
this._drawChildren(); this._drawChildren();
} }
},
/**
* clear transition if one is running
*/
_clearTransition: function(shape) {
for(var n = 0; n < this.transitions.length; n++) {
var transition = this.transitions[n];
if(transition.node.id === shape.id) {
Kinetic.GlobalObject._removeTransition(transition);
return false;
}
}
} }
}; };
// Extend Container and Node // Extend Container and Node

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

File diff suppressed because one or more lines are too long

41
src/GlobalObject.js
View File

@ -70,21 +70,50 @@ Kinetic.GlobalObject = {
} }
} }
}, },
_linearTransition: function(frame) { _linearTransition: function(transition, key, prop) {
var config = this.config; 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;
}
else {
var start = transition.starts[key];
var change = config[key] - start;
var velocity = change / (config.duration * 1000);
transition.node[key] = velocity * transition.time + start;
}
},
_easeInOutTransition: function(transition, key, prop) {
},
_chooseTransition: function(transition, key, prop) {
var config = transition.config;
switch(config.easing) {
case 'easeInOut':
break;
// linear is default
default:
this._linearTransition(transition, key, prop);
}
},
_runTransition: function(transition) {
var config = transition.config;
for(var key in config) { for(var key in config) {
if(config.hasOwnProperty(key)) { if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing') {
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++) {
var prop = propArray[n]; var prop = propArray[n];
if(config[key][prop] !== undefined) { if(config[key][prop] !== undefined) {
this.node[key][prop] += this.changes[key][prop] * frame.timeDiff; this._chooseTransition(transition, key, prop);
} }
} }
} }
else { else {
this.node[key] += this.changes[key] * frame.timeDiff; this._chooseTransition(transition, key);
} }
} }
} }
@ -133,7 +162,7 @@ Kinetic.GlobalObject = {
} }
} }
else { else {
this._linearTransition.apply(transition, [this.frame]); this._runTransition(transition);
} }
} }

12
src/Layer.js
View File

@ -74,6 +74,18 @@ Kinetic.Layer.prototype = {
if(this.visible) { if(this.visible) {
this._drawChildren(); this._drawChildren();
} }
},
/**
* clear transition if one is running
*/
_clearTransition: function(shape) {
for(var n = 0; n < this.transitions.length; n++) {
var transition = this.transitions[n];
if(transition.node.id === shape.id) {
Kinetic.GlobalObject._removeTransition(transition);
return false;
}
}
} }
}; };
// Extend Container and Node // Extend Container and Node

19
src/Node.js
View File

@ -443,22 +443,29 @@ Kinetic.Node.prototype = {
var layer = this.getLayer(); var layer = this.getLayer();
var that = this; var that = this;
var duration = config.duration * 1000; var duration = config.duration * 1000;
var changes = {}; var starts = {};
/*
* clear transition if one is currenlty running.
* This make it easy to start new transitions without
* having to explicitly cancel old ones
*/
layer._clearTransition(this);
for(var key in config) { for(var key in config) {
if(config.hasOwnProperty(key)) { if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing') {
if(config[key].x !== undefined || config[key].y !== undefined) { if(config[key].x !== undefined || config[key].y !== undefined) {
changes[key] = {}; starts[key] = {};
var propArray = ['x', 'y']; var propArray = ['x', 'y'];
for(var n = 0; n < propArray.length; n++) { for(var n = 0; n < propArray.length; n++) {
var prop = propArray[n]; var prop = propArray[n];
if(config[key][prop] !== undefined) { if(config[key][prop] !== undefined) {
changes[key][prop] = (config[key][prop] - that[key][prop]) / duration; starts[key][prop] = this[key][prop];
} }
} }
} }
else { else {
changes[key] = (config[key] - that[key]) / duration; starts[key] = this[key];
} }
} }
} }
@ -468,7 +475,7 @@ Kinetic.Node.prototype = {
time: 0, time: 0,
config: config, config: config,
node: this, node: this,
changes: changes starts: starts
}); });
layer.isTransitioning = true; layer.isTransitioning = true;

2
tests/js/functionalTests.js
View File

@ -81,7 +81,7 @@ Test.prototype.tests = {
stage.stop(); stage.stop();
}, 1000); }, 1000);
}, },
'TRANSITION - hover 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);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({ var rect = new Kinetic.Rect({