From c151b04257280d2a3d524ee8eac4cb94f4cb7388 Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Mon, 2 Jan 2012 20:52:46 -0700
Subject: [PATCH] Use requestAnimationFrame for tweening.

Instead of using an arbitrary interval for tweening, we let the device decide the best animation frame rate.  Where requestAnimationFrame is not available, this will default to 60 fps.
---
 lib/OpenLayers/Tween.js | 27 ++++++++++-----------------
 tests/Tween.html        | 10 +++++-----
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/lib/OpenLayers/Tween.js b/lib/OpenLayers/Tween.js
index 299cc27535..4b22fc6ec4 100644
--- a/lib/OpenLayers/Tween.js
+++ b/lib/OpenLayers/Tween.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.Util.loopAnimation
      */
-    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.Util.stopAnimation(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.Util.loopAnimation(
+            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.Util.stopAnimation(this.animationId);
+        this.animationId = null;
         this.playing = false;
     },
     
diff --git a/tests/Tween.html b/tests/Tween.html
index f185bee97f..4cd1970710 100644
--- a/tests/Tween.html
+++ b/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.Util.loopAnimation(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.Util.loopAnimation(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>