ianime.js is an open-source Javascript library that enables interactive animations on web pages. The key design goal of ianime.js is its efficiency - it has to be efficient enough to implement "interactive games" with HTML+Javascript that run efficiently on Apple iPhone.
During the development of ianime.js, I have implemented an iteractive puzzle game, "iFreecell 1.2" to verify that it's efficient enough to run such a game on iPhone. If you have iPhone (or iPod touch), please run this game on it and see ianime.js in action (this game also runs on PC/Mac browsers, of course).
1. Basic
In order to use ianime.js, first you need to import it, of course.
<script src="ianime022.js"></script>
Notice that "022" is the version number (v0.22). Then, you need to create an iAnime object.
var anime = new iAnime();
While it is possible to create multiple iAnime objects, there is no advantage in doing so because single iAnime object is able to run multiple animations concurrently.
An animation can be achieved by calling its "add" method with appropriate parameters. For example,
anime.add( { id:'foo', x:100, y:150, duration:500 } );
will animate the DOM element with id='foo' from the current location to position (100, 150) in 500ms.
Passing "id" is actually a shortcut. If you already have the reference to DOM element, you can just pass it via "element" property. Therefore, the code below has the same effect as the code above.
var obj = document.getElementById('foo');
anime.add( { element:obj, x:100, y:150, duration:500 } );
While the DOM object identification property (either "id" or "element") and "duration" property are "required" parameters, other parameters are optional.
anime.add( { id:'foo', x:100, duration:500 } );
will animate the object horizontally, while
anime.add( { id:'foo', y:150, duration:500 } );
will animate the object vertically. For this reason,
anime.add( { id:'foo', duration:500 } );
is a valid code, although it does nothing (but burning CPU cycle^^). To see the actual example, see ianime1.html, which is the "Hello World" of ianime.js.
2. Concurrency and Synchronization
As I have mentioned above, a single iAnime object is able to animate multiple objects concurrently. In order to achieve it, you just need to call its "add" function mutiple times.
anime.add( { id:'turtle', x:300, duration:5000 } );
anime.add( { id:'rabbit', x:300, duration:1000 } );
anime.add( { id:'cheeta', x:300, duration:250 } );
The code above will animate three DOM objects concurrently.
By the way, while iAnime object maintains a single timer event (setInterval) for efficiency, it maintains different clock for each object. The clock starts when the "add" function is called. Therefore, the start time of each animation above will be slightly different (because of the execution of javascript code).
While it is not an issue if you are animating a few objects concurrently, it will become an issue if you animate a large number of objects. In order to precisely synchronize multiple animations, you need to 'pause' animation while you are adding new animations.
anime.pause(true);
anime.add( { id:'turtle', x:300, duration:5000 } );
anime.add( { id:'rabbit', x:300, duration:1000 } );
anime.add( { id:'cheeta', x:300, duration:250 } );
anime.pause(false);
The pause function will stop the internal clock of iAnime object, so that those animations added while it's paused will be treated as if they are added at the same time.
3. Effect
While the feature described above is simple and easy to use, those animations are not interesting - all straigt-line animaition with constant speed. In order to achieve more interesting effects, such as ease-in/out, and fade-in/out, ianime.js allows developers to extend the capability of ianime.js by providing extensions.
The default extension is ianime-ex.js, which is always distributed along with ianime.js. It offers a standard set of effects - 'easein', 'easeout', 'fadeout', 'fadein' and 'bounce'.
In order to use this standard extension, you need to import ianime-ex.js and ibrowse.js (ibrowse.js is a cross-browser helper library, which ianime-ex.js uses) like this:
<script src="ibrowse010.js"></script>
<script src="ianime022ex.js"></script>
Notice that ibrowse.js has different version numbers, while ianime.js and ianime-ex.js always have the same version number. The effect needs to be speified via 'effect' property. The code below will fade out the DOM object (specified by id='foo') in 500ms.
anime.add( { id:'foo', effect:'fadeout', duration:500 } );
Notice that the name of the effect needs to be specified in string. See ianime2.html and ianime3.html for actual samples (click the "Click me" on ianime3.html multiple times to see what happens).