在动画算法与设计的小节中我都把动画一些相关的东西单独提出来分析了，其实 jQuery 的动画的原理就是这样的，这一节我们把设计与算法融合在一起来实现一个伪 jQuery 的动画模块。

在 jQuery 的设计中 ready、ajax、动画都是支持 Promise 这个概念的，也就是通过 Deferred 提供了一个抽象的非阻塞的解决方案，它创建一个 promise 对象，其目的是在未来某个时间点返回一个响应，对应的也就是 done、fail、progress、complete、always等方法，所以在第一部分理解 Deferred 对象是非常重要的，这样才能读懂这类设计。

具体的代码我们可以如右图所示，这里我们开始解释下其设计的目的。

book.animate({
    left: '500'
}, {
    duration: 2000
})

就这个动画而言，我们要涉及几个问题，left:500 其实是最终的坐标值。

那么完成这个 left 动画我们至少需要：

• 起点位置
• 终点位置
• 运动的时间
• 每次定时器改变的坐标值
• 单位的换算(px、em、%)

每一种属性其实都是有各自的变换的一个算法，包括计算开始值、变化值、时间等等，所以我们必须给每一个变换的属性都进行一个包装，用来封装各自的相关数据，那么我们其实可以用一个类来构造跟属性变化相关的一些信息，如 Tween 类。

通过一个 Tween 类构造出来的缓动对象，其实就是针对每一个属性的封装对象，这样我们只需要设计一个定时器，在指定的时间内调用 Tween 生成的这些对象就可以了，Tween 内部控制着各自属性的状态改变。

具体右边的实现代码涉及了如下几个部分了：

1. Animation 函数，入口函数用来做一些参数的初始化工作，整个动画的开始调度
2. animation 对象就是实际的动画对象了，通过 Animation 函数创建，这个对象上实现了所有属性与方法
3. new Tween() 通过 Tween 创建每一个属性对象相关的数据
4. animation.tweens 保存了每一个属性对象的容器
5. Animation.fx 就是具体开始动画执行的调用的一个调度对象了
6. 定时器都是执行一个回调函数的，tick 就是定时器执行的回调，在 tick 函数中通过计算出变化数据，然后通过循环 animation.tweens 中的每一个动画属性对象，来实现改变

其实动画的整个设计就是这么简单的，代码的复杂是因为还兼容了各种不同情况的处理，比如实现 deferred 机制，针对宽高变化的 overflow 处理，针对 display 为 inline 情况下的处理，那么这些都是一些预处理的机制，在对应的 defaultPrefilter 函数中就能找到，我们没有必要是单独实现了。

其实动画的设计，我们可以学到一个很重要的一点: 封装变化，把每一个属性变化都独立封装一个对象，让其自己管理与控制。