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 = '<<'; };
} 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.
Defined in AnimeJ.js
See:
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.
|
Data
<private> Object Data
OnEndCB
<private> Object OnEndCB
Paused
<private> Object Paused
Reverse
<private> Object Reverse
Running
<private> Object Running
Timeline
Timeline()
InternalOnEnd
<private> void InternalOnEnd(d)
IsPaused
{bool} IsPaused()
Tells wether the timeline is paused or not.
IsRunning
{bool} IsRunning()
Check if the timeline is running.
Note that this will return true even if the timeline is paused. Use IsPaused()
to discriminate the actual status.
Pause
void Pause()
Pauses the execution of the current timeline. It can be resumed later on by invoking
the Resume() method.
Resume
void Resume()
Resumes the execution of a paused timeline.
Throws:- An exception is raised if the timeline is not paused.
Run
void Run(reverse)
Parameters:
If
- true interpolators run reversed.
SetAt
void SetAt(<int> timems, <AnimeJInterpolatedTask> task)
Schedule a task for execution at a given time from the start of the timeline.
Parameters:
timems
- Milliseconds to be elapsed since the beginning of execution before executing the task anim.
task
- Task to be executed after timems elapsed.
Stop
void Stop()
Stops the execution of the timeline by removing all the tasks from the scheduler.
The timeline should be started by invoking Run().
Documentation generated by
JSDoc on Thu Apr 15 11:15:01 2010