动画引擎 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对属性进行还原。

变形效果：

               var change = 90, start = new Date;
                var style = document.getElementById("first").style
                setInterval(function(){
                    var per = (new Date - start)/60
                    style.MozTransform = "rotate(" + (change * per).toFixed(2) + "deg)"
                },4)

       $.require("ready,css",function(){ 
              $("#first").css("transform","skew(30deg) scale(1.5,1.5) rotate(40deg) translate(10px, 20px)")
              $.log($("#first").css("transform"))
              //FF12  matrix(1.70574, 0.964181, -0.300767, 1.14907, 11.042px, 32.6231px)
              //IE9: matrix(1.70574, 0.964181, -0.300768, 1.14907, 11.042, 32.6231)
              //IE8: matrix(1.7057370639,0.9641814145298089,-0.300767,1.149066664678467,11.042021,32.623147) 
              //chrome20: matrix(1.7057370, 0.96418141, -0.30076746, 1.1490666646, 11.042021311831455, 32.62314743)
        })

https://github.com/sshwsfc/apf/blob/master/core/lib/tween.js 一个强大的操作'@-webkit-keyframes‘进行动画的类库 https://github.com/joelambert/morf/tree/master/js

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/