Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #128 from tschaub/animation
Use requestAnimationFrame where available.
- Loading branch information
Showing
11 changed files
with
235 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.