requestAnimationFrame

最新推荐文章于 2025-04-24 13:54:08 发布

chuanpizhe9926

最新推荐文章于 2025-04-24 13:54:08 发布

阅读量319

点赞数

文章标签：游戏

原文链接：https://my.oschina.net/u/4085373/blog/3024459

版权

RequestAnimationFrame

语法：

window.requestAnimationFrame(callback);

参数：

callback: 要进行下一帧重绘时候要调用的回调函数，该函数有一个参数DOMHighResTimeStamp，表示要执行函数的时间值。

返回值：

一个唯一标识， long类型。

window.cancelAnimationFrame(标识符);

优点：

requestAnimationFrame跟屏幕刷新同步，大多数屏幕的刷新频率都是60Hz，对应的requestAnimationFrame的速率是16ms一次

相比于setTimeout()可以保证在16ms进行回调函数的调用并且产生浏览器的重绘，使用setTimeout之类的定时器的时候，会因为其他原因产生函数调用的延迟，而且如果定时器设置的时间小于16ms的时候，浏览器还没有到重绘的时间点，但是定时器里面的函数却执行了多次，可能会出现跳帧的情况。

范例：

这个范例实现了在2s内移动SomeElementYouWantToAnimate的位置

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

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

window.requestAnimationFrame(step);

转载于:https://my.oschina.net/u/4085373/blog/3024459