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

greatly improved transition performance by directly setting attr properties for each frame, and also removing unecessary redraws when transition finishes

Browse Source
This commit is contained in:
Eric Rowell 2012-10-28 22:41:13 -07:00
parent f1e2503873
commit fb90709b3a
6 changed files with 20 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/kinetic-Global-current.min.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: Oct 18 2012
* Date: Oct 28 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*

2
dist/kinetic-Transition-current.min.js vendored
View File

@ -1 +1 @@
Kinetic.Transition=function(a,b){function d(a,b,e,f){for(var g in a)g!=="duration"&&g!=="easing"&&g!=="callback"&&(Kinetic.Type._isObject(a[g])?(e[g]={},d(a[g],b[g],e[g],f)):c._add(c._getTween(b,g,a[g],e,f)))}this.node=a,this.config=b,this.tweens=[];var c=this,e={};d(b,a.attrs,e,e);var f=0;for(var g=0;g<this.tweens.length;g++){var h=this.tweens[g];h.onFinished=function(){f++,f>=c.tweens.length&&c.onFinished()}}},Kinetic.Transition.prototype={start:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].start()},stop:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].stop()},resume:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].resume()},_onEnterFrame:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].onEnterFrame()},_add:function(a){this.tweens.push(a)},_getTween:function(a,b,c,d,e){var f=this.config,g=this.node,h=f.easing;h===undefined&&(h="linear");var i=new Kinetic.Tween(g,function(a){d[b]=a,g.setAttrs(e)},Kinetic.Tweens[h],a[b],c,f.duration);return i}},Kinetic.Node.prototype.transitionTo=function(a){this.transAnim||(this.transAnim=new Kinetic.Animation);var b=this.nodeType==="Stage"?this:this.getLayer(),c=this,d=new Kinetic.Transition(this,a);return this.transAnim.func=function(){d._onEnterFrame()},this.transAnim.node=b,d.onFinished=function(){c.transAnim.stop(),c.transAnim.node.draw(),a.callback&&a.callback()},d.start(),this.transAnim.start(),d};
Kinetic.Transition=function(a,b){function d(a,b,e){for(var f in a)f!=="duration"&&f!=="easing"&&f!=="callback"&&(Kinetic.Type._isObject(a[f])?(e[f]={},d(a[f],b[f],e[f])):c._add(c._getTween(b,f,a[f],e)))}this.node=a,this.config=b,this.tweens=[];var c=this,e={};d(b,a.attrs,e);var f=0;for(var g=0;g<this.tweens.length;g++){var h=this.tweens[g];h.onFinished=function(){f++,f>=c.tweens.length&&c.onFinished()}}},Kinetic.Transition.prototype={start:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].start()},stop:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].stop()},resume:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].resume()},_onEnterFrame:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].onEnterFrame()},_add:function(a){this.tweens.push(a)},_getTween:function(a,b,c,d){var e=this.config,f=this.node,g=e.easing;g===undefined&&(g="linear");var h=new Kinetic.Tween(f,function(a){d[b]=a,f.attrs[b]=a},Kinetic.Tweens[g],a[b],c,e.duration);return h}},Kinetic.Node.prototype.transitionTo=function(a){this.transAnim||(this.transAnim=new Kinetic.Animation);var b=this.nodeType==="Stage"?this:this.getLayer(),c=this,d=new Kinetic.Transition(this,a);return this.transAnim.func=function(){d._onEnterFrame()},this.transAnim.node=b,d.onFinished=function(){c.transAnim.stop(),a.callback&&a.callback()},d.start(),this.transAnim.start(),d};

15
dist/kinetic-current.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: Oct 18 2012
* Date: Oct 28 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@ -2412,22 +2412,22 @@ Kinetic.Transition = function(node, config) {
var that = this;
// add tween for each property
function addTween(c, attrs, obj, rootObj) {
function addTween(c, attrs, obj) {
for(var key in c) {
if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
// if val is an object then traverse
if(Kinetic.Type._isObject(c[key])) {
obj[key] = {};
addTween(c[key], attrs[key], obj[key], rootObj);
addTween(c[key], attrs[key], obj[key]);
}
else {
that._add(that._getTween(attrs, key, c[key], obj, rootObj));
that._add(that._getTween(attrs, key, c[key], obj));
}
}
}
}
var obj = {};
addTween(config, node.attrs, obj, obj);
addTween(config, node.attrs, obj);
var finishedTweens = 0;
for(var n = 0; n < this.tweens.length; n++) {
@ -2482,7 +2482,7 @@ Kinetic.Transition.prototype = {
_add: function(tween) {
this.tweens.push(tween);
},
_getTween: function(attrs, prop, val, obj, rootObj) {
_getTween: function(attrs, prop, val, obj) {
var config = this.config;
var node = this.node;
var easing = config.easing;
@ -2492,7 +2492,7 @@ Kinetic.Transition.prototype = {
var tween = new Kinetic.Tween(node, function(i) {
obj[prop] = i;
node.setAttrs(rootObj);
node.attrs[prop] = i;
}, Kinetic.Tweens[easing], attrs[prop], val, config.duration);
return tween;
@ -2535,7 +2535,6 @@ Kinetic.Node.prototype.transitionTo = function(config) {
trans.onFinished = function() {
// remove animation
that.transAnim.stop();
that.transAnim.node.draw();
// callback
if(config.callback) {

8
dist/kinetic-current.min.js vendored
View File

File diff suppressed because one or more lines are too long

13
src/Transition.js
View File

@ -11,22 +11,22 @@ Kinetic.Transition = function(node, config) {
var that = this;
// add tween for each property
function addTween(c, attrs, obj, rootObj) {
function addTween(c, attrs, obj) {
for(var key in c) {
if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
// if val is an object then traverse
if(Kinetic.Type._isObject(c[key])) {
obj[key] = {};
addTween(c[key], attrs[key], obj[key], rootObj);
addTween(c[key], attrs[key], obj[key]);
}
else {
that._add(that._getTween(attrs, key, c[key], obj, rootObj));
that._add(that._getTween(attrs, key, c[key], obj));
}
}
}
}
var obj = {};
addTween(config, node.attrs, obj, obj);
addTween(config, node.attrs, obj);
var finishedTweens = 0;
for(var n = 0; n < this.tweens.length; n++) {
@ -81,7 +81,7 @@ Kinetic.Transition.prototype = {
_add: function(tween) {
this.tweens.push(tween);
},
_getTween: function(attrs, prop, val, obj, rootObj) {
_getTween: function(attrs, prop, val, obj) {
var config = this.config;
var node = this.node;
var easing = config.easing;
@ -91,7 +91,7 @@ Kinetic.Transition.prototype = {
var tween = new Kinetic.Tween(node, function(i) {
obj[prop] = i;
node.setAttrs(rootObj);
node.attrs[prop] = i;
}, Kinetic.Tweens[easing], attrs[prop], val, config.duration);
return tween;
@ -134,7 +134,6 @@ Kinetic.Node.prototype.transitionTo = function(config) {
trans.onFinished = function() {
// remove animation
that.transAnim.stop();
that.transAnim.node.draw();
// callback
if(config.callback) {

2
tests/js/manualTests.js
View File

@ -109,7 +109,7 @@ Test.prototype.tests = {
easing: 'bounce-ease-out'
});
},
'TRANSITION - all transition types': function(containerId) {
'*TRANSITION - all transition types': function(containerId) {
document.getElementById(containerId).style.height = '300px';
var stage = new Kinetic.Stage({