动画引擎 v4

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

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

主列队

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

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

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

fx v4的主列队[fn, fn, fn, fn, fn……]，里面都是动画补帧函数，一个元素在主列队中拥有N个函数

中止动画

$.fn.stop ( clearQueue, jumpToEnd )

//false, false -> 0 中断当前动画，继续下一个动画,
//false, true -> 1 立即跳到最后一帧，继续下一个动画
//true,  false -> 2 //清空该元素的所有动画
//true,  true -> 3 //立即完成该元素的所有动画

v3 上面将成为stopCode，传入animate去处理

v4 将转化为一个处理函数，通过UUID找到对应补间函数,进行处理

0 -> 找到第一个，置换为False函数
1 -〉找到第一个，添加goToEnd属性
2 -> 找到所有，置换为False函数
3 -〉找到所有，添加goToEnd属性

---

延迟动画

v3 能过animate去处理，机制与v4相仿

v4 让此元素以后添加的补间动画不放进行主列队中去，先放到一个临时列表中储存起来，然后通过setTimeout(fn,ms) 中的fn来concat它们到主列队

---

核心算法

    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/