lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 14:29:07 +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

50
dist/kinetic-core.js vendored
View File

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

50
src/util/Transition.js
View File

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

12
tests/js/unitTests.js
View File

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