My favorites | Sign in
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
HelloWorld  
Updated Nov 30, 2007 by satoshi....@gmail.com

Hello World

Just like any other language, the programming guide of iAnime.js starts with Hello World.

<html>
<head>
  <script src="ianime025.js" type="text/javascript"></script>
  <script type="text/javascript">
var anime = new iAnime();

function animate()
{
    anime.add( {id:'hello', x:200, duration:1000} );
}
  </script>
</head>
<body>
  <div id='hello' onclick="animate()" 
       style="position:absolute">Hello World</div>
</body>
</html>

The actual page is available here. Click the text ("Hello World") on this page to see the action.

<script src="ianime025.js" type="text/javascript"></script>

will import iAnime.js to this page,

var anime = new iAnime();

will create an instance of the animation engine (it is possible to create multiple instances of iAnime, but there is no benefit in doing so in this version).

When the user clicks the text, animate() function is called and call the add method of iAnime object.

anime.add( {id:'hello', x:200, duration:1000} );

The parameter, which has a set of properties, is an instruction to the animation engine, which means "animate the DOM object identified with 'id' to x-coordinate 200 in 1000 milliseconds". Calling the "add" method of iAnime object tells it to add this instruction to the active animation list, and start the specified animation immediately.

It is probably obvious, but important to mention that the add method is an asynchronous operation. It simply insructs the animation engine to start the animation -- the animation engine does not actually move the DOM object when the add method is called. It immediately returns the control back to the caller, and perform the animation asynchronously.

Comment by jamad2001, Jan 5, 2008

I tried to reuse the same function for the multiple events and it worked. Just wanted to comment this as I thought this info might help some newbies like me. :-P

<html>
<head>
  <script src="ianime028-all.js" type="text/javascript"></script>
  <script type="text/javascript">
var anime = new iAnime();

function animate(i,h,v,d)
{
    anime.add( {id:i, x:h, y:v, duration:d} );
}
  </script>
</head>
<body>
  <div id='hello' onclick="animate('hello',200,300,100)" 
       style="position:absolute">Hello </div>
       
  <div id='world' onclick="animate('world',200,300,500)" 
       style="position:absolute"> ........  World</div>
</body>
</html>

Here is the sample code >> http://ianimejs.googlegroups.com/web/HelloAndWorld.html

Powered by Google Project Hosting