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

Merge pull request #128 from tschaub/animation

Browse Source 
Use requestAnimationFrame where available.
This commit is contained in:
Tim Schaub
2012-01-17 11:56:59 -08:00
parent 974ed29de9 483fe267b0
commit d34d8f22a3
11 changed files with 235 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
examples/kinetic.js
View File

@@ -1,7 +1,6 @@
var map = new OpenLayers.Map({
div: "map",
resolutions: [0.087890625, 0.0439453125, 0.02197265625, 0.010986328125],
panDuration: 100,
controls: [
new OpenLayers.Control.Navigation(
{dragPanOptions: {enableKinetic: true}}

1
lib/OpenLayers.js
View File

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

97
lib/OpenLayers/Animation.js Normal file
View File

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

28
lib/OpenLayers/Kinetic.js
View File

@@ -1,7 +1,11 @@
/* 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. */
* full text of the license.
*
* @requires OpenLayers/BaseTypes/Class.js
* @requires OpenLayers/Animation.js
*/
OpenLayers.Kinetic = OpenLayers.Class({
@@ -12,13 +16,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 +63,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
* Begins the dragging.
*/
begin: function() {
clearInterval(this.timerId);
OpenLayers.Animation.stop(this.timerId);
this.timerId = undefined;
this.points = [];
},
@@ -138,7 +135,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 +145,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 +156,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
var v = -this.deceleration * t + v0;
if (v <= 0) {
clearInterval(this.timerId);
OpenLayers.Animation.stop(this.timerId);
this.timerId = null;
args.end = true;
}
@@ -174,9 +168,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.Animation.start(
OpenLayers.Function.bind(timerCallback, this)
);
},
CLASS_NAME: "OpenLayers.Kinetic"

33
lib/OpenLayers/Tween.js
View File

@@ -1,10 +1,10 @@
/* 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. */
/**
* full text of the license.
*
* @requires OpenLayers/BaseTypes/Class.js
* @requires OpenLayers/Animation.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.Animation.start
*/
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.Animation.stop(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.Animation.start(
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.Animation.stop(this.animationId);
this.animationId = null;
this.playing = false;
},

84
tests/Animation.html Normal file
View File

@@ -0,0 +1,84 @@
<!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_all(t) {
t.plan(7);
t.open_window("Animation.html", function(win) {
win.requestFrame(t);
win.start(t);
win.startDuration(t);
win.stop(t);
});
}
function requestFrame(t) {
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 start(t) {
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 startDuration(t) {
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 stop(t) {
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>

8
tests/Kinetic.html
View File

@@ -17,8 +17,10 @@
var originalGetTime = Date.prototype.getTime;
Date.prototype.getTime = function() { return 0 };
var originalSetInterval = window.setInterval;
window.setInterval = function(callback, interval) {
var interval = 10; // arbitrary value for tests
var originalLoopAnimation = OpenLayers.Animation.start;
OpenLayers.Animation.start = 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.Animation.start = originalLoopAnimation;
}
function test_Angle (t) {

15
tests/Map.html
View File

@@ -1,5 +1,20 @@
<html>
<head>
<script>
/**
* Because browsers that implement requestAnimationFrame may not execute
* animation functions while a window is not displayed (e.g. in a hidden
* iframe as in these tests), we mask the native implementations here. The
* native requestAnimationFrame functionality is tested in Util.html and
* in PanZoom.html (where a popup is opened before panning). The panTo tests
* here will test the fallback setTimeout implementation for animation.
*/
window.requestAnimationFrame =
window.webkitRequestAnimationFrame =
window.mozRequestAnimationFrame =
window.oRequestAnimationFrame =
window.msRequestAnimationFrame = null;
</script>
<script src="OLLoader.js"></script>
<script type="text/javascript">

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.Animation.start(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.Animation.start(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>

1
tests/Util.html
View File

@@ -1120,6 +1120,7 @@
t.eq(OpenLayers.Util.getFormattedLonLat(-181, "lon"), "179°00'00\"E", "crossing dateline from the west results in correct east coordinate");
t.eq(OpenLayers.Util.getFormattedLonLat(181, "lon"), "179°00'00\"W", "crossing dateline from the east results in correct west coordinate");
}
</script>
</head>
<body>

1
tests/list-tests.html
View File

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