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

transitions can now operate on ANY numeric value for any Node object, regardless of the property's depth in a config object tree

Browse Source
This commit is contained in:
Eric Rowell 2012-05-13 18:59:10 -07:00
parent 9944b897c4
commit 2ac2c2856c
5 changed files with 49 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
dist/kinetic-core.js vendored
View File

@ -4021,29 +4021,25 @@ Kinetic.Transition = function(node, config) {
this.node = node; this.node = node;
this.config = config; this.config = config;
this.tweens = []; this.tweens = [];
var that = this;
// add tween for each property // add tween for each property
for(var key in config) { function addTween(c, attrs) {
if(key !== 'duration' && key !== 'easing' && key !== 'callback') { for(var key in c) {
if(config[key].x === undefined && config[key].y === undefined && config[key].width === undefined && config[key].height === undefined) { if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
this.add(this._getTween(key, config)); // if val is an object then traverse
} if(Kinetic.GlobalObject._isObject(c[key])) {
addTween(c[key], attrs[key]);
if(config[key].x !== undefined) { }
this.add(this._getComponentTween(key, 'x', config)); else {
} that.add(that._getTween(attrs, key, c[key]));
if(config[key].y !== undefined) { }
this.add(this._getComponentTween(key, 'y', config));
}
if(config[key].width !== undefined) {
this.add(this._getComponentTween(key, 'width', config));
}
if(config[key].height !== undefined) {
this.add(this._getComponentTween(key, 'height', config));
} }
} }
} }
addTween(config, node.attrs);
var finishedTweens = 0; var finishedTweens = 0;
var that = this; var that = this;
for(var n = 0; n < this.tweens.length; n++) { for(var n = 0; n < this.tweens.length; n++) {
@ -4099,7 +4095,7 @@ Kinetic.Transition.prototype = {
this.tweens[n].resume(); this.tweens[n].resume();
} }
}, },
_getTween: function(key) { _getTween: function(key, prop, val) {
var config = this.config; var config = this.config;
var node = this.node; var node = this.node;
var easing = config.easing; var easing = config.easing;
@ -4108,25 +4104,11 @@ Kinetic.Transition.prototype = {
} }
var tween = new Kinetic.Tween(node, function(i) { var tween = new Kinetic.Tween(node, function(i) {
node.attrs[key] = i; key[prop] = i;
}, Kinetic.Tweens[easing], node.attrs[key], config[key], config.duration); }, Kinetic.Tweens[easing], key[prop], val, config.duration);
return tween; return tween;
}, }
_getComponentTween: function(key, prop) {
var config = this.config;
var node = this.node;
var easing = config.easing;
if(easing === undefined) {
easing = 'linear';
}
var tween = new Kinetic.Tween(node, function(i) {
node.attrs[key][prop] = i;
}, Kinetic.Tweens[easing], node.attrs[key][prop], config[key][prop], config.duration);
return tween;
},
}; };
/** /**

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

File diff suppressed because one or more lines are too long

54
src/util/Transition.js
View File

@ -13,29 +13,25 @@ Kinetic.Transition = function(node, config) {
this.node = node; this.node = node;
this.config = config; this.config = config;
this.tweens = []; this.tweens = [];
var that = this;
// add tween for each property // add tween for each property
for(var key in config) { function addTween(c, attrs) {
if(key !== 'duration' && key !== 'easing' && key !== 'callback') { for(var key in c) {
if(config[key].x === undefined && config[key].y === undefined && config[key].width === undefined && config[key].height === undefined) { if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
this.add(this._getTween(key, config)); // if val is an object then traverse
} if(Kinetic.GlobalObject._isObject(c[key])) {
addTween(c[key], attrs[key]);
if(config[key].x !== undefined) { }
this.add(this._getComponentTween(key, 'x', config)); else {
} that.add(that._getTween(attrs, key, c[key]));
if(config[key].y !== undefined) { }
this.add(this._getComponentTween(key, 'y', config));
}
if(config[key].width !== undefined) {
this.add(this._getComponentTween(key, 'width', config));
}
if(config[key].height !== undefined) {
this.add(this._getComponentTween(key, 'height', config));
} }
} }
} }
addTween(config, node.attrs);
var finishedTweens = 0; var finishedTweens = 0;
var that = this; var that = this;
for(var n = 0; n < this.tweens.length; n++) { for(var n = 0; n < this.tweens.length; n++) {
@ -91,7 +87,7 @@ Kinetic.Transition.prototype = {
this.tweens[n].resume(); this.tweens[n].resume();
} }
}, },
_getTween: function(key) { _getTween: function(key, prop, val) {
var config = this.config; var config = this.config;
var node = this.node; var node = this.node;
var easing = config.easing; var easing = config.easing;
@ -100,25 +96,11 @@ Kinetic.Transition.prototype = {
} }
var tween = new Kinetic.Tween(node, function(i) { var tween = new Kinetic.Tween(node, function(i) {
node.attrs[key] = i; key[prop] = i;
}, Kinetic.Tweens[easing], node.attrs[key], config[key], config.duration); }, Kinetic.Tweens[easing], key[prop], val, config.duration);
return tween; return tween;
}, }
_getComponentTween: function(key, prop) {
var config = this.config;
var node = this.node;
var easing = config.easing;
if(easing === undefined) {
easing = 'linear';
}
var tween = new Kinetic.Tween(node, function(i) {
node.attrs[key][prop] = i;
}, Kinetic.Tweens[easing], node.attrs[key][prop], config[key][prop], config.duration);
return tween;
},
}; };
/** /**

1
tests/js/Test.js
View File

@ -11,7 +11,6 @@ function log(message) {
*/ */
function Test() { function Test() {
this.testOnly = ''; this.testOnly = '';
this.counter = 0;
} }
/** /**
* Test methods * Test methods

12
tests/js/unitTests.js
View File

@ -141,11 +141,23 @@ Test.prototype.tests = {
y: 0.5 y: 0.5
} }
}); });
group.add(circle); group.add(circle);
layer.add(group); layer.add(group);
stage.add(layer); stage.add(layer);
/*
circle.transitionTo({
duration: 1,
fill: {
start: {
x: 20
}
}
});
*/
}, },
'STAGE - add shape with alpha': function(containerId) { 'STAGE - add shape with alpha': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({