Question

我开始在JS中编写一个简单的动画类，它使用Zepto.js动画功能，但增加了类似时间线的功能。

时间轴本身是一个简单的数组，在调用play（）函数时执行嵌入其中的函数：

play : function(callback){

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

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

        }

        if(callback){
            callback();
        }

    }

setTimeout直接进入动画：

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


}

基本上，时间轴只运行setTimeout-ed函数，这些函数放在它的缓冲区数组中。

这种方法（几乎）与WebKit动画一样有效，但在进行图像序列时会遇到一些问题（使用setInterval动画更改图像的src）。由于JS定时器不能保证在指定的时间内执行，有时动画运行得很晚，可能是因为它们内部嵌入了setInterval。

关于如何解决这个问题的任何想法？我知道将所有动画嵌入到彼此内部的回调可以解决很多问题，但我真的不知道如何从时间轴循环内部做到这一点。而且，如果我以直接方式调用所有函数（不使用时间轴），它很快就会成为一个难以理解的回调混乱。

供参考，我的动画师类的序列功能：

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

    }

}

此外，使用此类创建的动画示例：

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();

作为补充说明，我的目的是在AS3中创建类似于GreenSock的东西，如果这有帮助的话。

感谢。

Answer 1

准确的setInterval可以通过补偿执行每次迭代所需的时间来模拟，也许我写的这个要点可以帮助你：

https://gist.github.com/1185904

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

1 个答案: