Window.requestAnimationFrame () animation update

Outline

Window.requestAnimationFrame()Method tells the browser you want to do animation, and then at the request of the browser to call a specific function to update the animation once before redrawn. The method as an argument to a callback function, the callback function will be executed before a redraw in the browser.

Note: If you want to continue to update the next frame animation before the next browser to redraw, the callback function itself must be called Window.requestAnimationFrame again ()

When you're ready to update your animation, you should call the method. It will ask you to animation function is called before the next browser redrawn. Callback frequency is generally 60 times / sec, but usually with most web browsers display refresh rate matches the W3C recommendations. In order to improve performance and battery life, so in most browsers, when requestAnimationFrame()running in the background tab or hidden in <iframe>there when, requestAnimationFrame()be suspended calls to improve performance and battery life.

The callback function will be passed DOMHighResTimeStampparameter DOMHighResTimeStampindicates the current is requestAnimationFrame()time to sort callback function is triggered. In the same frame, a plurality of callback functions, each of them will receive a same time stamp, even during operation of the load on a calculation of the callback function has been consumed for some time. The timestamp is a decimal number, in milliseconds, the minimum accuracy of 1ms (1000μs).

grammar

window.requestAnimationFrame(callback);

parameter

callback

Update function (ie, the above mentioned callback function) animation frames invoked before the next redraw. The callback function is passed the DOMHighResTimeStampargument that the performance.now()same return value, which indicates requestAnimationFrame()the beginning of time to perform the callback function.

return value

An longinteger, the request ID, callback list unique identifier. Is a non-zero value, no other meaning. You can pass this value to window.cancelAnimationFrame()to cancel the callback function.

example

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);