jQuery 動(dòng)畫(huà)其實(shí)原理上本身是不復(fù)雜的。量變產(chǎn)生質(zhì)變，參雜了大量的設(shè)計(jì)技巧，同時(shí)通過(guò)擴(kuò)展大量的便捷方式加大了邏輯上的難度，我們這章深入的認(rèn)識(shí)下 jQuery 的 API 的具體的含義以及實(shí)現(xiàn)上的一些細(xì)節(jié)。

jQuery 動(dòng)畫(huà)是通過(guò) animate 這個(gè) API 設(shè)置執(zhí)行的，其內(nèi)部也是按照每一個(gè) animate 的劃分封裝了各自動(dòng)畫(huà)組的行為，包括數(shù)據(jù)過(guò)濾、緩動(dòng)公式、一些動(dòng)畫(huà)默認(rèn)參數(shù)的設(shè)置、元素狀態(tài)的調(diào)整、事件的處理通知機(jī)制、執(zhí)行等等，換句話(huà)說(shuō)，我們可以把 animate 看作一個(gè)對(duì)象，對(duì)象封裝自己的一系列屬性與方法，jQuery 可以支持連續(xù)動(dòng)畫(huà)，那么 animate 與 animate 之間的切換就是通過(guò)隊(duì)列 queue，這個(gè)之前就已經(jīng)詳細(xì)的解釋過(guò)了。

動(dòng)畫(huà)的參數(shù)

jQuery的內(nèi)部的方法都是針對(duì) API 的處理范圍設(shè)計(jì)的，我們看看 Animation 方法的支持情況：

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

• 區(qū)別就與第二組數(shù)據(jù)的傳遞，options 是支持對(duì)象傳參
• properties 參數(shù)就是寫(xiě)一個(gè) CSS 屬性和值的對(duì)象，動(dòng)畫(huà)都是涉及變化的，那么什么值才能變化?
• 理論上來(lái)說(shuō)有數(shù)值的屬性都是可以變化的，width, height 或者 left 可以執(zhí)行動(dòng)畫(huà)，但是 background-color 不能，但是也不是絕對(duì)的，主要看數(shù)據(jù)的解析度，可以用插件支持
• 除了樣式屬性， 一些非樣式的屬性，如 scrollTop 和 scrollLeft，以及自定義屬性，也可應(yīng)用于動(dòng)畫(huà)
• 除了定義數(shù)值，每個(gè)屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動(dòng)畫(huà)用來(lái)控制元素的顯示或隱藏。為了使用 jQuery 內(nèi)置的切換狀態(tài)跟蹤，'toggle'關(guān)鍵字必須在動(dòng)畫(huà)開(kāi)始前給定屬性值

簡(jiǎn)單的來(lái)說(shuō)，就是把一對(duì)的參數(shù)丟到 animate 方法里面，然后 animate 就開(kāi)始執(zhí)行你參數(shù)規(guī)定的動(dòng)畫(huà)了，那么動(dòng)畫(huà)每執(zhí)一次就會(huì)通過(guò)回調(diào)通知告訴開(kāi)發(fā)者，具體有 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('動(dòng)畫(huà)完成')
    }
})

首先，動(dòng)畫(huà)的參數(shù)都是最終值，都是相對(duì)數(shù)據(jù)。

如上 div 元素的起始：

• opacity： 是 1，那么通過(guò)動(dòng)畫(huà)改成 0.25
• left： 是 500，那么通過(guò)動(dòng)畫(huà)改成 50
• height： 為'toggle' 意味著如果是隱藏與顯示的自動(dòng)切換
• step：是針對(duì) opacity/left/height 各自動(dòng)畫(huà)，每次改變通知三次
• progress： 是把 opacity/left/height 看成一組了，每次改變只通知一次

初步理解 API 的一些設(shè)置后，我們下一節(jié)研究下動(dòng)畫(huà)的變換算法。