requestAnimationFrame基本功能理解

最新推荐文章于 2025-04-22 16:56:55 发布

转载最新推荐文章于 2025-04-22 16:56:55 发布 · 150 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dan0217/p/8874087.html

本文介绍了requestAnimationFrame函数，该函数类似于setTimeout，但专为动画设计，能在浏览器空闲时以约每秒60帧的速度更新动画，确保动画效果平滑。文章通过示例展示了如何使用此API来实现一个简单的动画效果。

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

ESS新增，ie10以上才兼容

语法格式：requestID = window.requestAnimationFrame(callback);

功能：非常类似setTimeout,此函数会每秒运行大约60次，具体系统会根据闲忙情况合理调度，让动画感觉更平滑。

返回值：requestID 是一个长整型非零值，作为一个唯一的标示符。

案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #progress{
            width: 5px;
            height: 10px;
            background: #008000;
        }
    </style>
</head>
<body>
<div id="progress"></div>
<script>
    var box = document.getElementById("progress");
    box.style.width = "100px";
    var i = 0;
    var timer = 0;
    //定时器   递归函数
    function F(){
        i+=5;
        box.style.width = i+"px";
        if(i<800){
            timer = requestAnimationFrame(F);
        }
    }
    requestAnimationFrame(F,50);

</script>
</body>

转载于:https://www.cnblogs.com/dan0217/p/8874087.html