lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -1,12 +1,4 @@
#KineticJS
[http://www.kineticjs.com](KineticJS)
Greetings fellow webonauts! KineticJS is an HTML5 Canvas JavaScript library that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
You can draw your own shapes or images using the existing canvas API, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.
#Building the library
#Building the KineticJS library
To build the library, you need to have Ruby and Rubygems installed. After that, install the dependencies by running `bundle install`.
To build a development version of the library, run `thor build:dev VERSION`, where VERSION is a string that can be anything you like. For example, using `thor build:dev core` will produce `kinetic-core.js`. To build a minified version of the library, run `thor build:prod VERSION`. If you want to add a release date other than the current day, use `-d="DATE"` (e.g. `-d="Mar 07 2012`).

103
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Mar 12 2012
* Date: Mar 13 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@ -74,8 +74,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];
}
}
}
},
@ -83,8 +93,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;
}
}
}
},
@ -117,13 +137,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]);
}
}
@ -139,7 +163,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;
@ -160,7 +185,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;
}
@ -172,7 +199,6 @@ window.requestAnimFrame = (function(callback) {
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
///////////////////////////////////////////////////////////////////////
@ -309,7 +335,8 @@ Kinetic.Node.prototype = {
break;
}
}
} else {
}
else {
this.eventListeners[baseEvent] = undefined;
}
}
@ -342,7 +369,8 @@ Kinetic.Node.prototype = {
if(scaleY) {
this.scale.x = scaleX;
this.scale.y = scaleY;
} else {
}
else {
this.scale.x = scaleX;
this.scale.y = scaleX;
}
@ -535,7 +563,8 @@ Kinetic.Node.prototype = {
if(needInit) {
this._initDrag();
}
} else {
}
else {
this.drag.x = false;
this.drag.y = false;
this._dragCleanup();
@ -552,7 +581,8 @@ Kinetic.Node.prototype = {
if(needInit) {
this._initDrag();
}
} else {
}
else {
this.drag.x = false;
this._dragCleanup();
}
@ -568,7 +598,8 @@ Kinetic.Node.prototype = {
if(needInit) {
this._initDrag();
}
} else {
}
else {
this.drag.y = false;
this._dragCleanup();
}
@ -614,7 +645,8 @@ Kinetic.Node.prototype = {
getLayer: function() {
if(this.className === 'Layer') {
return this;
} else {
}
else {
return this.getParent().getLayer();
}
},
@ -624,7 +656,8 @@ Kinetic.Node.prototype = {
getStage: function() {
if(this.className === 'Stage') {
return this;
} else {
}
else {
return this.getParent().getStage();
}
},
@ -650,17 +683,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;
}
}
}
@ -718,7 +766,6 @@ Kinetic.Node.prototype = {
handle(obj.parent);
}
}
/*
* simulate bubbling by handling node events
* first, followed by group events, followed
@ -1611,7 +1658,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;
}
}
@ -1627,11 +1676,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();

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

File diff suppressed because one or more lines are too long

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();

4
tests/functionalTests.js
View File

@ -2,11 +2,11 @@ function Test() {
this.testOnly = "";
this.counter = 0;
this.tests = {
"TRANSITION - transition position": function(containerId) {
"TRANSITION - transition position and rotation": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 10,
x: 100,
y: 100,
width: 100,
height: 50,