HTML5 Exploration: Optimizing Web Animation with requestAnimationFrame

In browser animation programs, we usually use a timer to cycle the target object every few milliseconds to make it move. Now the good news is that browser developers have decided: hey, why don't we provide such an API in the browser so that we can optimize their animations for users. Therefore, this requestAnimationFrame() function is an API for animation effects. You can use it for style changes on the DOM or canvas animation or WebGL.

The browser can optimize parallel animation actions, rearrange the action sequence more reasonably, and complete actions that can be combined in one rendering cycle, thereby presenting a smoother animation effect. For example, through requestAnimationFrame(), JS animation can occur simultaneously with CSS animation/transformation or SVG SMIL animation. In addition, if you run an animation in a browser tab, the browser will pause it when the tab is not visible, which will reduce the pressure on the CPU and memory and save battery power.

 // shim layer with setTimeout fallbackwindow.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };} )();// usage:// instead of setInterval(render, 16) ....(function animloop(){ requestAnimFrame(animloop); render();})();// place the rAF *before* the render() to assure as close to// 60fps with the setTimeout fallback.

A more reliable encapsulation of requestAnimationFrame

Opera browser technician Erik Möller encapsulated this function to make it better compatible with various browsers. You can read this article, but basically his code is deciding whether to use 4ms or 16ms delay to best match 60fps. Below is this code, you can use it, but please note that this code uses standard functions, and I have added prefixes to it that are compatible with various browser engines.

 (function() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math. max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); };}());

Let me see the effect of using requestAnimationFrame

 window.requestAnimationFrame(function(/* time */ time){ // time ~= +new Date // the unix time});

The parameters in the callback function can be passed in time.

Various browsers’ support for requestAnimationFrame

Google Chrome, Firefox, and IE10+ all implement this function. Even if your browser is very old, the above encapsulation of requestAnimationFrame can make this method error-free on IE8/9.