made several optimizations to the Animation class. removed FRAF logic. Using performance.now when available. No longer creating a new function for every animation loop. requestAnimFrame is now called before render instead of after

src/Animation.js

@@ -1,6 +1,36 @@
 (function() {
     var BATCH_DRAW_STOP_TIME_DIFF = 500;
 
+    var now =(function() {
+      if (window.performance && window.performance.now) {
+        return function() {
+          return window.performance.now();
+        }
+      }
+      else {
+        return function() {
+          return new Date().getTime();
+        } 
+      }
+    })();
+
+    var RAF = (function() {
+        return window.requestAnimationFrame
+            || window.webkitRequestAnimationFrame
+            || window.mozRequestAnimationFrame
+            || window.oRequestAnimationFrame
+            || window.msRequestAnimationFrame
+            || FRAF;
+    })();
+
+    function FRAF(callback) {
+        window.setTimeout(callback, 1000 / 60);
+    }
+
+    function requestAnimFrame() {
+        return RAF.apply(window, arguments);
+    }
+    
     /**
      * Animation constructor.  A stage is used to contain multiple layers and handle
      * @constructor
@@ -24,13 +54,14 @@
      * anim.start();
      */
     Kinetic.Animation = function(func, layers) {
+        var Anim = Kinetic.Animation;
         this.func = func;
         this.setLayers(layers);
-        this.id = Kinetic.Animation.animIdCounter++;
+        this.id = Anim.animIdCounter++;
         this.frame = {
             time: 0,
             timeDiff: 0,
-            lastTime: new Date().getTime()
+            lastTime: now()
         };
     };
     /*
@@ -103,8 +134,12 @@
          * @memberof Kinetic.Animation.prototype
          */
         isRunning: function() {
-            var a = Kinetic.Animation, animations = a.animations;
+            var a = Kinetic.Animation, 
-            for(var n = 0; n < animations.length; n++) {
+                animations = a.animations,
+                len = animations.length,
+                n;
+
+            for(n = 0; n < len; n++) {
                 if(animations[n].id === this.id) {
                     return true;
                 }
@@ -117,10 +152,11 @@
          * @memberof Kinetic.Animation.prototype
          */
         start: function() {
+            var Anim = Kinetic.Animation;
             this.stop();
             this.frame.timeDiff = 0;
-            this.frame.lastTime = new Date().getTime();
+            this.frame.lastTime = now();
-            Kinetic.Animation._addAnimation(this);
+            Anim._addAnimation(this);
         },
         /**
          * stop animation
@@ -146,8 +182,12 @@
         this._handleAnimation();
     };
     Kinetic.Animation._removeAnimation = function(anim) {
-        var id = anim.id, animations = this.animations, len = animations.length;
+        var id = anim.id, 
-        for(var n = 0; n < len; n++) {
+            animations = this.animations, 
+            len = animations.length,
+            n;
+
+        for(n = 0; n < len; n++) {
             if(animations[n].id === id) {
                 this.animations.splice(n, 1);
                 break;
@@ -175,7 +215,7 @@
             layers = anim.layers;
             func = anim.func;
 
-            anim._updateFrameObject(new Date().getTime());
+            anim._updateFrameObject(now());
             layersLen = layers.length;
 
             for (i=0; i<layersLen; i++) {
@@ -196,15 +236,14 @@
         }
     };
     Kinetic.Animation._animationLoop = function() {
-        var that = this;
+        var Anim = Kinetic.Animation;
-        if(this.animations.length > 0) {
+
-            this._runFrames();
+        if(Anim.animations.length) {
-            Kinetic.Animation.requestAnimFrame(function() {
+            requestAnimFrame(Anim._animationLoop);
-                that._animationLoop();
+            Anim._runFrames();
-            });
         }
         else {
-            this.animRunning = false;
+            Anim.animRunning = false;
         }
     };
     Kinetic.Animation._handleAnimation = function() {
@@ -214,23 +253,6 @@
             that._animationLoop();
         }
     };
-    var RAF = (function() {
-        return window.requestAnimationFrame
-            || window.webkitRequestAnimationFrame
-            || window.mozRequestAnimationFrame
-            || window.oRequestAnimationFrame
-            || window.msRequestAnimationFrame
-            || FRAF;
-    })();
-
-    function FRAF(callback) {
-        window.setTimeout(callback, 1000 / 60);
-    }
-
-    Kinetic.Animation.requestAnimFrame = function(callback) {
-        var raf = Kinetic.isDragging ? FRAF : RAF;
-        raf(callback);
-    };
 
     var moveTo = Kinetic.Node.prototype.moveTo;
     Kinetic.Node.prototype.moveTo = function(container) {
@@ -243,17 +265,18 @@
      * @memberof Kinetic.Layer.prototype
      */
     Kinetic.Layer.prototype.batchDraw = function() {
-        var that = this;
+        var that = this,
+            Anim = Kinetic.Animation;
 
         if (!this.batchAnim) {
-            this.batchAnim = new Kinetic.Animation(function() {
+            this.batchAnim = new Anim(function() {
-              if (that.lastBatchDrawTime && new Date().getTime() - that.lastBatchDrawTime > BATCH_DRAW_STOP_TIME_DIFF) {
+              if (that.lastBatchDrawTime && now() - that.lastBatchDrawTime > BATCH_DRAW_STOP_TIME_DIFF) {
                 that.batchAnim.stop();
               }
             }, this);
         }
 
-        this.lastBatchDrawTime = new Date().getTime();
+        this.lastBatchDrawTime = now();
 
         if (!this.batchAnim.isRunning()) {
             this.draw();

test/manual/manual-test.js

@@ -1,4 +1,80 @@
 suite('Manual', function() {
+
+    // ======================================================
+    test('oscillation animation', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+
+      var hexagon = new Kinetic.RegularPolygon({
+        x: stage.width()/2,
+        y: stage.height()/2,
+        sides: 6,
+        radius: 70,
+        fill: 'red',
+        stroke: 'black',
+        strokeWidth: 4
+      });
+
+
+      // var hexagon = new Kinetic.Rect({
+      //   x: stage.width()/2,
+      //   y: stage.height()/2,
+      //   width: 100,
+      //   height: 50,
+      //   fill: 'red',
+      //   stroke: 'black',
+      //   strokeWidth: 4
+      // });
+
+      layer.add(hexagon);
+      stage.add(layer);
+
+      var amplitude = 150;
+      var period = 2000;
+      // in ms
+      var centerX = stage.width()/2;
+
+      var anim = new Kinetic.Animation(function(frame) {
+        hexagon.setX(amplitude * Math.sin(new Date().getTime() * 2 * Math.PI / period) + centerX);
+      }, layer);
+
+      anim.start();
+
+    });
+
+    // ======================================================
+    test('rotation animation', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        var rect;
+
+        for (var n=0; n<100; n++) {
+            rect = new Kinetic.Rect({
+                x: Math.random() * 400,
+                y: Math.random() * 400,
+                width: 100,
+                height: 50,
+                fill: 'red',
+                stroke: 'black',
+                strokeWidth: 4
+            });
+
+            layer.add(rect);
+        }
+
+
+
+        stage.add(layer);
+
+        var velocity = 360; // 1 rev per second
+
+        var anim = new Kinetic.Animation(function(frame) {
+            layer.find('Rect').rotate(velocity * frame.timeDiff / 1000);
+        }, layer);
+
+        anim.start();
+    });
+
     // ======================================================
     test('tween node', function() {
         var stage = addStage();