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.
openlayers · Jan 3, 2012 · c151b04 · c151b04
1 parent 5c2af14
commit c151b04
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 22 deletions.
diff --git 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
@@ -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>