Moving animation methods out of Util.js.

Animation methods get their own module, giving methods more sensible names:

 * `OpenLayers.Animation.requestFrame` (was `OpenLayers.Util.requestAnimationFrame`)
 * `OpenLayers.Animation.start` (was `OpenLayers.Util.startAnimation`)
 * `OpenLayers.Animation.stop` (was `OpenLayers.Util.stopAnimation`)

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-2011 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({
 
@@ -59,7 +63,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
      * Begins the dragging.
      */
     begin: function() {
-        OpenLayers.Util.stopAnimation(this.timerId);
+        OpenLayers.Animation.stop(this.timerId);
         this.timerId = undefined;
         this.points = [];
     },
@@ -152,7 +156,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
             var v = -this.deceleration * t + v0;
 
             if (v <= 0) {
-                OpenLayers.Util.stopAnimation(this.timerId);
+                OpenLayers.Animation.stop(this.timerId);
                 this.timerId = null;
                 args.end = true;
             }
@@ -164,7 +168,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
             callback(args.x, args.y, args.end);
         };
 
-        this.timerId = OpenLayers.Util.startAnimation(
+        this.timerId = OpenLayers.Animation.start(
             OpenLayers.Function.bind(timerCallback, this)
         );
     },

lib/OpenLayers/Tween.js

@@ -1,10 +1,10 @@
 /* Copyright (c) 2006-2011 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
  */
 
 /**
@@ -53,7 +53,7 @@ OpenLayers.Tween = OpenLayers.Class({
     
     /**
      * Property: animationId
-     * {int} Loop id returned by OpenLayers.Util.startAnimation
+     * {int} Loop id returned by OpenLayers.Animation.start
      */
     animationId: null,
     
@@ -91,12 +91,12 @@ OpenLayers.Tween = OpenLayers.Class({
         this.duration = duration;
         this.callbacks = options.callbacks;
         this.time = 0;
-        OpenLayers.Util.stopAnimation(this.animationId);
+        OpenLayers.Animation.stop(this.animationId);
         this.animationId = null;
         if (this.callbacks && this.callbacks.start) {
             this.callbacks.start.call(this, this.begin);
         }
-        this.animationId = OpenLayers.Util.startAnimation(
+        this.animationId = OpenLayers.Animation.start(
             OpenLayers.Function.bind(this.play, this)
         );
     },
@@ -114,7 +114,7 @@ OpenLayers.Tween = OpenLayers.Class({
         if (this.callbacks && this.callbacks.done) {
             this.callbacks.done.call(this, this.finish);
         }
-        OpenLayers.Util.stopAnimation(this.animationId);
+        OpenLayers.Animation.stop(this.animationId);
         this.animationId = null;
         this.playing = false;
     },

lib/OpenLayers/Util.js

@@ -1697,79 +1697,3 @@ OpenLayers.Util.getFormattedLonLat = function(coordinate, axis, dmsOption) {
     return str;
 };
 
-/**
- * Function: requestAnimationFrame
- * 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.
- */
-OpenLayers.Util.requestAnimationFrame = (function(window) {
-    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]);
-    };
-})(window);
-
-(function() {
-
-    var counter = 0;
-    var loops = {};
-    var request = OpenLayers.Util.requestAnimationFrame;
-    
-    /**
-     * Function: startAnimation
-     * Executes a method with <requestAnimationFrame> 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
-     *     <stopAnimation>.
-     */
-    OpenLayers.Util.startAnimation = function(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]) {
-                    request(loops[id], element);
-                }
-            } else {
-                delete loops[id];
-            }
-        }
-        request(loops[id], element);
-        return id;
-    }
-    
-    /**
-     * Function: stopAnimation
-     * Terminates an animation loop started with <startAnimation>.
-     *
-     * Parameters:
-     * {Number} Identifier returned from <startAnimation>.
-     */
-    OpenLayers.Util.stopAnimation = function(id) {
-        delete loops[id];
-    }
-    
-})();

tests/Animation.html

@@ -0,0 +1,78 @@
+<!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_requestFrame(t) {
+            t.plan(2);
+
+            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 test_start(t) {
+            t.plan(1);
+
+            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 test_start_duration(t) {
+            t.plan(2);
+
+            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 test_stop(t) {
+            t.plan(2);
+
+            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

@@ -19,8 +19,8 @@
         
         var interval = 10; // arbitrary value for tests 
 
-        var originalLoopAnimation = OpenLayers.Util.startAnimation;
+        var originalLoopAnimation = OpenLayers.Animation.start;
-        OpenLayers.Util.startAnimation = function(callback) {
+        OpenLayers.Animation.start = function(callback) {
             while (!finish) {
                 var time = new Date().getTime();
                 Date.prototype.getTime = function() { return time+interval };
@@ -51,7 +51,7 @@
         });
         
         Date.prototype.getTime = originalGetTime;
-        OpenLayers.Util.startAnimation = originalLoopAnimation;
+        OpenLayers.Animation.start = originalLoopAnimation;
     }
 
     function test_Angle (t) {

tests/Tween.html

@@ -49,12 +49,12 @@
         t.plan(2);
         
         var tween = new OpenLayers.Tween();
-        tween.animationId = OpenLayers.Util.startAnimation(function() {});
+        tween.animationId = OpenLayers.Animation.start(function() {});
         tween.playing = true;
         tween.stop();
         t.eq(tween.animationId, null, "tween correctly stopped");
         
-        tween.animationId = OpenLayers.Util.startAnimation(function() {});
+        tween.animationId = OpenLayers.Animation.start(function() {});
         tween.playing = false;
         tween.stop();
         t.ok(tween.animationId != null, "stop method doesn't do anything if tween isn't running");

tests/Util.html

@@ -1121,68 +1121,6 @@
         t.eq(OpenLayers.Util.getFormattedLonLat(181, "lon"), "179°00'00\"W", "crossing dateline from the east results in correct west coordinate");
     }
     
-    function test_requestAnimationFrame(t) {
-        t.plan(2);
-        
-        t.eq(typeof OpenLayers.Util.requestAnimationFrame, "function", "requestAnimationFrame is a function");
-        
-        var calls = 0;
-        OpenLayers.Util.requestAnimationFrame(function() {
-            ++calls;
-        });
-        t.delay_call(0.1, function() {
-            t.ok(calls > 0, "callback called: " + calls);
-        });
-    }
-    
-    function test_startAnimation(t) {
-        t.plan(1);
-        
-        var calls = 0;
-        var id = OpenLayers.Util.startAnimation(function() {
-            ++calls;
-        });
-        t.delay_call(0.1, function() {
-            t.ok(calls > 1, "looped: " + calls);
-            OpenLayers.Util.stopAnimation(id);
-        });
-    }
-
-    function test_startAnimation_duration(t) {
-        t.plan(2);
-        
-        var calls = 0;
-        var id = OpenLayers.Util.startAnimation(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 test_stopAnimation(t) {
-        t.plan(2);
-        
-        var calls = 0;
-        var id = OpenLayers.Util.startAnimation(function() {
-            ++calls;
-        });
-        var first;
-        t.delay_call(0.2, function() {
-            first = calls;
-            t.ok(calls > 1, "looped: " + calls);
-            OpenLayers.Util.stopAnimation(id);
-        });
-        t.delay_call(0.3, function() {
-            t.eq(calls, first, "not being called any more");
-        });
-    }
-    
   </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>