|
Reference_Top
API Reference (top): iAnime constructor and methods
Featured API ReferenceConstructornew 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. MethodsiAnime.js has three methods - add, addSequence and pause. addvoid 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});addSequencevoid 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]); pausevoid 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. |