Use requestAnimationFrame where available.

For kinetic panning, let the device determine the animation frame rate.
This commit is contained in:
Tim Schaub
2012-01-02 20:40:29 -07:00
parent c7c11757ae
commit 5c2af142b6
2 changed files with 11 additions and 19 deletions

View File

@@ -12,13 +12,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 +59,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
* Begins the dragging.
*/
begin: function() {
clearInterval(this.timerId);
OpenLayers.Util.stopAnimation(this.timerId);
this.timerId = undefined;
this.points = [];
},
@@ -138,7 +131,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 +141,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
return;
}
time += this.interval;
var realTime = new Date().getTime() - initialTime;
var t = (time + realTime) / 2.0;
var t = new Date().getTime() - initialTime;
var p = (-this.deceleration * Math.pow(t, 2)) / 2.0 + v0 * t;
var x = p * fx;
@@ -162,7 +152,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
var v = -this.deceleration * t + v0;
if (v <= 0) {
clearInterval(this.timerId);
OpenLayers.Util.stopAnimation(this.timerId);
this.timerId = null;
args.end = true;
}
@@ -174,9 +164,9 @@ OpenLayers.Kinetic = OpenLayers.Class({
callback(args.x, args.y, args.end);
};
this.timerId = window.setInterval(
OpenLayers.Function.bind(timerCallback, this),
this.interval);
this.timerId = OpenLayers.Util.loopAnimation(
OpenLayers.Function.bind(timerCallback, this)
);
},
CLASS_NAME: "OpenLayers.Kinetic"

View File

@@ -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;
window.setInterval = function(callback, interval) {
var originalLoopAnimation = OpenLayers.Util.loopAnimation;
OpenLayers.Util.loopAnimation = 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.Util.loopAnimation = originalLoopAnimation;
}
function test_Angle (t) {