requestAnimationFrame 使用

Posted web前端开发技术

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了requestAnimationFrame 使用相关的知识,希望对你有一定的参考价值。

1、概述

参考网址:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

window.requestAnimationFrame() 参数是一个回调函数。

回调的次数建议每秒60次。

这个回调函数只有一个传参,DOMHighResTimeStamp,指示requestAnimationFrame() 开始触发回调函数的当前时间(performance.now() 返回的时间)。

与setTimeout相比,requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲,如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次,如果刷新率是75Hz,那么这个时间间隔就变成了1000/75=13.3ms,换句话说就是,requestAnimationFrame的步伐跟着系统的刷新步伐走。

 

2、示例

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>requestAnimationFrame使用</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #ani{
                width: 100px;
                height: 100px;
                border: 1px solid greenyellow;
            }
        </style>
    </head>

    <body>
        <div id="ani">

        </div>
        <script type="text/javascript">
            var start = null;
            var element = document.getElementById(ani);
            element.style.position = absolute;
            function step(timestamp) {
                if(!start) start = timestamp;
                var progress = timestamp - start;
                element.style.left = Math.min(progress / 10, 400) + px;
                //动画执行时间
                if(progress < 4000) {
                    //在动画没有结束前,递归渲染
                    window.requestAnimationFrame(step);
                }
            }
            //第一帧渲染
            window.requestAnimationFrame(step);
        </script>
    </body>

</html>

优点:

  • CPU节能:使用setTimeout实现的动画,当页面被隐藏或最小化时,setTimeout 仍然在后台执行动画任务,由于此时页面处于不可见或不可用状态,刷新动画是没有意义的,完全是浪费CPU资源。而requestAnimationFrame则完全不同,当页面处理未激活的状态下,该页面的屏幕刷新任务也会被系统暂停,因此跟着系统步伐走的requestAnimationFrame也会停止渲染,当页面被激活时,动画就从上次停留的地方继续执行,有效节省了CPU开销。
  • 函数节流:在高频率事件(resize,scroll等)中,为了防止在一个刷新间隔内发生多次函数执行,使用requestAnimationFrame可保证每个刷新间隔内,函数只被执行一次,这样既能保证流畅性,也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的,因为显示器每16.7ms刷新一次,多次绘制并不会在屏幕上体现出来。

以上是关于requestAnimationFrame 使用的主要内容,如果未能解决你的问题,请参考以下文章

250张png图片实现动画实现方案事件

requestAnimationFrame 使用

详解Web API requestAnimationFrame

requestAnimationFrame 使用小记

requestAnimationFrame简介

秀才提笔忘了字:javascript使用requestAnimationFrame实现动画