requestanimation()兼容处理

window.requestNextAnimationFrame = (function () {
var originalWebkitRequestAnimationFrame = undefined,
wrapper = undefined,
callback = undefined,
geckoVersion = 0,
userAgent = navigator.userAgent,
index = 0,
self = this;

// Workaround for Chrome 10 bug where Chrome
// does not pass the time to the animation function

if (window.webkitRequestAnimationFrame) {
// Define the wrapper

wrapper = function (time) {
  if (time === undefined) {
    time = +new Date();
  }
  self.callback(time);
};

// Make the switch

originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame;

window.webkitRequestAnimationFrame = function (callback, element) {
  self.callback = callback;

  // Browser calls the wrapper and wrapper calls the callback

  originalWebkitRequestAnimationFrame(wrapper, element);
}

}

// Workaround for Gecko 2.0, which has a bug in
// mozRequestAnimationFrame() that restricts animations
// to 30-40 fps.

if (window.mozRequestAnimationFrame) {
// Check the Gecko version. Gecko is used by browsers
// other than Firefox. Gecko 2.0 corresponds to
// Firefox 4.0.

index = userAgent.indexOf('rv:');

if (userAgent.indexOf('Gecko') != -1) {
  geckoVersion = userAgent.substr(index + 3, 3);

  if (geckoVersion === '2.0') {
    // Forces the return statement to fall through
    // to the setTimeout() function.

    window.mozRequestAnimationFrame = undefined;
  }
}

}

return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||

  function (callback, element) {
    var start,
        finish;

    window.setTimeout(function () {
      start = +new Date();
      callback(start);
      finish = +new Date();

      self.timeout = 1000 / 60 - (finish - start);

    }, self.timeout);
  };

}());

window.cancelNextRequestAnimationFrame = window.cancelRequestAnimationFrame
|| window.webkitCancelAnimationFrame
|| window.webkitCancelRequestAnimationFrame
|| window.mozCancelRequestAnimationFrame
|| window.oCancelRequestAnimationFrame
|| window.msCancelRequestAnimationFrame
|| clearTimeout;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 本文主要参考w3c资料,从底层实现原理的角度介绍了requestAnimationFrame、cancelA...
    Bruce_zhuan阅读 5,415评论 0 3
  • **2014真题Directions:Read the following text. Choose the be...
    又是夜半惊坐起阅读 13,477评论 0 23
  • (一) 箜篌声咽离人泪,把酒高歌心未醉。 昨夜梨花犹然舞,今夕明月映葳蕤。 春愁剪却冬寒尽,秋意接值夏雨回。 一番...
    d03e056874dc阅读 2,498评论 0 0
  • 思维导图 一、简介 1. nodeJS nodeJS的出现,可以算是前端里程碑式的一个事件,它让前端攻城狮们摆脱了...
    小pxu阅读 3,770评论 4 3
  • 乐宝愉快的享受妈妈的爱心早餐:红薯叶西红柿鸡蛋面疙瘩 离开孩子几个月之后,再次回到家,回到孩子身边,再次看着乐宝恢...
    清清的海阅读 3,663评论 10 11