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:


Field Summary
<private>  Object Data
          
<private>  Object OnEndCB
          
<private>  Object Paused
          
<private>  Object Reverse
          
<private>  Object Running
          
 
Constructor Summary
Timeline()
           
 
Method Summary
 <private>  void InternalOnEnd(d)
          
 {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.

Field Detail

Data

<private> Object Data

OnEndCB

<private> Object OnEndCB

Paused

<private> Object Paused

Reverse

<private> Object Reverse

Running

<private> Object Running

Constructor Detail

Timeline

Timeline()

Method Detail

InternalOnEnd

 <private> void InternalOnEnd(d)

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:15:01 2010