lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-03-03 16:58:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

finished transition code, complete with callback option whenever a transition is completed. All numeric Node properties can be transitioned. Will add easing function options later

Browse Source
This commit is contained in:
Eric Rowell
2012-03-13 21:16:25 -07:00
parent 1ac858dea5
commit a0c385261e
7 changed files with 156 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/GlobalObject.js
View File

@@ -46,8 +46,18 @@ Kinetic.GlobalObject = {
var config = this.config;
for(var key in config) {
if(config.hasOwnProperty(key)) {
this.node[key] = config[key];
this.node.getLayer().draw();
if(config[key].x !== undefined || config[key].y !== undefined) {
var propArray = ["x", "y"];
for(var n = 0; n < propArray.length; n++) {
var prop = propArray[n];
if(config[key][prop] !== undefined) {
this.node[key][prop] = config[key][prop];
}
}
}
else {
this.node[key] = config[key];
}
}
}
},
@@ -55,8 +65,18 @@ Kinetic.GlobalObject = {
var config = this.config;
for(var key in config) {
if(config.hasOwnProperty(key)) {
this.node[key] += this.changes[key] * frame.timeDiff;
this.node.getLayer().draw();
if(config[key].x !== undefined || config[key].y !== undefined) {
var propArray = ["x", "y"];
for(var n = 0; n < propArray.length; n++) {
var prop = propArray[n];
if(config[key][prop] !== undefined) {
this.node[key][prop] += this.changes[key][prop] * frame.timeDiff;
}
}
}
else {
this.node[key] += this.changes[key] * frame.timeDiff;
}
}
}
},
@@ -89,13 +109,17 @@ Kinetic.GlobalObject = {
var didTransition = false;
// loop through transitions
for(var i = 0; i < layer.transitions.length; i++) {
didTransition = true;
var transition = layer.transitions[i];
transition.time += this.frame.timeDiff;
if(transition.time >= transition.config.duration * 1000) {
this._endTransition.apply(transition);
this._removeTransition(transition);
} else {
didTransition = true;
if(transition.config.callback !== undefined) {
transition.config.callback();
}
}
else {
this._linearTransition.apply(transition, [this.frame]);
}
}
@@ -111,7 +135,8 @@ Kinetic.GlobalObject = {
var time = date.getTime();
if(this.frame.lastTime === 0) {
this.frame.lastTime = time;
} else {
}
else {
this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff;
@@ -132,7 +157,9 @@ Kinetic.GlobalObject = {
if(!this.isAnimating && this._isaCanvasAnimating()) {
this.isAnimating = true;
that._animationLoop();
} else if(this.isAnimating && !this._isaCanvasAnimating()) {
}
else
if(this.isAnimating && !this._isaCanvasAnimating()) {
this.isAnimating = false;
this.frame.lastTime = 0;
}
@@ -144,5 +171,4 @@ window.requestAnimFrame = (function(callback) {
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

43
src/Node.js
View File

@@ -132,7 +132,8 @@ Kinetic.Node.prototype = {
break;
}
}
} else {
}
else {
this.eventListeners[baseEvent] = undefined;
}
}
@@ -165,7 +166,8 @@ Kinetic.Node.prototype = {
if(scaleY) {
this.scale.x = scaleX;
this.scale.y = scaleY;
} else {
}
else {
this.scale.x = scaleX;
this.scale.y = scaleX;
}
@@ -358,7 +360,8 @@ Kinetic.Node.prototype = {
if(needInit) {
this._initDrag();
}
} else {
}
else {
this.drag.x = false;
this.drag.y = false;
this._dragCleanup();
@@ -375,7 +378,8 @@ Kinetic.Node.prototype = {
if(needInit) {
this._initDrag();
}
} else {
}
else {
this.drag.x = false;
this._dragCleanup();
}
@@ -391,7 +395,8 @@ Kinetic.Node.prototype = {
if(needInit) {
this._initDrag();
}
} else {
}
else {
this.drag.y = false;
this._dragCleanup();
}
@@ -437,7 +442,8 @@ Kinetic.Node.prototype = {
getLayer: function() {
if(this.className === 'Layer') {
return this;
} else {
}
else {
return this.getParent().getLayer();
}
},
@@ -447,7 +453,8 @@ Kinetic.Node.prototype = {
getStage: function() {
if(this.className === 'Stage') {
return this;
} else {
}
else {
return this.getParent().getStage();
}
},
@@ -473,17 +480,32 @@ Kinetic.Node.prototype = {
return this.centerOffset;
},
/**
* transition node to another state
* transition node to another state. Any property that can accept a real
* number such as x, y, rotation, alpha, strokeWidth, radius, scale.x, scale.y,
* centerOffset.x and centerOffset.y can be transitioned
* @param {Object} config
*/
transitionTo: function(config) {
var layer = this.getLayer();
var that = this;
var duration = config.duration * 1000;
var changes = {};
for(var key in config) {
if(config.hasOwnProperty(key)) {
changes[key] = (config[key] - that[key]) / (config.duration * 1000);
if(config[key].x !== undefined || config[key].y !== undefined) {
changes[key] = {};
var propArray = ["x", "y"];
for(var n = 0; n < propArray.length; n++) {
var prop = propArray[n];
if(config[key][prop] !== undefined) {
changes[key][prop] = (config[key][prop] - that[key][prop]) / duration;
}
}
}
else {
changes[key] = (config[key] - that[key]) / duration;
}
}
}
@@ -541,7 +563,6 @@ Kinetic.Node.prototype = {
handle(obj.parent);
}
}
/*
* simulate bubbling by handling node events
* first, followed by group events, followed

14
src/Shape.js
View File

@@ -15,7 +15,9 @@ Kinetic.Shape = function(config) {
if(config.stroke !== undefined || config.strokeWidth !== undefined) {
if(config.stroke === undefined) {
config.stroke = "black";
} else if(config.strokeWidth === undefined) {
}
else
if(config.strokeWidth === undefined) {
config.strokeWidth = 2;
}
}
@@ -31,11 +33,11 @@ Kinetic.Shape = function(config) {
*/
Kinetic.Shape.prototype = {
/**
* get layer context where the shape is being drawn. When
* the shape is being rendered, .getContext() returns the context of the
* user created layer that contains the shape. When the event detection
* engine is determining whether or not an event has occured on that shape,
* .getContext() returns the context of the invisible backstage layer.
* get layer context where the shape is being drawn. When
* the shape is being rendered, .getContext() returns the context of the
* user created layer that contains the shape. When the event detection
* engine is determining whether or not an event has occured on that shape,
* .getContext() returns the context of the invisible backstage layer.
*/
getContext: function() {
return this.tempLayer.getContext();