Basic JavaScript animation knowledge

1. Location

It is easy to place an element in the document to a specific position. Suppose there is an element like this:

<p id=”message”>Whee!</p>

Therefore, you can use a JavaScript function to set the position of this element:

function positionMessage(){if(!document.getElementById)return false;if(!document.getElementById("message"))return false;var elem = document.getElementById("message");elem.style.position = "absolute";elem.style.left = "50px";elem.style.top = "100px";}

When the positionmessage function is called during page loading, the text will be placed at 50 pixels from the Left Border of the browser window and 100 pixels from the top border of the browser window:

Window.onload = positionMessage;

However, it is best to use the addloadevent function, as shown below:

function addLoadEvent(func){var oldonload = window.onload;if(typeof window.onload != 'function'){window.onload = func;}else{window.onload = function(){oldonload();func();}}}addLoadEvent(positionMessage);

It is also easy to change the position of an element. You only need to execute a function to change the style, top, style, left, and other attributes of the element:

function moveMessage(){if(!document.getElementById)return false;if(!document.getElementById("message"))return false;var elem = document.getElementById("message");elem.style.left = "200px";}

If the movemessage function is run during page loading, the position of this element changes immediately-the original position given by the position function will be overwritten immediately:

addLoadEvent(positionMessage);addLoadEvent(moveMessage);

To achieve the true animation effect, the element position must change with time. Therefore, we must "CREATE" the time interval.

2. Time

The JavaScript function setTimeout allows a function to be executed after a specified period of time. This function has two parameters: the first parameter is usually a string with the name of the function to be executed, and the second parameter is a value, it sets in milliseconds how long it takes to start executing the function given by the first parameter:

setTimeout("function", interval)

You can use a function named cleartimeout to cancel a function in the "waiting for execution" queue. This function requires a parameter -- the variable that stores the returned value of a setTimeout function call:

clearTimeout(variable)

Modify the positionmessage function so that it can call the movemessage function after 5 seconds (or 5000 milliseconds:

function positionMessage(){if(!document.getElementById)return false;if(!document.getElementById("message"))return false;var elem = document.getElementById("message");elem.style.position = "absolute";elem.style.left = "50px";elem.style.top = "100px";movement = setTimeout("moveMessage()", 5000);}

The positionmessage function will still be executed when the page is loaded:

addLoadEvent(positionMessage);

3. incremental time

Now let's update the movemessage function to make the movement of elements gradient. The logic of the new movemessage function is as follows.

(1) obtain the current position of the element.

(2) Exit the function if the element has reached its destination.

(3) If the element has not reached its destination, move it closer to its destination.

(4) Repeat the preceding steps from step 1 after a period of time.

The code list of the movemessage function is as follows:

function moveElement(elementID, final_x, final_y, interval){if(!document.getElementById)return false;if(!document.getElementById(elementID))return false;var elem = document.getElementById(elementID);var xpos = parseInt(elem.style.left);var ypos = parseInt(elem.style.top);if(xpos == final_x && ypos == final_y){return true;}if(xpos<final_x){xpos++;}if(xpos>final_x){xpos--;}if(ypos<final_y){ypos++;}if(ypos>final_y){ypos--;}elem.style.left = xpos + "px";elem.style.top = ypos + "px";var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," +interval + ")";movement = setTimeout(repeat, interval);}