JavaScript requestAnimationFrame动画详解

// Adapted from https://gist.github.com/paulirish/1579671 which derived from // http://paulirish.com/2011/requestanimationframe-for-smart-animating/// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating// requestAnimationFrame polyfill by Erik Möller.// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon// MIT licenseif (!Date.now) Date.now = function() { return new Date().getTime(); };(function() { 'use strict'; var vendors = ['ms', 'moz', 'webkit', 'o']; //浏览器兼容 for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) { //对于支持的浏览器直接统一接口  var vp = vendors[i];  window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];  window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']         || window[vp+'CancelRequestAnimationFrame']); } if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy  || !window.requestAnimationFrame || !window.cancelAnimationFrame) {  //对于不支持的浏览器退而使用setTimeout和clearTimeout  var lastTime = 0;  window.requestAnimationFrame = function(callback) {   var now = Date.now();   var nextTime = Math.max(lastTime + 16, now);   return setTimeout(function() { callback(lastTime = nextTime); },        nextTime - now);  };  window.cancelAnimationFrame = clearTimeout; }}());

function animate() {  console.log("animation");  window.requestAnimationFrame(animate); }animate();