requestAnimationFrame 浏览器/小程序/Vue 兼容写法

当前位置: 首页 » 记录 » javascript » requestAnimationFrame 浏览器/小程序/Vue 兼容写法

分类: javascript 585阅读阅读模式

requestAnimationFrame 在浏览器/Vue 中的兼容替代

如下:

  1. (function() {
  2.   var lastTime = 0;
  3.   var vendors = ['webkit''moz'];
  4.   for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  5.     window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
  6.     window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
  7.   }
  8.   if (!window.requestAnimationFrame) {
  9.     window.requestAnimationFrame = function(callback) {
  10.       var currTime = new Date().getTime();
  11.       var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  12.       var id = window.setTimeout(function() {
  13.         callback(currTime + timeToCall);
  14.       }, timeToCall);
  15.       lastTime = currTime + timeToCall;
  16.       return id;
  17.     };
  18.   }
  19.   if (!window.cancelAnimationFrame) {
  20.     window.cancelAnimationFrame = function(id) {
  21.       clearTimeout(id);
  22.     };
  23.   }
  24. }());

使用时:

  1. // 兼容定义
  2. var nextAni = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (cb) { window.setTimeout(cb, 1000 / 60) };
  3. // 使用
  4. nextAni(someFunc);

 

 

requestAnimationFrame 在小程序中的使用

如下:

  1. (function() {
  2.   var lastTime = 0;
  3.   var vendors = ['webkit''moz'];
  4.   for (var x = 0; x < vendors.length && !requestAnimationFrame; ++x) {
  5.     requestAnimationFrame = vendors[x] + 'RequestAnimationFrame';
  6.     cancelAnimationFrame = vendors[x] + 'CancelAnimationFrame' || vendors[x] + 'CancelRequestAnimationFrame';
  7.   }
  8.   if (!requestAnimationFrame) {
  9.     requestAnimationFrame = function(callback) {
  10.       var currTime = new Date().getTime();
  11.       var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  12.       var id = setTimeout(function() {
  13.         callback(currTime + timeToCall);
  14.       }, timeToCall);
  15.       lastTime = currTime + timeToCall;
  16.       return id;
  17.     };
  18.   }
  19.   if (!cancelAnimationFrame) {
  20.     cancelAnimationFrame = function(id) {
  21.       clearTimeout(id);
  22.     };
  23.   }
  24. }());

使用时:

  1. // 兼容定义
  2. const nextAni = requestAnimationFrame || webkitRequestAnimationFrame || mozRequestAnimationFrame || msRequestAnimationFrame || oRequestAnimationFrame || function (cb) { setTimeout(cb, 1000 / 60) };
  3. // 使用时
  4. nextAni(someFunc);

 

完毕!

相关文章