JavaScript Animation

Animation is a type of optical illusion where the rapid display of a sequence of images or frames of 2D or 3D artwork creates an illusion of movement. An animation movie or cartoon film is an example of animation.

Types of Animation

Animation can be divided into two categories given in the following table.

Animation Name	Description
Sprite Animation	Sprite animation defines a rectangular image in which the parts of the image are made transparent where you want to show the background. It has the ability to move an image over another image.
Frame Animation	Frame animation allows you to create fast slide shows. In this animation, you can create a number of slides or frames by making small changes in each frame. As the slide sets are displayed in quick succession, therefore, the changes appears as motion.

A high-quality animation contains the combination of both the animations, that is, the sprite animation and the frame animation.

Timing Functions to Create Animations

JavaScript provides timing functions to create animation which are listed here in the following table.

Function	Description
setTimeout(function, duration)	This function is used to execute the code sometime in the future
setInterval(function, duration)	This function is used to execute the code after specified intervals of time
clearTimeout(setTimeout_variable)	This function is used to clear the timer set by the setTimeout() function

JavaScript Animations Example

Here is a simple animation example using JavaScript. This is manual animation example in JavaScript:

<html>
<head>
   <title>JavaScript Manual Animation</title>
   <script type="text/javascript">
   var image_object = null;
   function init()
   {
      image_object = document.getElementById('color1');
      image_object.style.position= 'relative'; 
      image_object.style.left = '0px'; 
   }
   function moveRight() {
      image_object.style.left = parseInt(image_object.style.left) + 10 + 'px';
   }
   window.onload =init;
   </script>
</head>
<body>

<form>
   <img id="color1" src="color1.jpg" style="height:100px;weight:100px;"/>
   <p>Click on the <b>Animate</b> button to animate the image manually.</p>
   <input type="button" value="Animate" onclick="moveRight();" />
</form>

</body>
</html>

Here is the sample output produced by the above manual animation example code in JavaScript:

To animate the image, just click on the Animate button. After clicking on the Animate button, one time, the output will become as shown in the figure given below:

Now again click on the Animate button, the output will looks like:

Here is another example on animation using JavaScript:

<html>
<head>
   <title>JavaScript Automatic Animation</title>
   <script type="text/javascript">
   var image_object = null;
   var animate ;
   function initializn()
   {
      image_object = document.getElementById('image_1');
      image_object.style.position= 'relative'; 
      image_object.style.left = '0px'; 
   }
   function moveRight()
   {
      image_object.style.left = parseInt(image_object.style.left) + 10 + 'px';
      animate = setTimeout(moveRight,20); // call moveRight in 20msec
   }
   function stop()
   {
      clearTimeout(animate);
      image_object.style.left = '0px'; 
   }
   window.onload = initializn;
   </script>
   </head>
<body>

   <form>
      <img id="image_1" src="img1.jpg" style="height:100px;weight:100px;"/>
      <p>Click the <b>Start/Start Animation</b> to start and stop the animation effect.</p>
      <input type="button" value="Start Animation" onclick="moveRight();" />
      <input type="button" value="Stop Animation" onclick="stop();" />
   </form>
   
</body>
</html>

Here is the sample output produced by the above JavaScript animation (automatic animation) example code:

To start the animation effect, click on the Start Animation button, and to stop the animation effect, click on the Stop Animation button. Here is the live demo output of the above Animation example using JavaScript: