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

Moving animation methods out of Util.js.

Browse Source 
Animation methods get their own module, giving methods more sensible names:

 * `OpenLayers.Animation.requestFrame` (was `OpenLayers.Util.requestAnimationFrame`)
 * `OpenLayers.Animation.start` (was `OpenLayers.Util.startAnimation`)
 * `OpenLayers.Animation.stop` (was `OpenLayers.Util.stopAnimation`)
This commit is contained in:
tschaub
2012-01-03 09:43:50 -07:00
parent 3f6e0141a4
commit 3556af9cb2
10 changed files with 197 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

12
lib/OpenLayers/Kinetic.js
View File

@@ -1,7 +1,11 @@
/* Copyright (c) 2006-2011 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({
@@ -59,7 +63,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
* Begins the dragging.
*/
begin: function() {
OpenLayers.Util.stopAnimation(this.timerId);
OpenLayers.Animation.stop(this.timerId);
this.timerId = undefined;
this.points = [];
},
@@ -152,7 +156,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
var v = -this.deceleration * t + v0;
if (v <= 0) {
OpenLayers.Util.stopAnimation(this.timerId);
OpenLayers.Animation.stop(this.timerId);
this.timerId = null;
args.end = true;
}
@@ -164,7 +168,7 @@ OpenLayers.Kinetic = OpenLayers.Class({
callback(args.x, args.y, args.end);
};
this.timerId = OpenLayers.Util.startAnimation(
this.timerId = OpenLayers.Animation.start(
OpenLayers.Function.bind(timerCallback, this)
);
},

14
lib/OpenLayers/Tween.js
View File

@@ -1,10 +1,10 @@
/* Copyright (c) 2006-2011 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
*/
/**
@@ -53,7 +53,7 @@ OpenLayers.Tween = OpenLayers.Class({
/**
* Property: animationId
* {int} Loop id returned by OpenLayers.Util.startAnimation
* {int} Loop id returned by OpenLayers.Animation.start
*/
animationId: null,
@@ -91,12 +91,12 @@ OpenLayers.Tween = OpenLayers.Class({
this.duration = duration;
this.callbacks = options.callbacks;
this.time = 0;
OpenLayers.Util.stopAnimation(this.animationId);
OpenLayers.Animation.stop(this.animationId);
this.animationId = null;
if (this.callbacks && this.callbacks.start) {
this.callbacks.start.call(this, this.begin);
}
this.animationId = OpenLayers.Util.startAnimation(
this.animationId = OpenLayers.Animation.start(
OpenLayers.Function.bind(this.play, this)
);
},
@@ -114,7 +114,7 @@ OpenLayers.Tween = OpenLayers.Class({
if (this.callbacks && this.callbacks.done) {
this.callbacks.done.call(this, this.finish);
}
OpenLayers.Util.stopAnimation(this.animationId);
OpenLayers.Animation.stop(this.animationId);
this.animationId = null;
this.playing = false;
},

76
lib/OpenLayers/Util.js
View File

@@ -1697,79 +1697,3 @@ OpenLayers.Util.getFormattedLonLat = function(coordinate, axis, dmsOption) {
return str;
};
/**
* Function: requestAnimationFrame
* 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.
*/
OpenLayers.Util.requestAnimationFrame = (function(window) {
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]);
};
})(window);
(function() {
var counter = 0;
var loops = {};
var request = OpenLayers.Util.requestAnimationFrame;
/**
* Function: startAnimation
* Executes a method with <requestAnimationFrame> 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
* <stopAnimation>.
*/
OpenLayers.Util.startAnimation = function(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]) {
request(loops[id], element);
}
} else {
delete loops[id];
}
}
request(loops[id], element);
return id;
}
/**
* Function: stopAnimation
* Terminates an animation loop started with <startAnimation>.
*
* Parameters:
* {Number} Identifier returned from <startAnimation>.
*/
OpenLayers.Util.stopAnimation = function(id) {
delete loops[id];
}
})();

78
tests/Animation.html Normal file
View File

@@ -0,0 +1,78 @@
<!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_requestFrame(t) {
t.plan(2);
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 test_start(t) {
t.plan(1);
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 test_start_duration(t) {
t.plan(2);
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 test_stop(t) {
t.plan(2);
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>

6
tests/Kinetic.html
View File

@@ -19,8 +19,8 @@
var interval = 10; // arbitrary value for tests
var originalLoopAnimation = OpenLayers.Util.startAnimation;
OpenLayers.Util.startAnimation = function(callback) {
var originalLoopAnimation = OpenLayers.Animation.start;
OpenLayers.Animation.start = function(callback) {
while (!finish) {
var time = new Date().getTime();
Date.prototype.getTime = function() { return time+interval };
@@ -51,7 +51,7 @@
});
Date.prototype.getTime = originalGetTime;
OpenLayers.Util.startAnimation = originalLoopAnimation;
OpenLayers.Animation.start = originalLoopAnimation;
}
function test_Angle (t) {

4
tests/Tween.html
View File

@@ -49,12 +49,12 @@
t.plan(2);
var tween = new OpenLayers.Tween();
tween.animationId = OpenLayers.Util.startAnimation(function() {});
tween.animationId = OpenLayers.Animation.start(function() {});
tween.playing = true;
tween.stop();
t.eq(tween.animationId, null, "tween correctly stopped");
tween.animationId = OpenLayers.Util.startAnimation(function() {});
tween.animationId = OpenLayers.Animation.start(function() {});
tween.playing = false;
tween.stop();
t.ok(tween.animationId != null, "stop method doesn't do anything if tween isn't running");

62
tests/Util.html
View File

@@ -1121,68 +1121,6 @@
t.eq(OpenLayers.Util.getFormattedLonLat(181, "lon"), "179°00'00\"W", "crossing dateline from the east results in correct west coordinate");
}
function test_requestAnimationFrame(t) {
t.plan(2);
t.eq(typeof OpenLayers.Util.requestAnimationFrame, "function", "requestAnimationFrame is a function");
var calls = 0;
OpenLayers.Util.requestAnimationFrame(function() {
++calls;
});
t.delay_call(0.1, function() {
t.ok(calls > 0, "callback called: " + calls);
});
}
function test_startAnimation(t) {
t.plan(1);
var calls = 0;
var id = OpenLayers.Util.startAnimation(function() {
++calls;
});
t.delay_call(0.1, function() {
t.ok(calls > 1, "looped: " + calls);
OpenLayers.Util.stopAnimation(id);
});
}
function test_startAnimation_duration(t) {
t.plan(2);
var calls = 0;
var id = OpenLayers.Util.startAnimation(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 test_stopAnimation(t) {
t.plan(2);
var calls = 0;
var id = OpenLayers.Util.startAnimation(function() {
++calls;
});
var first;
t.delay_call(0.2, function() {
first = calls;
t.ok(calls > 1, "looped: " + calls);
OpenLayers.Util.stopAnimation(id);
});
t.delay_call(0.3, function() {
t.eq(calls, first, "not being called any more");
});
}
</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>