Merge pull request #128 from tschaub/animation

Use requestAnimationFrame where available.

lib/OpenLayers/Animation.js

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for 
+ * full list of contributors). Published under the Clear BSD license.  
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
+ * full text of the license. 
+ *
+ * @requires OpenLayers/SingleFile.js
+ */
+
+/**
+ * Namespace: OpenLayers.Animation
+ * A collection of utility functions for executing methods that repaint a 
+ *     portion of the browser window.  These methods take advantage of the
+ *     browser's scheduled repaints where requestAnimationFrame is available.
+ */
+OpenLayers.Animation = (function(window) {
+    
+    /**
+     * Function: requestFrame
+     * Schedule a function to be called at the next available animation frame.
+     *     Uses the native method where available.  Where requestAnimationFrame is
+     *     not available, setTimeout will be called with a 16ms delay.
+     *
+     * Parameters:
+     * callback - {Function} The function to be called at the next animation frame.
+     * element - {DOMElement} Optional element that visually bounds the animation.
+     */
+    var requestFrame = (function() {
+        var request = window.requestAnimationFrame ||
+            window.webkitRequestAnimationFrame ||
+            window.mozRequestAnimationFrame ||
+            window.oRequestAnimationFrame ||
+            window.msRequestAnimationFrame ||
+            function(callback, element) {
+                window.setTimeout(callback, 16);
+            };
+        // bind to window to avoid illegal invocation of native function
+        return function(callback, element) {
+            request.apply(window, [callback, element]);
+        };
+    })();
+    
+    // private variables for animation loops
+    var counter = 0;
+    var loops = {};
+    
+    /**
+     * Function: start
+     * Executes a method with <requestFrame> in series for some 
+     *     duration.
+     *
+     * Parameters:
+     * callback - {Function} The function to be called at the next animation frame.
+     * duration - {Number} Optional duration for the loop.  If not provided, the
+     *     animation loop will execute indefinitely.
+     * element - {DOMElement} Optional element that visually bounds the animation.
+     *
+     * Returns:
+     * {Number} Identifier for the animation loop.  Used to stop animations with
+     *     <stop>.
+     */
+    function start(callback, duration, element) {
+        duration = duration > 0 ? duration : Number.POSITIVE_INFINITY;
+        var id = ++counter;
+        var start = +new Date;
+        loops[id] = function() {
+            if (loops[id] && +new Date - start <= duration) {
+                callback();
+                if (loops[id]) {
+                    requestFrame(loops[id], element);
+                }
+            } else {
+                delete loops[id];
+            }
+        }
+        requestFrame(loops[id], element);
+        return id;
+    }
+    
+    /**
+     * Function: stop
+     * Terminates an animation loop started with <start>.
+     *
+     * Parameters:
+     * {Number} Identifier returned from <start>.
+     */
+    function stop(id) {
+        delete loops[id];
+    }
+    
+    return {
+        requestFrame: requestFrame,
+        start: start,
+        stop: stop
+    };
+    
+})(window);

lib/OpenLayers/Kinetic.js

@@ -1,7 +1,11 @@
 /* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for 
  * full list of contributors). Published under the Clear BSD license.  
  * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
- * full text of the license. */
+ * full text of the license. 
+ *
+ * @requires OpenLayers/BaseTypes/Class.js
+ * @requires OpenLayers/Animation.js
+ */
 
 OpenLayers.Kinetic = OpenLayers.Class({
 
@@ -12,13 +16,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 +63,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
      * Begins the dragging.
      */
     begin: function() {
-        clearInterval(this.timerId);
+        OpenLayers.Animation.stop(this.timerId);
         this.timerId = undefined;
         this.points = [];
     },
@@ -138,7 +135,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 +145,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
                 return;
             }
 
-            time += this.interval;
-            var realTime = new Date().getTime() - initialTime;
-            var t = (time + realTime) / 2.0;
+            var t = new Date().getTime() - initialTime;
 
             var p = (-this.deceleration * Math.pow(t, 2)) / 2.0 + v0 * t;
             var x = p * fx;
@@ -162,7 +156,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
             var v = -this.deceleration * t + v0;
 
             if (v <= 0) {
-                clearInterval(this.timerId);
+                OpenLayers.Animation.stop(this.timerId);
                 this.timerId = null;
                 args.end = true;
             }
@@ -174,9 +168,9 @@ OpenLayers.Kinetic = OpenLayers.Class({
             callback(args.x, args.y, args.end);
         };
 
-        this.timerId = window.setInterval(
-            OpenLayers.Function.bind(timerCallback, this),
-            this.interval);
+        this.timerId = OpenLayers.Animation.start(
+            OpenLayers.Function.bind(timerCallback, this)
+        );
     },
 
     CLASS_NAME: "OpenLayers.Kinetic"

lib/OpenLayers/Tween.js

@@ -1,10 +1,10 @@
 /* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for 
  * full list of contributors). Published under the Clear BSD license.  
  * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
- * full text of the license. */
-
-/**
+ * full text of the license.
+ *
  * @requires OpenLayers/BaseTypes/Class.js
+ * @requires OpenLayers/Animation.js
  */
 
 /**
@@ -12,12 +12,6 @@
  */
 OpenLayers.Tween = OpenLayers.Class({
     
-    /**
-     * Constant: INTERVAL
-     * {int} Interval in milliseconds between 2 steps
-     */
-    INTERVAL: 10,
-    
     /**
      * APIProperty: easing
      * {<OpenLayers.Easing>(Function)} Easing equation used for the animation
@@ -58,10 +52,10 @@ OpenLayers.Tween = OpenLayers.Class({
     time: null,
     
     /**
-     * Property: interval
-     * {int} Interval id returned by window.setInterval
+     * Property: animationId
+     * {int} Loop id returned by OpenLayers.Animation.start
      */
-    interval: null,
+    animationId: null,
     
     /**
      * Property: playing
@@ -97,15 +91,14 @@ OpenLayers.Tween = OpenLayers.Class({
         this.duration = duration;
         this.callbacks = options.callbacks;
         this.time = 0;
-        if (this.interval) {
-            window.clearInterval(this.interval);
-            this.interval = null;
-        }
+        OpenLayers.Animation.stop(this.animationId);
+        this.animationId = null;
         if (this.callbacks && this.callbacks.start) {
             this.callbacks.start.call(this, this.begin);
         }
-        this.interval = window.setInterval(
-            OpenLayers.Function.bind(this.play, this), this.INTERVAL);
+        this.animationId = OpenLayers.Animation.start(
+            OpenLayers.Function.bind(this.play, this)
+        );
     },
     
     /**
@@ -121,8 +114,8 @@ OpenLayers.Tween = OpenLayers.Class({
         if (this.callbacks && this.callbacks.done) {
             this.callbacks.done.call(this, this.finish);
         }
-        window.clearInterval(this.interval);
-        this.interval = null;
+        OpenLayers.Animation.stop(this.animationId);
+        this.animationId = null;
         this.playing = false;
     },