lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-27 17:09:44 +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

78
dist/kinetic-core.js vendored
View File

@ -75,7 +75,7 @@ Kinetic.GlobalObject = {
}
}
}
this.frame.lastTime = 0;
return false;
},
@ -98,21 +98,50 @@ Kinetic.GlobalObject = {
}
}
},
_linearTransition: function(frame) {
var config = this.config;
_linearTransition: function(transition, key, prop) {
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) {
if(config.hasOwnProperty(key)) {
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing') {
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;
this._chooseTransition(transition, key, prop);
}
}
}
else {
this.node[key] += this.changes[key] * frame.timeDiff;
this._chooseTransition(transition, key);
}
}
}
@ -161,7 +190,7 @@ Kinetic.GlobalObject = {
}
}
else {
this._linearTransition.apply(transition, [this.frame]);
this._runTransition(transition);
}
}
@ -653,22 +682,29 @@ Kinetic.Node.prototype = {
var layer = this.getLayer();
var that = this;
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) {
if(config.hasOwnProperty(key)) {
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing') {
if(config[key].x !== undefined || config[key].y !== undefined) {
changes[key] = {};
starts[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;
starts[key][prop] = this[key][prop];
}
}
}
else {
changes[key] = (config[key] - that[key]) / duration;
starts[key] = this[key];
}
}
}
@ -678,9 +714,9 @@ Kinetic.Node.prototype = {
time: 0,
config: config,
node: this,
changes: changes
starts: starts
});
layer.isTransitioning = true;
Kinetic.GlobalObject._handleAnimation();
},
@ -1600,7 +1636,7 @@ Kinetic.Layer = function(config) {
this.transitions = [];
this.transitionIdCounter = 0;
this.isTransitioning = false;
// call super constructors
Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]);
@ -1657,6 +1693,18 @@ Kinetic.Layer.prototype = {
if(this.visible) {
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

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

File diff suppressed because one or more lines are too long

43
src/GlobalObject.js
View File

@ -47,7 +47,7 @@ Kinetic.GlobalObject = {
}
}
}
this.frame.lastTime = 0;
return false;
},
@ -70,21 +70,50 @@ Kinetic.GlobalObject = {
}
}
},
_linearTransition: function(frame) {
var config = this.config;
_linearTransition: function(transition, key, prop) {
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) {
if(config.hasOwnProperty(key)) {
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing') {
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;
this._chooseTransition(transition, key, prop);
}
}
}
else {
this.node[key] += this.changes[key] * frame.timeDiff;
this._chooseTransition(transition, key);
}
}
}
@ -133,7 +162,7 @@ Kinetic.GlobalObject = {
}
}
else {
this._linearTransition.apply(transition, [this.frame]);
this._runTransition(transition);
}
}

14
src/Layer.js
View File

@ -17,7 +17,7 @@ Kinetic.Layer = function(config) {
this.transitions = [];
this.transitionIdCounter = 0;
this.isTransitioning = false;
// call super constructors
Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]);
@ -74,6 +74,18 @@ Kinetic.Layer.prototype = {
if(this.visible) {
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

21
src/Node.js
View File

@ -443,22 +443,29 @@ Kinetic.Node.prototype = {
var layer = this.getLayer();
var that = this;
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) {
if(config.hasOwnProperty(key)) {
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing') {
if(config[key].x !== undefined || config[key].y !== undefined) {
changes[key] = {};
starts[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;
starts[key][prop] = this[key][prop];
}
}
}
else {
changes[key] = (config[key] - that[key]) / duration;
starts[key] = this[key];
}
}
}
@ -468,9 +475,9 @@ Kinetic.Node.prototype = {
time: 0,
config: config,
node: this,
changes: changes
starts: starts
});
layer.isTransitioning = true;
Kinetic.GlobalObject._handleAnimation();
},

2
tests/js/functionalTests.js
View File

@ -81,7 +81,7 @@ Test.prototype.tests = {
stage.stop();
}, 1000);
},
'TRANSITION - hover transition': function(containerId) {
'TRANSITION - hover linear transition': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({