html无卡顿动画实现——requestAnimationFrame

Posted 2021-11-22 zhoushangwu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html无卡顿动画实现——requestAnimationFrame相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="width:50px; height:50px; background-color:red;margin-left:2px;">
        文字
    </div>
</body>
</html>
<script>

    var px = 5;
    var myReq;
    function test() {
        var div = document.querySelector(‘div‘);

        div.style.marginLeft = (parseInt(div.style.marginLeft.replace(‘px‘, ‘‘)) + px) + ‘px‘;

        //if (parseInt(div.style.marginLeft.replace(‘px‘, ‘‘)) > 500) {
        //    px = -px;
        //}

        //if (parseInt(div.style.marginLeft.replace(‘px‘, ‘‘)) <= 0) {
        //    px = -px;
        //}

        if (parseInt(div.style.marginLeft.replace(‘px‘, ‘‘)) > 500) {
            //window.cancelAnimationFrame(myReq);

            return;
        }

        myReq = window.requestAnimationFrame(test);
    }

    myReq = window.requestAnimationFrame(test);
</script>

以上是关于html无卡顿动画实现——requestAnimationFrame的主要内容，如果未能解决你的问题，请参考以下文章

从打字机效果的 N 种实现看JS定时器机制和前端动画