ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use requestAnimationFrame for tweening.

Browse Source 
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.
This commit is contained in:
Tim Schaub
2012-01-02 20:52:46 -07:00
parent 5c2af142b6
commit c151b04257
2 changed files with 15 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
lib/OpenLayers/Tween.js
View File

@@ -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;
},

10
tests/Tween.html
View File

@@ -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>