Use requestAnimationFrame where available.

For kinetic panning, let the device determine the animation frame rate.

lib/OpenLayers/Kinetic.js

@@ -12,13 +12,6 @@ OpenLayers.Kinetic = OpenLayers.Class({
      */
     threshold: 0,
 
-    /**
-     * Property: interval
-     * {Integer} Interval in milliseconds between 2 steps in the "kinetic
-     *     dragging". Defaults to 10 milliseconds.
-     */
-    interval: 10,
-
     /**
      * Property: deceleration
      * {Float} the deseleration in px/ms², default to 0.0035.
@@ -66,7 +59,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
      * Begins the dragging.
      */
     begin: function() {
-        clearInterval(this.timerId);
+        OpenLayers.Util.stopAnimation(this.timerId);
         this.timerId = undefined;
         this.points = [];
     },
@@ -138,7 +131,6 @@ OpenLayers.Kinetic = OpenLayers.Class({
         var fx = Math.cos(info.theta);
         var fy = -Math.sin(info.theta);
 
-        var time = 0;
         var initialTime = new Date().getTime();
 
         var lastX = 0;
@@ -149,9 +141,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
                 return;
             }
 
-            time += this.interval;
+            var t = new Date().getTime() - initialTime;
-            var realTime = new Date().getTime() - initialTime;
-            var t = (time + realTime) / 2.0;
 
             var p = (-this.deceleration * Math.pow(t, 2)) / 2.0 + v0 * t;
             var x = p * fx;
@@ -162,7 +152,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
             var v = -this.deceleration * t + v0;
 
             if (v <= 0) {
-                clearInterval(this.timerId);
+                OpenLayers.Util.stopAnimation(this.timerId);
                 this.timerId = null;
                 args.end = true;
             }
@@ -174,9 +164,9 @@ OpenLayers.Kinetic = OpenLayers.Class({
             callback(args.x, args.y, args.end);
         };
 
-        this.timerId = window.setInterval(
+        this.timerId = OpenLayers.Util.loopAnimation(
-            OpenLayers.Function.bind(timerCallback, this),
+            OpenLayers.Function.bind(timerCallback, this)
-            this.interval);
+        );
     },
 
     CLASS_NAME: "OpenLayers.Kinetic"

tests/Kinetic.html

@@ -17,8 +17,10 @@
         var originalGetTime = Date.prototype.getTime;
         Date.prototype.getTime = function() { return 0 };
         
-        var originalSetInterval = window.setInterval;
+        var interval = 10; // arbitrary value for tests 
-        window.setInterval = function(callback, interval) {
+
+        var originalLoopAnimation = OpenLayers.Util.loopAnimation;
+        OpenLayers.Util.loopAnimation = function(callback) {
             while (!finish) {
                 var time = new Date().getTime();
                 Date.prototype.getTime = function() { return time+interval };
@@ -49,7 +51,7 @@
         });
         
         Date.prototype.getTime = originalGetTime;
-        window.setInterval = originalSetInterval;
+        OpenLayers.Util.loopAnimation = originalLoopAnimation;
     }
 
     function test_Angle (t) {