时光倒流程序设计-AlloyTicker

熵与负熵

熵遵循熵增原理，即无序非热能与热能之间的转换具有方向性。薛定谔说过：生命本质在于负熵。熵代表的是无序，负熵就是熵的对立，而负熵表示的则是有序。汲取负熵（米饭、面包、牛奶、鸡蛋），可以简单的理解为从外界吸收了物质或者能量之后，转化成负熵流，使系统的熵降低，人体变得更加有序。

那么一直吃饭为何还衰老？一日吃6餐行不行？答案是肯定不行。

负熵流和熵增伴从出生到死亡一直在对抗，随着时间流逝，负熵流慢慢对抗不过熵增，人体组织体系结构越来越无序。越无序就越难以抵抗疾病，所以通常死亡不是熵增到无序而老死，而是熵值较大时，难以抵抗其他疾病而死亡。最终归于尘土、洒向大海（更加无序了）。

所以：熵增加的方向就是时间的方向，时间不可逆，回到过去是不可能的，才有了AlloyTicker-让时光倒流成为可能....

Github: https://github.com/AlloyTeam/AlloyTicker

Demo: http://alloyteam.github.io/AlloyTicker/

传统的动画和运动

涉及到动画和运动才能和时间关联起来。这里做下分类：

1.精灵图动画:如利用精灵图实现人物跑、走等

2.积分运动：如粒子系统、子弹飞行等

3.缓动：如骨骼动画、弹出层特效、金币拾取等其他拥有起点、终点、时间和缓动函数的运动

精灵图动画

如上面的精灵图动画，当需要求出当前播放哪一帧的时候，通常按照下面这种方式计算：

var index = Math.floor(dt / interval) % length;

其中index为当前求出的结果。

dt为过去了多长时间

interval每一帧的间隔时间

length为总共的帧数

精灵图动画可逆设计

要实现精灵图动画可逆，必须对dt进行动态计算。dt怎么计算？

dt = 当前时间 - 开始时间

即：

var dt = currentTime - startTime;
var index = Math.floor(dt / interval) % length;

只需要把currentTime和startTime保存好方便sprite对象使用即可实现可逆。

当然这里要做边界处理，即dt小于0，代表播放时间还未开始，index是没有对应的值。

积分运动

传统的做法：

this.vx += this.ax * dt;
this.vy += this.ay * dt;
this.x += this.vx* dt;
this.y += this.vy * dt;

即：

速度是加速度在时间上的累加

位移是速度在时间上的累加

积分运动可逆设计

问题建模：根据起点位置（startX startY）、起始速度(vx vy)、加速度(ax ay)、开始时间(startTime)、当前时间(currentTime)求当前位置(x y)。

var dt = this.currentTime - this.startTime;
var h_sqDt = dt * dt/2;
this.x = this.startX + this.vx * dt + this.ax * h_sqDt;
this.y = this.startY + this.vy * dt + this.ay * h_sqDt;

公式：

缓动

this.dv = this.endValue - this.startVaule ;
var result = this.startVaule + this.dv * this.ease(dt / this.time);

其中result为当前求出的结果。

endValue为最终要运动到的结果

startVaule为开始运动的状态

ease为缓动函数

time为总时间

缓动可逆设计

缓动天生就是支持可逆设计。只需计算好dt便可。

var dt = currentTime - startTime;

当然还要处理一下边界情况，因为时间的流动性，dt是可能大于0或者dt大于传入的总时间this.time。

当dt小于0，即result等于this.startVaule

当dt大于总时间，即result等于this.endVaule

精灵图动画+积分运动

如上面的超级玛丽，不仅需要播放精灵图动画，还需要向右的积分运动。所以需要同时顾及两种状态：

var dt = this.currentTime - this.startTime;
//计算关键帧索引的结果
if (dt < 0) {
    this.index = -1;
} else {
    this.index = Math.floor(dt / this.interval) % this.length;
}
//计算积分运动的结果
this.x = this.startX + this.vx * dt;
this.y = this.startY + this.vy * dt;

AlloyTicker

是时候抽象出一个时间机器的-AlloyTicker。

var AlloyTicker = function(){
    this.interval= null;
    this.intervalTime= 16;
    this.tickIntervalTime = 16;
    this.currentTime = 0;
    this.clockwise = true;
    this.ticks=[];
    this.isPause = false;
    this.isStop = false;
}

AlloyTicker.prototype = {
	//时间开始
    start: function () {
        this.interval = setInterval(function () {
            if(!this.isPause){
                this.currentTime += (this.clockwise ? this.intervalTime : -1 * this.intervalTime);
                if(this.currentTime<0)this.currentTime=0;
                this.tick();
            }
    	}.bind(this), this.tickIntervalTime);
    },
    tick: function () {},
    //时光倒流
    back: function () {
    	this.clockwise = false;
    },
    forward: function () {},
    goto: function(time){},
    pause:function(){},
    play :function(){},
    stop:function() {},
    scale:function(value){}
}

因为：

1.从逻辑层面上currentTime不属于动画或运动对象的属性，都属于AlloyTicker时间机器的属性。

2.统一时间管理（倒流(back)、暂停(pause)、加速减速(scale)、时间跳转(goto)...）

3.所有对象的动画和运动都跟AlloyTicker挂钩，AlloyTicker时间状态的变更会影响到所有挂钩的对象

Github: https://github.com/AlloyTeam/AlloyTicker

Demo: http://alloyteam.github.io/AlloyTicker/