AnimeJ: a Javascript animation library

Class Timeline

Object
   |
   +--Timeline

class Timeline


The timeline is the main interface to access the services of the animation library. It features the classic interface to timeline in which tasks are scheduled at a given time relative to the start of the execution. The SetAt method is meant for this purpose, and an AnimeJTask should be provided. Usually the task is generated by one of the functions in the AnimeJInterp class.
In the following example we have a text box that can be collapsed to left and vice versa. This is the complete source code to show how expressive the library is:

 <html>
 <head>
 <title>Auto-hide text box</title>
 <script type="text/javascript" src="..\..\src\AnimeJ.js"></script>
 <script>
 function transition(btn) {
   var txt = btn.parentNode.childNodes[0];
   var t = new Timeline();
   if (txt.style.display == 'none') {
     txt.style.display = 'inline';
     t.SetAt(0, AnimeJInterp.px(1000, 30, txt.style, 'width', 0, 120));
     t.SetAt(0, AnimeJInterp.alpha(1000, 30, txt.style, 0.0, 1.0));
     t.OnEnd = function () { btn.innerHTML = '&lt;&lt;'; };
   } else {
     t.SetAt(0, AnimeJInterp.px(1000, 30, txt.style, 'width', 120, 0));
     t.SetAt(0, AnimeJInterp.alpha(1000, 30, txt.style, 1.0, 0.0));
     t.OnEnd = function (d) { btn.innerHTML = '&gt;&gt;'; txt.style.display = 'none'; };
   }
   t.Run();
 }
 </script>
 </head>
 <body>
   <span>
     <input type="text" width="120px"></input>
     <span style="cursor: pointer; color: Blue" onclick="transition(this)">&lt;&lt;</span>
   </span>
 </body>
 </html>
 
Note that the transition function simply prepares a timeline object t with a pixel interpolation that changes the width property of the text box from 120 to 0 and vice versa. We also use fading by changing the alpha during transition. Since the two transitions start at time 0 they run concurrently. The OnEnd callback is used to update the text close to the text box.
Defined in AnimeJ.js

See:


Constructor Summary
Timeline()
           
 
Method Summary
 {bool} IsPaused()
           Tells wether the timeline is paused or not.
 {bool} IsRunning()
           Check if the timeline is running.
 void Pause()
           Pauses the execution of the current timeline.
 void Resume()
           Resumes the execution of a paused timeline.
 void Run(reverse)
           Executes the timeline.
 void SetAt(<int> timems, <AnimeJInterpolatedTask> task)
           Schedule a task for execution at a given time from the start of the timeline.
 void Stop()
           Stops the execution of the timeline by removing all the tasks from the scheduler.

Constructor Detail

Timeline

Timeline()

Method Detail

IsPaused

{bool} IsPaused()

IsRunning

{bool} IsRunning()

Pause

void Pause()

Resume

void Resume()

Run

void Run(reverse)

SetAt

void SetAt(<int> timems, <AnimeJInterpolatedTask> task)

Stop

void Stop()

AnimeJ: a Javascript animation library

Documentation generated by JSDoc on Thu Apr 15 11:14:59 2010