Sunday, January 19, 2014

Your First JavaScript Animation

You can create a quick animation using JavaScript in about 10 lines of code. All you need are Gedit and Firefox, both being available by default on your system.

Create an html file, say test.html, with the following contents:

<!-- test.html -->

<!--
This animation uses two boxes, one big and another small. The small box moves inside the big box. These two boxes are created using following two "div" objects:
-->

<div style="width:1000;height:550;border-style:solid;border-width:2" />
<!--This div element is 1000 pixels wide and 550 pixels heigh. It has got a solid border of 2 pixel thickness.-->

<div id="square" style="width:100;height:100;border-style:solid;border-width:2;border-color:purple;background-color:yellowgreen;">
</div>
<!--This div object is a 100 pixel wide square. Its name/id has been set to the word "square" for easy identification. It also has a solid border of 2 pixel thickness. This border is purple and the box is shaded with yellow-green color. -->

<script>
//This small script describes the interaction between the two boxes declared above.

//First we create a javascript variable called "box" which actually refers to the second div object (whose id was manually set to the word "square").

var box = document.getElementById("square");

//We create a variable "dist" which stores the distance moved by the box along X and Y axis during each frame of animation. The higher this distance, the faster will the small box move.
var dist = 2;

//posX and posY are meant to store the x and y coordinates of the top left corner of the small box. 
//dirX indicates if the small box is moving in positive or negative X direction. If the value of dirX is +dist, posX is increasing and if the value of dirX is -dist then posX is decreasing. Initially both dirX and dirY are +dist.
var posX=0, posY=0, dirX=dist, dirY=dist;

//Function move() will move the small box and then set a timer to call itself again.
function move()
{
  
  //Update the position variables by distance stored in dirX and dirY
    posX += dirX;
    posY += dirY;
  
  //If posX is 0, it means small box is touching LEFT edge of the big box.
  //If posX is 1000-100 then the small box is touching the RIGHT edge of the big box.
    if( posX < 0 ) dirX = dist; else if( posX > 1000-100 ) dirX = -dist; 
  
  //If posY is 0, small box is touching TOP edge of the big box.
  //If posY is 550-100 then small box is touching BOTTOM edge of the big box.
    if( posY < 0 ) dirY = dist; else if( posY > 550-100 ) dirY = -dist; 
  
  //Assign the position stored in posX and posY as the actual position of the small box.
    box.style.marginLeft = posX;
    box.style.marginTop = posY;
   
  //To continue animation execute the function move() again after 10 milliseconds.
  setTimeout( move, 10 );  //milliseconds
}

//So far we have only defined what the function move() is. Now we should call move() so that it starts running. Once move() starts running it will never stop because move() is calling itself recursively. The animation will continue forever until the browser window is closed.
move();

</script>

Open the file test.html in Firefox.

That's it.

No comments:

Post a Comment