Timeline //Repositório JavaScript

Descrição

Simula a linha de tempo do Adobe Flash. Você define a quantidade de frames, velocidade em fps (frames por segundo) e, a cada passagem de frame é chamado um evento, útil para animações.
Criado: 2008.03.14

Código (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();
    };
}

Exemplo (Exemplo)

<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>

Ajuda

Construtor

TimeLine(fps: Number, frames: Number)

Gera uma instância de TimeLine.

fps: velocidade da animação em fps
frames: quantidade de frames

Propriedades

TimeLine.current: Integer: Mantém o frame atual.
TimeLine.frames: Integer: Quantidade total de frames.
TimeLine.fps: Integer: Velocidade em frames por segundo.
TimeLine.running: Boolean: Indica se a animação está sendo executada.
TimeLine.time: Date: Guarda a data em que foi iniciada animação.

Métodos

TimeLine.start([current: Number = 0]): void

Inicia a animação.

current: define o frame inicial, o default é 0

TimeLine.stop(void): void

Pára a animação.

Eventos

TimeLine.onstart: function(): void: Chamado ao iniciar a animação.
TimeLine.onframe: function(): void: Chamado para cada frame da animação.
TimeLine.onstop: function(): void: Chamado ao interromper a animação.

JSFromHell.com