requestAnimationFram 的优势及使用场景

利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。这种现象的产生有两个原因：

setTimeout的执行时间并不是确定的。在Javascript中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。

刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。

不过实现动画还可以使用requestAnimationFrame

requestAnimationFrame的方式的优势如下：

1.经过浏览器优化，动画更流畅

2.窗口没激活时，动画将停止，省计算资源

3.更省电，尤其是对移动终端

requestAnimationFrame最大的优势是

由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题.

一个进度指示器demo：

<!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>requestAnimationFram</title>
</head>
<body>
    <div id='contener' style="background:linear-gradient(45deg, red, blue, black, yellow); height: 20px; line-height: 20px; width: 0px; display: inline-block; vertical-align: middle;"></div>
    <div id='content' style="height: 20px; line-height: 20px; display: inline-block; vertical-align: middle; margin-left: 5px;"></div>
    <br>
    <br>
    <div>

    </div>
    <button id='begin'>开始</button>
</body>
<script>
    //在页面上绘制一个进度条，值 0% =》 100%
    const btn = document.getElementById('begin');
    const contener = document.getElementById('contener');
    const content = document.getElementById('content');
    let start;
    btn.addEventListener('click', rAF)

    function rAF() {
        contener.style.width = 0;
        let current = Date.now();
        start = current;
        requestAnimationFrame(progess)
    }
    
    function progess() {
        contener.style.width = contener.offsetWidth + 5 + 'px';
        content.innerHTML = contener.offsetWidth / 5 + '%';
        if(contener.offsetWidth < 500) {
            let current = Date.now();
            console.log(current - start);
            start = current;
            width = contener.style.width;
            requestAnimationFrame(progess);
        }
    }
</script>
</html>

演示效果：

posted @ 2021-05-14 14:17 艺术诗人阅读(473) 评论(0) 编辑收藏举报

刷新页面返回顶部

requestAnimationFram 的优势及使用场景

公告