Merge pull request #128 from tschaub/animation

Use requestAnimationFrame where available.

examples/kinetic.js

@@ -1,7 +1,6 @@
 var map = new OpenLayers.Map({
     div: "map",
     resolutions: [0.087890625, 0.0439453125, 0.02197265625, 0.010986328125],
-    panDuration: 100,
     controls: [
         new OpenLayers.Control.Navigation(
             {dragPanOptions: {enableKinetic: true}}

lib/OpenLayers.js

@@ -97,6 +97,7 @@
             jsFiles = [
                 "OpenLayers/BaseTypes/Class.js",
                 "OpenLayers/Util.js",
+                "OpenLayers/Animation.js",
                 "OpenLayers/BaseTypes.js",
                 "OpenLayers/BaseTypes/Bounds.js",
                 "OpenLayers/BaseTypes/Date.js",

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 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 +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(
+        this.timerId = OpenLayers.Animation.start(
-            OpenLayers.Function.bind(timerCallback, this),
+            OpenLayers.Function.bind(timerCallback, this)
-            this.interval);
+        );
     },
 
     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
+     * Property: animationId
-     * {int} Interval id returned by window.setInterval
+     * {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) {
+        OpenLayers.Animation.stop(this.animationId);
-            window.clearInterval(this.interval);
+        this.animationId = null;
-            this.interval = null;
-        }
         if (this.callbacks && this.callbacks.start) {
             this.callbacks.start.call(this, this.begin);
         }
-        this.interval = window.setInterval(
+        this.animationId = OpenLayers.Animation.start(
-            OpenLayers.Function.bind(this.play, this), this.INTERVAL);
+            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);
+        OpenLayers.Animation.stop(this.animationId);
-        this.interval = null;
+        this.animationId = null;
         this.playing = false;
     },
     

tests/Animation.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Animation.js Tests</title>
+        <script>
+
+        // dependencies for tests
+        var OpenLayers = [
+            "OpenLayers/Animation.js"
+        ];
+
+        </script>
+        <script src="OLLoader.js"></script>
+
+        <script>
+                
+        function test_all(t) {
+            t.plan(7);
+            t.open_window("Animation.html", function(win) {
+                win.requestFrame(t);
+                win.start(t);
+                win.startDuration(t);
+                win.stop(t);
+            });
+        }
+
+        function requestFrame(t) {
+
+            t.eq(typeof OpenLayers.Animation.requestFrame, "function", "requestFrame is a function");
+
+            var calls = 0;
+            OpenLayers.Animation.requestFrame(function() {
+                ++calls;
+            });
+            t.delay_call(0.1, function() {
+                t.ok(calls > 0, "callback called: " + calls);
+            });
+        }
+
+        function start(t) {
+
+            var calls = 0;
+            var id = OpenLayers.Animation.start(function() {
+                ++calls;
+            });
+            t.delay_call(0.1, function() {
+                t.ok(calls > 1, "looped: " + calls);
+                OpenLayers.Animation.stop(id);
+            });
+        }
+
+        function startDuration(t) {
+
+            var calls = 0;
+            var id = OpenLayers.Animation.start(function() {
+                ++calls;
+            }, 100);
+            var first;
+            t.delay_call(0.2, function() {
+                first = calls;
+                t.ok(calls > 1, "looped: " + calls);
+            });
+            t.delay_call(0.3, function() {
+                t.eq(calls, first, "not being called any more");
+            });
+        }
+
+        function stop(t) {
+
+            var calls = 0;
+            var id = OpenLayers.Animation.start(function() {
+                ++calls;
+            });
+            var first;
+            t.delay_call(0.2, function() {
+                first = calls;
+                t.ok(calls > 1, "looped: " + calls);
+                OpenLayers.Animation.stop(id);
+            });
+            t.delay_call(0.3, function() {
+                t.eq(calls, first, "not being called any more");
+            });
+        }
+        </script>

tests/Kinetic.html

@@ -16,9 +16,11 @@
 
         var originalGetTime = Date.prototype.getTime;
         Date.prototype.getTime = function() { return 0 };
+        
+        var interval = 10; // arbitrary value for tests 
 
-        var originalSetInterval = window.setInterval;
+        var originalLoopAnimation = OpenLayers.Animation.start;
-        window.setInterval = function(callback, interval) {
+        OpenLayers.Animation.start = 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.Animation.start = originalLoopAnimation;
     }
 
     function test_Angle (t) {

tests/Map.html

@@ -1,7 +1,22 @@
 <html>
 <head>
-  <script src="OLLoader.js"></script>
+    <script>
-  <script type="text/javascript">
+    /**
+    * Because browsers that implement requestAnimationFrame may not execute
+    * animation functions while a window is not displayed (e.g. in a hidden
+    * iframe as in these tests), we mask the native implementations here.  The
+    * native requestAnimationFrame functionality is tested in Util.html and
+    * in PanZoom.html (where a popup is opened before panning).  The panTo tests
+    * here will test the fallback setTimeout implementation for animation.
+    */
+    window.requestAnimationFrame = 
+        window.webkitRequestAnimationFrame =
+        window.mozRequestAnimationFrame =
+        window.oRequestAnimationFrame =
+        window.msRequestAnimationFrame = null;
+    </script>
+    <script src="OLLoader.js"></script>
+    <script type="text/javascript">
 
     var isMozilla = (navigator.userAgent.indexOf("compatible") == -1);
     var map;

tests/Tween.html

@@ -36,7 +36,7 @@
             }
         }
         tween.start(start, finish, 10, {callbacks: callbacks});
-        t.ok(tween.interval != null, "interval correctly set");
+        t.ok(tween.animationId != null, "animationId correctly set");
         t.delay_call(0.8, function() {
             t.eq(_start, true, "start callback called");
             t.eq(_done, true, "finish callback called");
@@ -49,15 +49,15 @@
         t.plan(2);
         
         var tween = new OpenLayers.Tween();
-        tween.interval = window.setInterval(function() {}, 10);
+        tween.animationId = OpenLayers.Animation.start(function() {});
         tween.playing = true;
         tween.stop();
-        t.eq(tween.interval, null, "tween correctly stopped");
+        t.eq(tween.animationId, null, "tween correctly stopped");
         
-        tween.interval = window.setInterval(function() {}, 10);
+        tween.animationId = OpenLayers.Animation.start(function() {});
         tween.playing = false;
         tween.stop();
-        t.ok(tween.interval != null, "stop method doesn't do anything if tween isn't running");
+        t.ok(tween.animationId != null, "stop method doesn't do anything if tween isn't running");
     }
 
     </script> 

tests/Util.html

@@ -1120,6 +1120,7 @@
         t.eq(OpenLayers.Util.getFormattedLonLat(-181, "lon"), "179°00'00\"E", "crossing dateline from the west results in correct east coordinate");
         t.eq(OpenLayers.Util.getFormattedLonLat(181, "lon"), "179°00'00\"W", "crossing dateline from the east results in correct west coordinate");
     }
+    
   </script>
 </head>
 <body>

tests/list-tests.html

@@ -1,4 +1,5 @@
 <ul id="testlist">
+    <li>Animation.html</li>
     <li>BaseTypes.html</li>
     <li>BaseTypes/Bounds.html</li>
     <li>BaseTypes/Class.html</li>