7-5 动画接口

jQuery 动画其实原理上本身是不复杂的。量变产生质变，参杂了大量的设计技巧，同时通过扩展大量的便捷方式加大了逻辑上的难度，我们这章深入的认识下 jQuery 的 API 的具体的含义以及实现上的一些细节。

jQuery 动画是通过 animate 这个 API 设置执行的，其内部也是按照每一个 animate 的划分封装了各自动画组的行为，包括数据过滤、缓动公式、一些动画默认参数的设置、元素状态的调整、事件的处理通知机制、执行等等，换句话说，我们可以把 animate 看作一个对象，对象封装自己的一系列属性与方法，jQuery 可以支持连续动画，那么 animate 与 animate 之间的切换就是通过队列 queue，这个之前就已经详细的解释过了。

动画的参数

jQuery的内部的方法都是针对 API 的处理范围设计的，我们看看 Animation 方法的支持情况：

.animate( properties [, duration ] [, easing ] [, complete ] )
.animate( properties, options )

• 区别就与第二组数据的传递，options 是支持对象传参
• properties 参数就是写一个 CSS 属性和值的对象，动画都是涉及变化的，那么什么值才能变化?
• 理论上来说有数值的属性都是可以变化的，width, height 或者 left 可以执行动画，但是 background-color 不能，但是也不是绝对的，主要看数据的解析度，可以用插件支持
• 除了样式属性， 一些非样式的属性，如 scrollTop 和 scrollLeft，以及自定义属性，也可应用于动画
• 除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏。为了使用 jQuery 内置的切换状态跟踪，'toggle'关键字必须在动画开始前给定属性值

简单的来说，就是把一对的参数丢到 animate 方法里面，然后 animate 就开始执行你参数规定的动画了，那么动画每执一次就会通过回调通知告诉开发者，具体有 complete/done/fail/always/step 接口等。

理解定义(代码参考右边)

book.animate({
    opacity: 0.25,
    left: '50',
    height: 'toggle'
}, {
    duration :1000,
    specialEasing: {
        height: 'linear'
    },
    step: function(now, fx) {
        console.log('step')
    },
    progress:function(){
        console.log('progress')
    },
    complete:function(){
        console.log('动画完成')
    }
})

首先，动画的参数都是最终值，都是相对数据。

如上 div 元素的起始：

• opacity： 是 1，那么通过动画改成 0.25
• left： 是 500，那么通过动画改成 50
• height： 为'toggle' 意味着如果是隐藏与显示的自动切换
• step：是针对 opacity/left/height 各自动画，每次改变通知三次
• progress： 是把 opacity/left/height 看成一组了，每次改变只通知一次

初步理解 API 的一些设置后，我们下一节研究下动画的变换算法。