Javascript:带有参数的函数会导致动画滞后

Javascript: function with parameters cause lag in animation

本文关键字：动画 滞后 函数 参数 Javascript      更新时间：2023-09-26

首先：我试图搜索一个类似的问题，但除了在标题中如何描述外，我真的不知道如何描述它。因此，如果某个地方已经有了解决方案，请告诉我。

我试图理解OOP在javascript中是如何工作的。我对动作脚本有一些经验。我写这个代码是为了练习。当页面加载时，它会使框从左向右移动。现在，我想以这样一种方式重写代码，即如果我想创建多个动画框，那么同一种动画不需要数百个函数。

这是我的旧代码，有效：

<script>
    var dx = 850;
    var x = 0;
    var y = 450;
    function init() {
        b = document.getElementById("box1");
        moveIt();
    }
    window.requestAnimFrame = (function() {
        return  window.requestAnimationFrame OR
                window.webkitRequestAnimationFrame OR
                window.mozRequestAnimationFrame OR
                window.oRequestAnimationFrame OR
                window.msRequestAnimationFrame OR
                function (/* function */ callback, /* DOMElement */ element)
                {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();
    function moveIt() {
        x += (dx - x) * 0.15;
        b.style.left = x + "px";
        b.style.top = y + "px";
        requestAnimFrame(moveIt, b);
    }

    </script>
</head>
<body onload="init()">
    <div style="width:50px;height:50px;background:blue;position:absolute;" id="box1"></div>

</body>

这是第二个版本，我试图使动画的功能更加动态。它看起来确实有效，但似乎滞后，或者根本不做动画，我不确定，因为很难检查。

<script>

    function init() {
        b = document.getElementById("box1");
        moveIt(b, 0, 850, 0, 450);
    }
    window.requestAnimFrame = (function() {
        return  window.requestAnimationFrame OR
                window.webkitRequestAnimationFrame OR
                window.mozRequestAnimationFrame OR
                window.oRequestAnimationFrame OR
                window.msRequestAnimationFrame OR
                function (/* function */ callback, /* DOMElement */ element)
                {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();
    function moveIt(theobject, x, endx, y, endy) {
        x += (endx - x) * 0.15;
        y += (endy - y) * 0.15;
        theobject.style.left = x + "px";
        theobject.style.top = y + "px";
        requestAnimFrame(moveIt(theobject, x, endx, y, endy), b);
    }

    </script>
</head>
<body onload="init()">
    <div style="width:50px;height:50px;background:blue;position:absolute;" id="box1"></div>

</body>

由于我忙于学习这些东西，我很好奇我能为此做出什么改进。

您正在运行一个无限循环。你必须给出一个停止动画的条件。在我的代码中，它只是一个示例。

尝试：

<div id="box1" style="position: absolute">x</div>
<button onclick="init();">Test</button>
<script type="text/javascript">
var xInit, yInit;
function init() {
    b = document.getElementById("box1");
    xInit = 0;
    yInit = 0;
    moveIt(b, xInit, 850, yInit, 450);
}
function moveIt(theobject, x, endx, y, endy) {
    x += Math.floor((endx - xInit)*0.01);
    y += Math.floor((endy - yInit)*0.01);
    theobject.style.left = x + "px";
    theobject.style.top = y + "px";
    if ( x < endx )
        requestAnimationFrame(function() {moveIt(theobject, x, endx, y, endy)});
}
</script>
相关文章：