Animation Using JavaScript

We can create animations also using JavaScript. It is a rich language to program an animation. In the below given two programs an image is flipped with angular rotations. We have used cos() & sin functions of Math Object.There are few examples of animation given below.

Example:

<html>

<head><title>Animation</title>

</head>

<body background=”pic.jpg” onload=”setInterval(‘ff()’,10)”>

<img name= “im1″ id =”m1″ src=”pic.jpg” width=200 height=200 style=”position:absolute;left:100;top:300;width:100;height:100;”>

<img name =”im2″ id =”m2″ border=3 src=”pic.jpg” width=200 height=200 style=”position:absolute;left:520;top:320;width:15;height:15;”>

<script>

var angle=0

var angle2=50

var a=document.all.m1.style;

var b =document.all.m2.style;

function ff()

{

if(angle<581)

{

angle++

}

else

{

angle=0

}

if (a.pixelLeft<=700 && a.pixelTop<500)

{

a.pixelLeft=angle+Math.cos(angle)

a.pixelTop=angle+Math.sin(angle)

}

else

{

a.pixelLeft=10

a.pixelTop=50

}

pp()

}

function pp()

{

if (b.pixelLeft<600 && b.pixelLeft>0)

{

b.pixelLeft=angle2+Math.sin(angle)

b.pixelTop=angle2+Math.cos(angle2)

}

</script>

</body>

</html>

Click here to view the result of this program on browser

Example:

<html>

<head>

<script language=”JavaScript”>

var x,y;

y=x=0;

function ff()

{

var t=document.all.m1.style;

if(x<250)

{

t.pixelTop=(240-(x/2))-(t.pixelTop/4);

t.pixelLeft=(320-(y/2))-(t.pixelLeft/4);

t.width=x;

t.height=y;

x++;

y++;

}

else

{

x=x-15;

y=y-15;

}

</script>

</head>

<body bgcolor=”gray” onLoad=”setInterval(‘ff();’,1)”>

<img id=”m1″ src=”pic.jpg” style=”position:absolute;width:100;height:100;”>

</body>

</html>