window.requestAnimationFrame()

window.requestAnimationFrame()方法用于告诉浏览器,你想在浏览器的下个重绘(repaint)之前来执行一个动画或者执行浏览器通过调用一个特定的函数来更新动画的请求。该方法会在下次重回之前执行一个作为参数的回调函数。

注意:如果你想在下次重绘的时候激活另一帧,你就要在你的程序中自己调用requestAnimationFrame()方法。

不论在什么时候,如果你已经准备好了更新你屏幕上的动画你都应该调用这个方法。这会在浏览器的下次重绘之前调用你的动画函数。执行回调函数的频率一般是60次/s,但在大多数的浏览器中通常也会按照W3C推荐的屏体刷新频率标准来匹配。当某个页面的tab不可见的时候,回调函数的执行频率也会有所下降。

回调函数会被传第一个唯一的参数,一个DOMHighResTimeStamp参数,用于标记被requestAnimationFrame加入要队列准备执行的时间。因为在一帧中会执行很多回调,因此,尽管在计算前一个回调的工作负载的时候时间已经有所流失,但是每一个毁掉还是被传递进了相同的时间戳。时间戳是一个十进制小数,用毫秒来表示,但是有最小10µs的精度。

语法

requestID = window.requestAnimationFrame(callback);       // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS)
requestID = window.mozRequestAnimationFrame(callback);    // Firefox < 23
requestID = window.webkitRequestAnimationFrame(callback); // Older versions of Safari / Chrome

参数

回调函数
在下一帧的重绘的时候会制定一个回调函数作为参数来更新你的动画。回调函数有一个参数,一个DOMHighResTimeStamp,它指明了requestAnimationFrame对回调函数进行调用的时间。

返回值

requestID是一个长整型值,唯一的标志了回调列表中的条目。这是一个非零值,但是你不用担心这个值其他的信息。你可以将这个值作为参数传递进window.cancelAnimationFrame()函数来取消对回调函数更新的请求。

例子

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;


var start = null;

var d = document.getElementById("SomeElementYouWantToAnimate");

function step(timestamp) {
  var progress;
  if (start === null) start = timestamp;
  progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);

各浏览器对比

DeskTop:
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support10.0 webkit
24.0
4.0 moz [1]
23 [2]
10.0(Yes) -o
15.0
6.0 webkit
6.1
requestID return value23.0 webkit
24.0
11.0 (11.0) moz10.0(Yes) -o
15.0
(Yes)
mobile:
Feature Android BlackBerry Browser Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic supportNot supported10.0 webkit16.0 webkit??14.07.0
6.0 webkit
requestID return value? ?11.0 (11.0) moz???

Gecko内核的浏览器注意事项

[1]在 Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8)之前的版本,mozRequestAnimationFrame()可以再没有参数的情况下运行,现在这个功能已经不再被支持,因为它也不会成为标准的一部分。
[2]在之前的版本,回调的参数是一个DOMTimeStamp而不是DOMHighResTimeStampDOMTimeStamp只有毫秒级别的精度,但DOMHighResTimeStamp有最小10微秒的精度。

Chrome浏览器注意事项

在Chrome里面取消调用的正确方法是 window.cancelAnimationFrame()。较老版本的API,window.webkitCancelAnimationFrame() & window.webkitCancelRequestAnimationFrame()已经被弃用,但是为了往前兼容现在还支持这两个API。
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值