webvr动画函数requestAnimationFrame

最新推荐文章于 2022-03-05 14:11:14 发布

原创最新推荐文章于 2022-03-05 14:11:14 发布 · 604 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #动画 #webvr

web前端专栏收录该内容

143 篇文章

订阅专栏

本文详细介绍了requestAnimationFrame API在实现高性能帧动画中的优势，并通过与setInterval和setTimeout进行对比，展示了其在资源利用效率上的优越性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在学习three.js绘制动画的时候接触到了动画函数requestAnimationFrame。

在HTML5/css3的时代我们要在web上写动画选择其实已经很多种了：

1.css3的animattion+keyframes;

2.css3的transition；

3.canvas上作图

4.Jquery动画api

5.window.setTimout()、window.setInterval()通过不断更新元素的状态位置来实现动画，前提是画面的更新频率要达到每秒60次，也就是60帧。

requestAnimationFrame是专门为实现高性能的帧动画而设计的一个API

setInterval()、setTimeout()是开发者主动要求浏览器去绘制，但是浏览器可能会漏掉部分命令，他们使用推荐最小使用16.7ms的原因（16.7=1000/60，即每秒60帧）,如果是使用了比16.7ms小的时间，会出现导致所有第三帧丢掉，继而导致动画断续显示，过度绘制，不仅如此，这种计时器频率的降低，对电脑电池使用寿命造成负面影响，并会降低其他应用的性能。

requestAnimationFrame优点：

1:浏览器只要通知一次就行了，而setInterval()、setTimeout()是多个独立绘制

2.页面最小化，或者tab切换了，页面绘制全部停止，资源高效利用。

对比：

setInterval实现，大概调用了147次左右：如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setInterval</title>
</head>
<body>
<img id="book" style="background:red;opacity:1;position: relative; left: 500px;" alt="" width="100" height="123" data-mce-style="background: red; opacity: 1; position: relative; left: 500px;"/>
<div id="several"><br/></div>
<script type="text/javascript">
    var book = document.getElementById('book')
    var several = document.getElementById('several');
    animate(book, {
        left: 50,
        duration: 2000
    })
    function animate(elem, options) {
        //动画初始值
        var start = 500
        //动画结束值
        var end = options.left
        //动画id
        var timerId;
        var createTime = function () {
            return (+new Date)
        }
        //动画开始时间
        var startTime = createTime();
        var i = 0;
        function tick() {
            i++;
            several.innerHTML = 'setInterval调用次数:' + i;
            //每次变化的时间
            var remaining = Math.max(0, startTime + options.duration - createTime())
            var temp = remaining / options.duration || 0;
            var percent = 1 - temp;
            var stop = function () {
                //停止动画
                clearInterval(timerId);
                timerId = null;
            }
            var setStyle = function (value) {
                elem.style['left'] = value + 'px'
            }
            //移动的距离
            var now = (end - start) * percent + start;
            if (percent === 1) {
                setStyle(now)
                stop();
            } else {
                setStyle(now)
            }
        }
        //开始执行动画
        var timerId = setInterval(tick, 13);
    }
</script>
</body>
</html>

requestAnimationFrame 实现，大概调用了115次左右：如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>requestAnimationFrame</title>
</head>
<body>
<img id="book" style="background:red;opacity:1;position: relative; left: 500px;" alt="" width="100" height="123" data-mce-style="background: red; opacity: 1; position: relative; left: 500px;"/>
<div id="several"><br/></div>
<script type="text/javascript">
    var book = document.getElementById('book')
    var several = document.getElementById('several');
    animate(book, {
        left: 50,
        duration: 2000
    })
    function animate(elem, options) {
        //动画初始值
        var start = 500
        //动画结束值
        var end = options.left
        var createTime = function () {
            return (+new Date)
        }
        //动画开始时间
        var startTime = createTime();
        var timerId;
        //开始动画
        var startAnim = function () {
            timerId = requestAnimationFrame(tick, 15);
        }
        //停止动画
        var stopAnim = function () {
            cancelAnimationFrame(timerId)
        }
        var i = 0;

        function tick() {
            i++;
            several.innerHTML = 'requestAnimationFrame调用次数:' + i;
            //每次变化的时间
            var remaining = Math.max(0, startTime + options.duration - createTime())
            var temp = remaining / options.duration || 0;
            var percent = 1 - temp;
            var setStyle = function (value) {
                elem.style['left'] = value + 'px'
            }
            //移动的距离
            var now = (end - start) * percent + start;
            if (percent === 1) {
                setStyle(now)
                stopAnim();
            } else {
                setStyle(now)
                startAnim(tick);
            }
        }

        //开始执行动画
        startAnim(tick);
    }

</script>
</body>
</html>