requestAnimationFrame for Smart Animating

112 阅读1分钟

requestAnimationFrame pollyfill

paulirish.com/2011/reques… my.opera.com/emoller/blo…

import 'core-js/es6/symbol';
import 'core-js/es6/promise';
import 'core-js/es6/set';
import 'core-js/es6/map';

(function() {
 var lastTime = 0;
 var vendors = ['ms', 'moz', 'webkit', 'o'];
 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);
   };
})();