requestAnimationFrame简单用法

2022-08-30 09:30:33 阅读：124 来源： 互联网

标签：aaa requestAnimationFrame 100px 用法 flag let 简单 left

面试题：用js实现一个无限循环的动画。
首先想到的是定时器

<!doctype html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
<div id="aaa"></div>
<script>
    let a = aaa;
    let flag = true;
    let left = 0;
    function renders() {
        if(flag){
            left >= 100 && (flag = false)
            a.style.left = ` ${left++}px`
        } else {
            left <= 0 && (flag = true)
            a.style.left = ` ${left--}px`
        }
    }
    setInterval(function(){
         renders()
    },1000/60) // 时间间隔是1000/60,因为大多数屏幕渲染的时间间隔是每秒60帧。

</script>
</body>
<style>
        #aaa{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 0;
            top: 0;
            zoom: 1;
        }
    </style>
</html>

可以实现

既然setInterval可以搞定为啥还要用requestAnimationFrame呢？
requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
代码如下：

<!doctype html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
<div id="aaa"></div>
<script>
    let a = aaa;
    let flag = true;
    let left = 0;
    function renders() {
        if(flag){
            left >= 100 && (flag = false)
            a.style.left = ` ${left++}px`
        } else {
            left <= 0 && (flag = true)
            a.style.left = ` ${left--}px`
        }
    }

    //requestAnimationFrame效果
    (function animateloop() {
        render();
        window.requestAnimationFrame(animloop);
    })();

</script>
</body>
<style>
        #aaa{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 0;
            top: 0;
            zoom: 1;
        }
    </style>
</html>

各个浏览器的兼容写法自己处理。

有两个问题。
1、如何停止requestAnimationFrame呢？是否也有类似clearInterval这样的类似方法？

第一个问题：答案是有的：
cancelAnimationFrame()方法接收一个参数。
requestAnimationFrame默认返回一个id，cancelAnimationFrame只需要传入这个id就可以停止了。

<!doctype html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
<div id="aaa"></div>
<script>
    let a = aaa;
    let flag = true;
    let left = 0;
    let id = null
    function renders() {
        if(flag){
            left >= 100 && (flag = false)
            a.style.left = ` ${left++}px`
        } else {
            left <= 0 && (flag = true)
            a.style.left = ` ${left--}px`
        }
    }
    (function animateloop(time) {
        renders();
        id = requestAnimationFrame(animloop);
        if (left == 50) {//如果left等于50 停止动画
            cancelAnimationFrame(id )
        }
    })();
</script>
</body>
<style>
        #aaa{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 0;
            top: 0;
            zoom: 1;
        }
    </style>
</html>

2、如果我想动画频率降低怎么做，为什么不考虑加快？

默认情况下，requestAnimationFrame执行频率是1000/60,大概是16.6ms多执一次。

如果我们想每50ms执行一次怎么办呢？
requestAnimationFrame执行条件类似递归调用 ,既然这样的话我们能否自定一个时间间隔再执行呢？，
解决方案:
当和服务端通信时记录下一个时间差，（时间差等于服务端时间-本地时间）不管正负我们只要这个时间差。这样每当我们接受到消息或者发送消息的时候我们就拿本地时间和是价差相加。这样就可以保证和服务端时间是一致的了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="aaa"></div>
    <script >
    const a = aaa
    const flag = true;
    let left = 0;
    let id = null;
    // 当前执行时间
    let nowTime = 0;
    // 记录每次动画执行结束的时间
    let lastTime = Date.now();
    // 我们自己定义的动画时间差值
    let diffTime = 40;
    function renders() {
        if(flag){
            left >= 100 && (flag = false)
            a.style.left = ` ${left++}px`
        } else {
            left <= 0 && (flag = true)
            a.style.left = ` ${left--}px`
        }
    }
    (function animateloop(time) {
        nowTime = Date.now();// 记录当前时间
        console.log(Date.now());
        // 当前时间 - 上次执行时间如果大于diffTime，那么执行那个动画，并更新上次执行时间
        if (nowTime - lastTime > diffTime) {
            lastTime = nowTime
            render();
        }
        requestAnimationFrame(animateloop);
    })();

    </script>
</body>
<style>
    #aaa{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 0;
            top: 0;
            zoom: 1;
        }
</style>
</html>

————————————————
版权声明：本文为CSDN博主「胜玲龙」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40184218/article/details/124345131

标签：aaa,requestAnimationFrame,100px,用法,flag,let,简单,left
来源： https://www.cnblogs.com/heibaiqi/p/16638145.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

requestAnimationFrame简单用法