JavaScript时间轴动画（setTimeout准确性问题）

Question

I began writing a simple animation class in JS, which utilizes Zepto.js animation capabilities but adds timeline-like capability to it.

The timeline itself is a simple array, that executes functions embedded in it when it's play() function is called:

play : function(callback){

        for(var i=0; i<Animator.timeline.buffer.length; i++){

            Animator.timeline.buffer[i].animation();

        }

        if(callback){
            callback();
        }

    }

The setTimeout goes directly in the animation:

alpha : function(parameters, callback, delay){

    var target = parameters.target;
    var duration = parameters.duration;
    var easing = parameters.easing;
    var value = parameters.value;

    if(delay){
        setTimeout(function(){run();},delay*1000);
    } else {
        run();
    }

    function run(){
        $(target).anim({opacity:value},duration,easing);
        if(callback){
            callback();
        }
    }


}

So basically, the timeline just runs the setTimeout-ed functions which are placed in it's buffer array.

This approach works (almost) as intended with WebKit animations, but i've run into a few problems when doing image sequences (animations using setInterval which change the image's src). As JS timers don't guarantee execution in their appointed time, sometimes animations run late, likely because of the embedded setInterval inside them.

Any ideas on how to solve this? I am aware that embedding all animations as callbacks inside one another would solve much of the issues, but i don't really know how to do that from inside the timeline loop. Also, it would quickly become an unreadable mess of callbacks if I call all functions in a direct manner (without using the timeline).

For reference, the sequence function of my animator class:

sequence : function(parameters, callback, delay){

    var target = parameters.target;
    var path = parameters.path;
    var baseName = parameters.baseName;
    var digits = parameters.digits;
    var extension = parameters.extension;
    var frames = parameters.frames;
    var loop = parameters.loop;

    if(parameters.interval){
        var _interval = parameters.interval
    } else {
        var _interval = 15;
    }


    var currentFrame = 0;
    var imageUrl = '';

    var fileName = baseName;

    for(var i=0; i<=digits; i++){
        fileName+='0';
    }

    if(delay){
        setTimeout(function(){runSequence();},delay*1000);
    } else {
        runSequence();
    }

    function runSequence(){

        var interval = setInterval(function(){

        if(currentFrame >= frames){
            currentFrame = 0;
            if(!loop) {
                clearInterval(interval);
                if(callback){
                    callback();
                }
            }
        } else {
            imageUrl = path+fileName.substring(0, fileName.length-currentFrame.toString().length)+currentFrame+"."+extension;
            $(target).attr('src',imageUrl);
            currentFrame++;
        }

    },_interval);

    }

}

Also, a sample of an animation created by using this class:

Animator.timeline.append(function(){
                Animator.alpha({'target':'#logo', 'value':1, 'duration':1, 'easing':'ease-out' });
            });

            Animator.timeline.append(function(){
                 Animator.sequence({'target':'#sequence', 'path':'images/sequences/index/', 'baseName':'nr1_', 'digits':3, 'extension':'png', 'frames':50},'',1.5);
            });

            Animator.timeline.append(function(){
                Animator.scale({'target':'#text', 'width':.5, 'height':.15, 'duration':1, 'easing':'ease-in-out'},'',3.2);
            });

             Animator.timeline.append(function(){
                Animator.alpha({'target':'#link', 'value':1, 'duration':1,'easing':'ease-out'},'',4.7);
            });

            Animator.timeline.play();

As an additional note, I was aiming to create something similar to GreenSock in AS3, if that helps.

Thanks.

Answer 1

Accurate setInterval can be simulated by compensating for the time it takes to execute every iteration, maybe this gist I wrote can help you:

https://gist.github.com/1185904