Skip to content
Browse files

implemented custom request animation frame. So far it appears to perf…

…orm worse than the browser implementation (expected result). Going to go ahead and push this in case I want to refer to it later
  • Loading branch information...
1 parent f1e2503 commit 8ba3973c909538056723dc9fb21c33291a86374a @ericdrowell committed Oct 28, 2012
View
2 dist/kinetic-Animation-current.min.js
@@ -1 +1 @@
-Kinetic.Animation=function(a){a||(a={});for(var b in a)this[b]=a[b];this.frame={time:0,timeDiff:0,lastTime:(new Date).getTime()},this.id=Kinetic.Animation.animIdCounter++},Kinetic.Animation.prototype={start:function(){this.stop(),this.frame.lastTime=(new Date).getTime(),Kinetic.Animation._addAnimation(this),Kinetic.Animation._handleAnimation()},stop:function(){Kinetic.Animation._removeAnimation(this)}},Kinetic.Animation.animations=[],Kinetic.Animation.animIdCounter=0,Kinetic.Animation.animRunning=!1,Kinetic.Animation._addAnimation=function(a){this.animations.push(a)},Kinetic.Animation._removeAnimation=function(a){var b=a.id,c=this.animations;for(var d=0;d<c.length;d++)if(c[d].id===b)return this.animations.splice(d,1),!1},Kinetic.Animation._updateFrameObject=function(a){var b=(new Date).getTime();a.frame.timeDiff=b-a.frame.lastTime,a.frame.lastTime=b,a.frame.time+=a.frame.timeDiff},Kinetic.Animation._runFrames=function(){var a={};for(var b=0;b<this.animations.length;b++){var c=this.animations[b];this._updateFrameObject(c),c.node&&c.node._id!==undefined&&(a[c.node._id]=c.node),c.func&&c.func(c.frame)}for(var d in a)a[d].draw()},Kinetic.Animation._animationLoop=function(){if(this.animations.length>0){this._runFrames();var a=this;requestAnimFrame(function(){a._animationLoop()})}else this.animRunning=!1},Kinetic.Animation._handleAnimation=function(){var a=this;this.animRunning||(this.animRunning=!0,a._animationLoop())},requestAnimFrame=function(a){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}();
+Kinetic.Animation=function(a){a||(a={});for(var b in a)this[b]=a[b];this.frame={time:0,timeDiff:0,lastTime:(new Date).getTime()},this.id=Kinetic.Animation.animIdCounter++},Kinetic.Animation.prototype={start:function(){this.stop(),this.frame.lastTime=(new Date).getTime(),Kinetic.Animation._addAnimation(this),Kinetic.Animation._handleAnimation()},stop:function(){Kinetic.Animation._removeAnimation(this)}},Kinetic.Animation.animations=[],Kinetic.Animation.animIdCounter=0,Kinetic.Animation.animRunning=!1,Kinetic.Animation.interval=1e3/60,Kinetic.Animation.lastTime=0,Kinetic.Animation._addAnimation=function(a){this.animations.push(a)},Kinetic.Animation._removeAnimation=function(a){var b=a.id,c=this.animations;for(var d=0;d<c.length;d++)if(c[d].id===b)return this.animations.splice(d,1),!1},Kinetic.Animation._updateFrameObject=function(a){var b=(new Date).getTime();a.frame.timeDiff=b-a.frame.lastTime,a.frame.lastTime=b,a.frame.time+=a.frame.timeDiff},Kinetic.Animation._runFrames=function(){var a={};for(var b=0;b<this.animations.length;b++){var c=this.animations[b];this._updateFrameObject(c),c.node&&c.node._id!==undefined&&(a[c.node._id]=c.node),c.func&&c.func(c.frame)}for(var d in a)a[d].draw()},Kinetic.Animation._animationLoop=function(){if(this.animations.length>0){this._runFrames();var a=this;Kinetic.Animation._requestAnimFrame(function(){a._animationLoop()})}else this.animRunning=!1},Kinetic.Animation._handleAnimation=function(){var a=this;this.animRunning||(this.animRunning=!0,a._animationLoop())},Kinetic.Animation._requestAnimFrame=function(a){var b=Kinetic.Animation.interval,c=(new Date).getTime(),d=c-Kinetic.Animation.lastTime,e=d-b;e>1?Kinetic.Animation.interval+=.5:Kinetic.Animation.interval-=1,Kinetic.Animation.lastTime=c,setTimeout(a,b)};
View
2 dist/kinetic-Global-current.min.js
@@ -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
*
View
30 dist/kinetic-current.js
@@ -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
*
@@ -1016,6 +1016,8 @@ Kinetic.Animation.prototype = {
Kinetic.Animation.animations = [];
Kinetic.Animation.animIdCounter = 0;
Kinetic.Animation.animRunning = false;
+Kinetic.Animation.interval = 1000 / 60;
+Kinetic.Animation.lastTime = 0;
Kinetic.Animation._addAnimation = function(anim) {
this.animations.push(anim);
};
@@ -1064,7 +1066,7 @@ Kinetic.Animation._animationLoop = function() {
if(this.animations.length > 0) {
this._runFrames();
var that = this;
- requestAnimFrame(function() {
+ Kinetic.Animation._requestAnimFrame(function() {
that._animationLoop();
});
}
@@ -1079,12 +1081,24 @@ Kinetic.Animation._handleAnimation = function() {
that._animationLoop();
}
};
-requestAnimFrame = (function(callback) {
- return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
- function(callback) {
- window.setTimeout(callback, 1000 / 60);
- };
-})();
+Kinetic.Animation._requestAnimFrame = function(fun) {
+ var interval = Kinetic.Animation.interval;
+ var time = new Date().getTime();
+ var diff = time - Kinetic.Animation.lastTime;
+ // variance will always be positive
+ var variance = diff - interval;
+
+ // if variance gets high, we need to slow down the animation
+ if (variance > 1) {
+ Kinetic.Animation.interval += 0.5;
+ }
+ // if variance is low, we can try to speed up the animation
+ else {
+ Kinetic.Animation.interval -= 1;
+ }
+ Kinetic.Animation.lastTime = time;
+ setTimeout(fun, interval);
+};
/**
* Node constructor.&nbsp; Nodes are entities that can be transformed, layered,
View
8 dist/kinetic-current.min.js
4 additions, 4 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
28 src/Animation.js
@@ -50,6 +50,8 @@ Kinetic.Animation.prototype = {
Kinetic.Animation.animations = [];
Kinetic.Animation.animIdCounter = 0;
Kinetic.Animation.animRunning = false;
+Kinetic.Animation.interval = 1000 / 60;
+Kinetic.Animation.lastTime = 0;
Kinetic.Animation._addAnimation = function(anim) {
this.animations.push(anim);
};
@@ -98,7 +100,7 @@ Kinetic.Animation._animationLoop = function() {
if(this.animations.length > 0) {
this._runFrames();
var that = this;
- requestAnimFrame(function() {
+ Kinetic.Animation._requestAnimFrame(function() {
that._animationLoop();
});
}
@@ -113,9 +115,21 @@ Kinetic.Animation._handleAnimation = function() {
that._animationLoop();
}
};
-requestAnimFrame = (function(callback) {
- return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
- function(callback) {
- window.setTimeout(callback, 1000 / 60);
- };
-})();
+Kinetic.Animation._requestAnimFrame = function(fun) {
+ var interval = Kinetic.Animation.interval;
+ var time = new Date().getTime();
+ var diff = time - Kinetic.Animation.lastTime;
+ // variance will always be positive
+ var variance = diff - interval;
+
+ // if variance gets high, we need to slow down the animation
+ if (variance > 1) {
+ Kinetic.Animation.interval += 0.5;
+ }
+ // if variance is low, we can try to speed up the animation
+ else {
+ Kinetic.Animation.interval -= 1;
+ }
+ Kinetic.Animation.lastTime = time;
+ setTimeout(fun, interval);
+};
View
4 tests/js/manualTests.js
@@ -142,7 +142,7 @@ Test.prototype.tests = {
stage.add(layer);
},
- 'ANIMATION - start and stop animation': function(containerId) {
+ '*ANIMATION - start animation': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -177,7 +177,7 @@ Test.prototype.tests = {
anim.start();
setTimeout(function() {
- anim.stop();
+ //anim.stop();
}, 3000);
},
'TRANSITION - ease-in, ease-out, ease-in-out hovers': function(containerId) {

0 comments on commit 8ba3973

Please sign in to comment.
Something went wrong with that request. Please try again.