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.

JSFromHell.com