You can use JavaScript to create a complex animation which includes but not limited to:

Fireworks
Fade Effect
Roll-in or Roll-out
Page-in or Page-out
Object movements

You might be interested in existing JavaScript based animation library : Script.Aculo.us.

This tutorial will give you basic understanding on how to use JavaScript to create an animation.

JavaScript can be used to move a number of DOM elements (<img />, <div> or any other HTML element) around the page according to some sort of pattern determined by a logical equation or function.

JavaScript provides following two functions to be frequently used in animation programs.

setTimeout( function, duration) - This function calls function after durationmilliseconds from now.
setInterval(function, duration) - This function calls function after every durationmilliseconds.
clearTimeout(setTimeout_variable) - This function calls clears any timer set by the setTimeout() functions.

JavaScript can also set a number of attributes of a DOM object including its position on the screen. You can set top and left attribute of an object to position it anywhere on the screen. Here is the simple syntax:

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or
// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

Manual Animation:

So let's implement one simple animation using DOM object properties and JavaScript functions as follows:

<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
<!--
var imgObj = null;
function init(){
   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'relative'; 
   imgObj.style.left = '0px'; 
}
function moveRight(){
   imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>

Here is the explanation of the above example:

We are using JavaScript function getElementById() to get a DOM object and then assigning it to a global variable imgObj.
We have defined an initialization function init() to initialize imgObj where we have set itsposition and left attributes.
We are calling initialization function at the time of window load.
Finally, we are calling moveRight() function to increase left distance by 10 pixels. You could also set it to a negative value to move it to the left side.

To understand it in better way you can Try it yourself.

Automated Animation:

In the above example we have seen , how an image moves to right with every click. We can automate this process by using JavaScript function setTimeout() as follows:

<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
<!--
var imgObj = null;
var animate ;
function init(){
   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'relative'; 
   imgObj.style.left = '0px'; 
}
function moveRight(){
   imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
   animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop(){
   clearTimeout(animate);
   imgObj.style.left = '0px'; 
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>

Here we have add more spice. So let's see what is new here:

The moveRight() function is calling setTimeout() function to set the position of imgObj.
We have added a new function stop() to clear the timer set by setTimeout() function and to set the object at its initial position.

To understand it in better way you can Try it yourself.

Rollover with a Mouse Event:

Here is a simple example showing image rollover with a mouse events:

<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type="text/javascript">
<!--
if(document.images){
    var image1 = new Image();      // Preload an image
    image1.src = "/images/html.gif";
    var image2 = new Image();      // Preload second image
    image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href="#" onMouseOver="document.myImage.src=image2.src;"
            onMouseOut="document.myImage.src=image1.src;">
<img name="myImage" src="/images/html.gif" />
</a>
</body>
</html>

Developer Scripts - Stuff

Pages

16 Oct 2013

Javascript Animation

Manual Animation:

Automated Animation:

Rollover with a Mouse Event:

No comments:

Post a Comment