动画引擎 v4

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

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

主列队

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

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

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

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

中止动画

$.fn.stop ( clearQueue, jumpToEnd )

    //如果clearQueue为true，是否清空列队
    //如果jumpToEnd为true，是否跳到此动画最后一帧
    $.fn.stop = function( clearQueue, jumpToEnd ){
        clearQueue = clearQueue ? "1" : ""
        jumpToEnd = jumpToEnd ? "1" : "0"
        var stopCode = parseInt( clearQueue+jumpToEnd,2 );//返回0 1 2 3
        return this.each(function(node){
            var linked = $._data( node,"fx");
            if(linked && linked.run){
                linked.stopCode = stopCode;
            }
        });
    }
//animate相关处理stopCode的逻辑
                switch(linked.stopCode){//如果此时调用了stop方法
                    case 0:
                        fx.render = $.noop;//中断当前动画，继续下一个动画
                        break;
                    case 1:
                        fx.gotoEnd = true;//立即跳到最后一帧，继续下一个动画
                        break;
                    case 2:
                        linked.positive  = linked.negative = [];//清空该元素的所有动画
                        break;
                    case 3:
                        for(var ii=0, _fx; _fx= linked.positive[ii++]; ){
                            _fx.gotoEnd = true;//立即完成该元素的所有动画
                        }
                        break;
                }
                delete linked.stopCode;
//v4
//如果clearQueue为true，是否清空列队
//如果jumpToEnd为true，是否跳到此动画最后一帧
$.fn.stop = function( clearQueue, jumpToEnd ){
var array = heartbeat.queue;
return this.each(function(node){
for(var i = 0, fx; fx = array[i++];){
if(fx.node === node){
if(jumpToEnd){//跑到最后一帧再移除
fx.gotoEnd = true;
}else{
fx.node = null;
}
if(!clearQueue){//
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
    $.fn.delay = function(ms){
        return this.each(function(node){
            var uuid = $.data(node, "@uuid");
            setTimeout(function(){
                var array = delays[uuid] || []
                heartbeat.queue.apply(heartbeat.queue, array);
                delete delays[uuid];
            },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);

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/