requestAnimationFrame原理

最新推荐文章于 2025-11-09 00:27:03 发布

原创

最新推荐文章于 2025-11-09 00:27:03 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细介绍了requestAnimationFrame的API、实现动画的方式、背景术语及函数流程。requestAnimationFrame用于创建流畅的动画，根据页面可见性和CPU负载自动调整帧率。它避免了setTimeout或setInterval的卡顿问题，通过回调函数列表和浏览器UI线程协调执行。浏览器会定期检查并执行未取消的动画帧回调，以确保最佳性能。

requestAnimationFrame原理

API 简介

window.requestAnimationFrame(callback);

用于展示动画时，告诉浏览器在下一次重绘之前继续更新动画。
这个函数的传入参数为一个callback回调函数，这个回调函数即是动画函数。该被传入的动画函数会在浏览器下一次重绘之前执行。

回调函数的执行时间通常为60s，但是遵循W3C标准的浏览器中，回调函数的执行次数和浏览器屏幕刷新次数相匹配。即，若此函数所在的元素处于后台标签页或者隐藏的里时，为了提升性能和电池寿命，requestAnimationFrame()将被暂停调用。

回调函数的传入参数为DOMHighRestimeStamp。此参数存储回调函数被执行的时间，与Performance.now()的返回值相同。同一个帧执行的不同回调函数，得到的DOMHighRestimeStamp参数值为相同的时间戳。这个时间戳是一个十进制数，单位毫秒，最小精度为1ms。

requestAnimationFrame的返回值为一个long型的整数，唯一标识了回调列表。将此返回值传送给window.cancelAnimationFrame() 可以取消回调函数的执行。但是，在callback内部执行cancelAnimationFrame不能取消动画。

实例

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

function step(timestamp) {
   
    // 回调函数callback
  if (!start) start = timestamp; // 第一次调用动画函数时赋初始值