Skip to content
This repository
Browse code

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...
commit 8ba3973c909538056723dc9fb21c33291a86374a 1 parent f1e2503
Eric Rowell authored
2  dist/kinetic-Animation-current.min.js
... ... @@ -1 +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)}}();
  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.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)};
2  dist/kinetic-Global-current.min.js
@@ -3,7 +3,7 @@
3 3 * http://www.kineticjs.com/
4 4 * Copyright 2012, Eric Rowell
5 5 * Licensed under the MIT or GPL Version 2 licenses.
6   - * Date: Oct 18 2012
  6 + * Date: Oct 28 2012
7 7 *
8 8 * Copyright (C) 2011 - 2012 by Eric Rowell
9 9 *
30 dist/kinetic-current.js
@@ -3,7 +3,7 @@
3 3 * http://www.kineticjs.com/
4 4 * Copyright 2012, Eric Rowell
5 5 * Licensed under the MIT or GPL Version 2 licenses.
6   - * Date: Oct 18 2012
  6 + * Date: Oct 28 2012
7 7 *
8 8 * Copyright (C) 2011 - 2012 by Eric Rowell
9 9 *
@@ -1016,6 +1016,8 @@ Kinetic.Animation.prototype = {
1016 1016 Kinetic.Animation.animations = [];
1017 1017 Kinetic.Animation.animIdCounter = 0;
1018 1018 Kinetic.Animation.animRunning = false;
  1019 +Kinetic.Animation.interval = 1000 / 60;
  1020 +Kinetic.Animation.lastTime = 0;
1019 1021 Kinetic.Animation._addAnimation = function(anim) {
1020 1022 this.animations.push(anim);
1021 1023 };
@@ -1064,7 +1066,7 @@ Kinetic.Animation._animationLoop = function() {
1064 1066 if(this.animations.length > 0) {
1065 1067 this._runFrames();
1066 1068 var that = this;
1067   - requestAnimFrame(function() {
  1069 + Kinetic.Animation._requestAnimFrame(function() {
1068 1070 that._animationLoop();
1069 1071 });
1070 1072 }
@@ -1079,12 +1081,24 @@ Kinetic.Animation._handleAnimation = function() {
1079 1081 that._animationLoop();
1080 1082 }
1081 1083 };
1082   -requestAnimFrame = (function(callback) {
1083   - return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
1084   - function(callback) {
1085   - window.setTimeout(callback, 1000 / 60);
1086   - };
1087   -})();
  1084 +Kinetic.Animation._requestAnimFrame = function(fun) {
  1085 + var interval = Kinetic.Animation.interval;
  1086 + var time = new Date().getTime();
  1087 + var diff = time - Kinetic.Animation.lastTime;
  1088 + // variance will always be positive
  1089 + var variance = diff - interval;
  1090 +
  1091 + // if variance gets high, we need to slow down the animation
  1092 + if (variance > 1) {
  1093 + Kinetic.Animation.interval += 0.5;
  1094 + }
  1095 + // if variance is low, we can try to speed up the animation
  1096 + else {
  1097 + Kinetic.Animation.interval -= 1;
  1098 + }
  1099 + Kinetic.Animation.lastTime = time;
  1100 + setTimeout(fun, interval);
  1101 +};
1088 1102
1089 1103 /**
1090 1104 * Node constructor.&nbsp; Nodes are entities that can be transformed, layered,
8 dist/kinetic-current.min.js
4 additions, 4 deletions not shown
28 src/Animation.js
@@ -50,6 +50,8 @@ Kinetic.Animation.prototype = {
50 50 Kinetic.Animation.animations = [];
51 51 Kinetic.Animation.animIdCounter = 0;
52 52 Kinetic.Animation.animRunning = false;
  53 +Kinetic.Animation.interval = 1000 / 60;
  54 +Kinetic.Animation.lastTime = 0;
53 55 Kinetic.Animation._addAnimation = function(anim) {
54 56 this.animations.push(anim);
55 57 };
@@ -98,7 +100,7 @@ Kinetic.Animation._animationLoop = function() {
98 100 if(this.animations.length > 0) {
99 101 this._runFrames();
100 102 var that = this;
101   - requestAnimFrame(function() {
  103 + Kinetic.Animation._requestAnimFrame(function() {
102 104 that._animationLoop();
103 105 });
104 106 }
@@ -113,9 +115,21 @@ Kinetic.Animation._handleAnimation = function() {
113 115 that._animationLoop();
114 116 }
115 117 };
116   -requestAnimFrame = (function(callback) {
117   - return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
118   - function(callback) {
119   - window.setTimeout(callback, 1000 / 60);
120   - };
121   -})();
  118 +Kinetic.Animation._requestAnimFrame = function(fun) {
  119 + var interval = Kinetic.Animation.interval;
  120 + var time = new Date().getTime();
  121 + var diff = time - Kinetic.Animation.lastTime;
  122 + // variance will always be positive
  123 + var variance = diff - interval;
  124 +
  125 + // if variance gets high, we need to slow down the animation
  126 + if (variance > 1) {
  127 + Kinetic.Animation.interval += 0.5;
  128 + }
  129 + // if variance is low, we can try to speed up the animation
  130 + else {
  131 + Kinetic.Animation.interval -= 1;
  132 + }
  133 + Kinetic.Animation.lastTime = time;
  134 + setTimeout(fun, interval);
  135 +};
4 tests/js/manualTests.js
@@ -142,7 +142,7 @@ Test.prototype.tests = {
142 142
143 143 stage.add(layer);
144 144 },
145   - 'ANIMATION - start and stop animation': function(containerId) {
  145 + '*ANIMATION - start animation': function(containerId) {
146 146 var stage = new Kinetic.Stage({
147 147 container: containerId,
148 148 width: 578,
@@ -177,7 +177,7 @@ Test.prototype.tests = {
177 177 anim.start();
178 178
179 179 setTimeout(function() {
180   - anim.stop();
  180 + //anim.stop();
181 181 }, 3000);
182 182 },
183 183 '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.