Source: Core/requestAnimationFrame.js

  1. /*global define*/
  2. define([
  3.         './defined',
  4.         './getTimestamp'
  5.     ], function(
  6.         defined,
  7.         getTimestamp) {
  8.     'use strict';
  10.     if (typeof window === 'undefined') {
  11.         return;
  12.     }
  14.     var implementation = window.requestAnimationFrame;
  16.     (function() {
  17.         // look for vendor prefixed function
  18.         if (!defined(implementation)) {
  19.             var vendors = ['webkit', 'moz', 'ms', 'o'];
  20.             var i = 0;
  21.             var len = vendors.length;
  22.             while (i < len && !defined(implementation)) {
  23.                 implementation = window[vendors[i] + 'RequestAnimationFrame'];
  24.                 ++i;
  25.             }
  26.         }
  28.         // build an implementation based on setTimeout
  29.         if (!defined(implementation)) {
  30.             var msPerFrame = 1000.0 / 60.0;
  31.             var lastFrameTime = 0;
  32.             implementation = function(callback) {
  33.                 var currentTime = getTimestamp();
  35.                 // schedule the callback to target 60fps, 16.7ms per frame,
  36.                 // accounting for the time taken by the callback
  37.                 var delay = Math.max(msPerFrame - (currentTime - lastFrameTime), 0);
  38.                 lastFrameTime = currentTime + delay;
  40.                 return setTimeout(function() {
  41.                     callback(lastFrameTime);
  42.                 }, delay);
  43.             };
  44.         }
  45.     })();
  47.     /**
  48.      * A browser-independent function to request a new animation frame.  This is used to create
  49.      * an application's draw loop as shown in the example below.
  50.      *
  51.      * @exports requestAnimationFrame
  52.      *
  53.      * @param {requestAnimationFrame~Callback} callback The function to call when the next frame should be drawn.
  54.      * @returns {Number} An ID that can be passed to {@link cancelAnimationFrame} to cancel the request.
  55.      *
  56.      *
  57.      * @example
  58.      * // Create a draw loop using requestAnimationFrame. The
  59.      * // tick callback function is called for every animation frame.
  60.      * function tick() {
  61.      *   scene.render();
  62.      *   Cesium.requestAnimationFrame(tick);
  63.      * }
  64.      * tick();
  65.      * 
  66.      * @see {@link http://www.w3.org/TR/animation-timing/#the-WindowAnimationTiming-interface|The WindowAnimationTiming interface}
  67.      */
  68.     function requestAnimationFrame(callback) {
  69.         // we need this extra wrapper function because the native requestAnimationFrame
  70.         // functions must be invoked on the global scope (window), which is not the case
  71.         // if invoked as Cesium.requestAnimationFrame(callback)
  72.         return implementation(callback);
  73.     }
  75.     /**
  76.      * A function that will be called when the next frame should be drawn.
  77.      * @callback requestAnimationFrame~Callback
  78.      *
  79.      * @param {Number} timestamp A timestamp for the frame, in milliseconds.
  80.      */
  82.     return requestAnimationFrame;
  83. });