window.requestAnimationFrame()

最新推荐文章于 2024-08-09 21:42:09 发布

Blockchain Explorer

最新推荐文章于 2024-08-09 21:42:09 发布

阅读量510

点赞数

分类专栏： JavaScript/ES6/NodeJS 文章标签： window.requestAnimationFrame()

本文链接：https://blog.csdn.net/TDCQZD/article/details/82468279

版权

JavaScript/ES6/NodeJS 专栏收录该内容

79 篇文章 0 订阅

订阅专栏

一、 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;
          element.style.left = Math.min(progress / 10, 200) + 'px';
          if (progress < 1000) {
            window.requestAnimationFrame(step);
          }
        }

        window.requestAnimationFrame(step);


    </script>
</html>