动画引擎 v4

这是一个永不停歇的中央定时器--> setInterval

调用时间视浏览器的种类与版本而定

主列队

要实现AS3式的补帧动画系统，必须只允许用一个定时器来处理所有动画，所有动画都放进一个列队中依次执行。

v4主列队进行平坦化，大大提高性能

fx v3的主列队[ [], [], [], []…… ]，每一个元素只能在主列队中拥有一个数组，不存在一个元素对应两个数组的情况

fx v4的主列队[fx, fx, fx, fx, fx……]，里面都是动画实例，一个元素在主列队中只能对应一共个这样的对象

中止动画

$.fn.stop ( clearQueue, jumpToEnd )

//如果clearQueue为true，是否清空列队
    //如果gotoEnd 为true，是否跳到此动画最后一帧
    $.fn.stop = function( clearQueue, gotoEnd  ){
        clearQueue = clearQueue ? "1" : ""
        gotoEnd  = gotoEnd  ? "1" : "0"
        var stopCode = parseInt( clearQueue+gotoEnd ,2 );//返回0 1 2 3
        var array = heartbeat.queue;
        return this.each(function(node){
            for(var i = 0, fx ; fx = array[i];i++){
                if(fx.node === node){
                    switch(stopCode){//如果此时调用了stop方法
                        case 0:  //中断当前动画，继续下一个动画
                            fx.update = fx.after = fx.frame = $.noop
                            fx.revert && fx.negative.shift();
                            fx.gotoEnd = true;
                            break;
                        case 1://立即跳到最后一帧，继续下一个动画
                            fx.gotoEnd = true;
                            break;
                        case 2://清空该元素的所有动画
                            delete fx.node
                            break;
                        case 3:
                            Array.prototype.unshift.apply( fx.positive,fx.negative.reverse());
                            fx.negative = []; // 清空负向列队
                            for(var j =0; fx = fx.positive[j++]; ){
                                fx.before = fx.after = fx.frame = $.noop
                                fx.gotoEnd = true;//立即完成该元素的所有动画
                            }
                            break;
                    }
                }
            }
        });
    }

---

延迟动画

//v3
    $.fn.delay = function(ms){
        return this.each(function(node){
            var linked = $._data(node,"fx") || $._data( node,"fx",{
                positive:[], //正向列队
                negative:  [], //负向列队
                run: false //
            });
            linked.positive.push(ms);
        });
    }
//v4
    //添加一个ms自动移除的占位空动画
    $.fn.delay = function(ms){
        return this.fx(ms);
    }

---

核心算法

    percent = (new Date() - obj.startTime) / obj.duration;//接照时间求得进度值
    change = obj.change != null ? parseFloat(obj.change) : (to - from);//求取变化量
    val = obj.from + obj.change * obj.easing(percent);//求得当前的CSS值或属性值(scrollTop或canvas中的像素单位)
    val = val.toFixed(6);

复合动画的平滑过渡

复合动画的值为show, hide, toggle ，当一个动画hide后再进行show, slideDown等表示“显示出来”的动画，需要做些过渡工作。具体如下：

• fxBuilder函数中,设置method与orig属性,并在值为show时还原。
• animate函数，在第一帧，fxBuilder调用后，before回调未调用前，调用$.method代表的方法。
• animate函数，在最后一帧，after回调未调用前，利用fx.orig对属性进行还原。

https://github.com/sshwsfc/apf/blob/master/core/lib/tween.js 考虑使用新的API

http://www.themaninblue.com/experiment/Cubescape/new.php Cubescape用于绘制三维图形。在三维空间创建各色小方块，开动你的大脑，随心所遇的创造一个属于你的盒子世界。

http://westciv.com/tools/transforms/index.html http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/

Interrupting/stop a CSS3 transition on the actual position/state http://jsfiddle.net/T5LVX/1/