Search code examples
javascriptfunctionanimationparameterslag

Javascript: function with parameters cause lag in animation

First of: I tried searching for a similar problem but really have no clue how to describe this other than how I did it in the title. So if there already is a solution somewhere, please let me know.

I am trying to understand how OOP works in javascript. I have some experience with actionscript. I wrote this code for the sake of practice. It makes a box move from left to right when the page loads. Now I wanted to rewrite the code in such a way that I do not need hundreds of functions for the same kind of animation if I want to create multiple animated boxes.

This is my old code, which worked:

<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>

And this is the second version, in which I tried to make the function for the animation more dynamic. It does seem to work, but it seems to lag, or it simply does not do the animation, I am not sure because it is hard to check. 

<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>

Since I'm busy learning about these things I'm curious about any improvements that I could make for this.

Solution

  • You are running an infinite loop. You have to give a condition for your animation to stop. In my code, it is just an example.

    Try:

    <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>