window.requestAnimationFrame()

最新推荐文章于 2025-07-03 12:26:52 发布

weixin_30655219

最新推荐文章于 2025-07-03 12:26:52 发布

阅读量187

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ziyoublog/p/9989543.html

本文深入探讨了window.requestAnimationFrame()方法的使用技巧，详细解释了如何利用此API执行高效流畅的网页动画，并通过实例展示了如何控制动画帧的请求与取消。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、 window.requestAnimationFrame()

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画
该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。


回调函数会被传入一个参数，DOMHighResTimeStamp，指示requestAnimationFrame() 开始触发回调函数的当前时间

返回值
一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。
你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

window.cancelAnimationFrame(requestID)
取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求.
requestID是先前调用window.requestAnimationFrame()方法时返回的ID

二、案例

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#test{
width: 200px;
height: 200px;
background: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}

</style>
</head>
<body>
<div id="test"></div>
</body>
<script type="text/javascript">

/*
* window.requestAnimationFrame()
* window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画
* 该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。
* 
* 
* 回调函数会被传入一个参数，DOMHighResTimeStamp，指示requestAnimationFrame() 开始触发回调函数的当前时间
* 
* 返回值
* 一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。
* 你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。
* 
* 
* window.cancelAnimationFrame(requestID)
* 取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求.
* requestID是先前调用window.requestAnimationFrame()方法时返回的ID.
*/


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

function step(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;

// 元素不断向左移，最大不超过200像素
element.style.left = Math.min(progress / 10, 200) + 'px';
// 如果距离第一次执行不超过 2000 毫秒，
// 就继续执行动画
if(progress < 2000) {

　　window.requestAnimationFrame(step);

}

}

window.requestAnimationFrame(step);


</script>
</html>

转载于:https://www.cnblogs.com/ziyoublog/p/9989543.html