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
Reference_Top  
API Reference (top): iAnime constructor and methods
Featured
Updated Dec 3, 2007 by satoshi....@gmail.com

API Reference

Constructor

new iAnime()

To use iAnime.js, you must create an instance of iAnime object, an animation engine. Although it is possible create multiple instances of animation engines and use them independently, there is no advantage in doing so in this version (future version may provide benefit in multiple animation engines).

Therefore, it is strongly recommended to create just a single instance of iAnime object in your main HTML file (not in a library, which will lead to accidental multiple creations), store it in a global variable (recommended name is "anime") just like this.

var anime = new iAnime(); 

The rest of sample code in this API reference assumes this recommended coding style.

Methods

iAnime.js has three methods - add, addSequence and pause.

add

void add(animation instruction)

The add method tells the animation engine to immediately start playing the animation specified by the animation instruction (or instruction). When multiple instructions were added at the same time, the animation engine will play those animations concurrently, not sequencially.

Sample code:

// Move the DOM object 'foo' to (100,100) in 500ms
anime.add({id:'foo', x:100, y:100, duration:500});
// Move the DOM object 'bar' to (200,200) in 500ms (concurrently with above)
anime.add({id:'bar', x:200, y:200, duration:500});

addSequence

void addSequence(array of animation instructions)

The addSqeuence method tells the animation engine to process the sequence of animation instructions, which must be an array. An array element must be either an animation instruction or another sequence of instructions (nested sequence). If an element is an instruction, the engine plays the animation sequencially. If an element is another sequence of instructions, it plays that sequence concurrently.

Sample code:

// Move the DOM object 'foo' to (100,100) in 500ms, 
// then move the DOM object 'bar' to (200,200) in 500ms
anime.addSequence([
    {id:'foo', x:100, y:100, duration:500},
    {id:'bar', x:200, y:200, duration:500}
]);

Nested sequence allows the "branching" of sequence. While animation instructions withing the nested sequence will be played sequencially, the nested sequence itself starts concurrently with the rest of sequence.

Here are some exaples (each capital letter represents an animation instruction).

// Plays A, B and C sequencially
anime.addSequence([A, B, C, D]);

// Plays A, B and C sequencially, but also start playing P and Q sequencially 
// after A, concurrently with B, C and D. 
anime.addSequence([A, [P, Q], B, C, D]);

// Same as above
anime.addSequence([A, [B, C, D], P, Q]);

pause

void pause(boolean)

The pause method pause/unpause the internal clock of the animation engine. If you want to add multiple instructions in sychronized manner, it is recommended to surround it with pause(true) and pause(false) like this:

// Plays A, B and C concurrently with the exact same starting time
anime.pause(true);
anime.add(A);  
anime.add(B);  
anime.add(C);  
anime.pause(false);

When you add multiple instructions while the engine is paused, the same "start time" will be assigned to all of them, allowing them to animation in precise synchronized manner.

Powered by Google Project Hosting