requestAnimationFrame (定时&&动画)

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

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

1 ·

CC 4.0 BY-SA版权

本文深入探讨了HTML5新增的requestAnimationFrame定时器，详细介绍了其工作原理、优势与局限性，并通过实例展示了如何使用此API实现流畅的动画效果。与setTimeout相比，requestAnimationFrame在页面不可见时会暂停渲染，更高效地配合屏幕刷新率执行动画更新。

requestAnimationFrame是HTML5新增的定时器,不需要设置时间间隔

cancelAnimationFrame方法用于取消定时器

requestAnimationFrame(调用函数)

优点:
1\性能好,页面处于不可见或不可用状态requestAnimationFrame会暂停渲染,setTimeout不会.
1\它能够保证我们的动画函数的每一次调用都对应着一次屏幕重绘
3\函数节流,requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次
缺点:
1\兼容问题
2\

 <div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
   <input type="button" value="Run" id="run"/>    

<script type="text/javascript">
        var ele = document.getElementById("test");
        var progress = 0;
        
        function step(timestamp) {
            progress += 1;
            ele.style.width = progress + "%";
            ele.innerHTML=progress + "%";
            if (progress < 100) {
                requestAnimationFrame(step);
            }
        }
        requestAnimationFrame(step);
</scirpt>