Timeline //JavaScript Repository

Description

Simulates the Adobe Flash timeline. You define the amount of frames, the speed in fps (frames per second) and, at each frame passage an event is called, useful for animations.
Created: 2008.03.14

Code (Download)

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/classes/timeline [rev. #0]

TimeLine = function(fps, f){
    this.fps = fps, this.frames = f;
};
with({o: TimeLine, $: TimeLine.prototype}){
    o.timers = [];
    $.running = !!($.current = +(o.timer = $.time = null));
    o.run = function(){
        var o = this;
        o.timer || (o.timer = setInterval(function(){
            for(var h, d = +(new Date), t = o.timers, i = t.length; i--;){
                (!t[i].running || ((d - t[i].time) / (1e3 / t[i].fps) > t[i].current + 1 &&
                t[i].onframe(++t[i].current), t[i].current >= t[i].frames)) &&
                (h = t.splice(i, 1)[0], h.stop(1));
            }
        }, 1));
    };
    $.start = function(c){
        var o = this, t = TimeLine;
        if(o.running) return;
        o.running = true, o.current = c || 0;
        o.time = new Date, o.onstart && o.onstart();
        if(!o.onframe || o.frames <= 0 || o.fps <= 0)
            return o.stop(1);
        t.timers.push(this), t.run();
    };
    $.stop = function(){
        var o = this;
        o.running = false;
        if(!TimeLine.timers.length)
            TimeLine.timer = clearInterval(TimeLine.timer), null;
        arguments.length && o.onstop && o.onstop();
    };
}

Example (Example)

<div id="box" style="position: absolute; top: 100px; background: #efe; width: 100px; height: 100px">25 fps</div>
<div id="box2" style="position: absolute; top: 300px; background: #ff9; width: 100px; height: 100px">12 fps</div>

<strong>TimeLine working together with the ease in quad function.</strong><br />

<script type="text/javascript">
//<![CDATA[

Math.ease = function (t, b, c, d) {
    if ((t /= d / 2) < 1)
        return c / 2 * t * t + b;
    return -c / 2 * (--t * (t - 2) - 1) + b;
};

var o = new TimeLine(25, 50), d = document, b = d.getElementById("box");
o.onframe = function(){
    b.style.left = Math.ease(this.current, 0, 400, 30) + "px";
};
o.onstart = function(){
    d.body.appendChild(d.createTextNode("Started"));
};
o.onstop = function(){
    d.body.appendChild(d.createTextNode(" - Finished (" + (((new Date) - this.time)) + " msec)"))
    d.body.appendChild(d.createElement("br"));
    this.start();
};
o.start();


var o2 = new TimeLine(12, 50), b2 = d.getElementById("box2");
o2.onframe = function(){
    b2.style.left = Math.ease(this.current, 0, 400, 30) + "px";
};
o2.onstop = function(){
    this.start();
};
o2.start();

//]]>
</script>

Help

Constructor

TimeLine(fps: Number, frames: Number)
Generates an instance of TimeLine.
fps
animation velocity in fps
frames
amount of frames

Properties

TimeLine.current: Integer
Keep the current frame.
TimeLine.frames: Integer
Amount of frames.
TimeLine.fps: Integer
Velocity in frames per second.
TimeLine.running: Boolean
Indicates if the animation is running.
TimeLine.time: Date
Keeps the date of when the animation started.

Methods

TimeLine.start([current: Number = 0]): void
Starts the animation.
current
defines the initial frame, the default is 0
TimeLine.stop(void): void
Stops the animation.

Events

TimeLine.onstart: function(): void
Called when starting the animation.
TimeLine.onframe: function(): void
Called for each animation frame.
TimeLine.onstop: function(): void
Called when stopping the animation.

Rank (Votes: 27)

4.30