Jump to content

Need Help With JS Animation Project

ShenaniganCoder

Hi,

   I'm doing a JS project where I make a small, short animation and I found this guide to help with that but I don't understand some of the code. If someone could just break it down for me what each line/chunk of code does and other relevant things I'd really appreciate that.

Thanks!

The "Create the Animation Using JavaScript" part in https://www.w3schools.com/howto/howto_js_animate.asp

Link to comment
Share on other sites

Link to post
Share on other sites

function myMove() {
    var elem = document.getElementById("myAnimation"); // select the html element with id 'myAnimation' (the moving square)
    var pos = 0; // set initial position to 0
    var id = setInterval(frame, 10); // creates a timer that will call the function 'frame' every 10 miliseconds until we stop it
    function frame() { // define the 'frame' function
        if (pos == 350) { // check if position is 350
            clearInterval(id); // in case of true stop the timer
        } else { // otherwise
            pos++; // increase the position variable in 1
            elem.style.top = pos + 'px'; // change the style/css top of the element (square) top current position pixels
            elem.style.left = pos + 'px'; // change the style/css left of the element (square) top current position pixels
        }
    }
}

Basically this is using the timer to call a function that will move the element time to time until reaches certain value ... in this case he is increasing the value of 'top' and 'left' position values of the square... because the top left corner of screen is (0,0) with increasing values to the right and down the squares moves to the bottom right

 

basically is that, sorry for bad english and bad explanation... good luck

Link to comment
Share on other sites

Link to post
Share on other sites

On ‎2‎/‎18‎/‎2017 at 1:11 PM, rdrk said:

function myMove() {
    var elem = document.getElementById("myAnimation"); // select the html element with id 'myAnimation' (the moving square)
    var pos = 0; // set initial position to 0
    var id = setInterval(frame, 10); // creates a timer that will call the function 'frame' every 10 miliseconds until we stop it
    function frame() { // define the 'frame' function
        if (pos == 350) { // check if position is 350
            clearInterval(id); // in case of true stop the timer
        } else { // otherwise
            pos++; // increase the position variable in 1
            elem.style.top = pos + 'px'; // change the style/css top of the element (square) top current position pixels
            elem.style.left = pos + 'px'; // change the style/css left of the element (square) top current position pixels
        }
    }
}

Basically this is using the timer to call a function that will move the element time to time until reaches certain value ... in this case he is increasing the value of 'top' and 'left' position values of the square... because the top left corner of screen is (0,0) with increasing values to the right and down the squares moves to the bottom right

 

basically is that, sorry for bad english and bad explanation... good luck

Is all of the code supposed to do that or just some of it? Does it do anything else?

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×