|
AnimeJ: a Javascript animation library | ||||||||
PREV CLASS NEXT CLASS | FRAMES NO FRAMES | ||||||||
SUMMARY: FIELD | CONSTR | METHOD | DETAIL: FIELD | CONSTR | METHOD |
Object | +--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 = '<<'; }; } 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 = '>>'; 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)"><<</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.
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()
Method Detail |
{bool} IsPaused()
{bool} IsRunning()
void Pause()
void Resume()
void Run(reverse)
If
- true interpolators run reversed.
void SetAt(<int> timems, <AnimeJInterpolatedTask> task)
timems
- Milliseconds to be elapsed since the beginning of execution before executing the task anim.
task
- Task to be executed after timems elapsed.
void Stop()
|
AnimeJ: a Javascript animation library | ||||||||
PREV CLASS NEXT CLASS | FRAMES NO FRAMES | ||||||||
SUMMARY: FIELD | CONSTR | METHOD | DETAIL: FIELD | CONSTR | METHOD |