jQuery 動畫的原理還是很簡單的，靠定時器不斷的改變元素的屬性，我們模擬下 animate 的大致實現，讓元素執行一個 2 秒的動畫到坐標為 left 50 的區域。
animate({
left: '50',
duration: '2000'
}
按照常規的思路，我們需要 3 個參數：
思路一：等值變化
我們在 animate 內部還需要計算出當然元素的初始化布局的位置（比如 500px），那么我們在 2 秒的時間內需變換成 50px，也就是運行的路勁長就是 500-50 = 450px。
那么算法是不是呼之欲出了？
每毫秒移動的距離： pos = 450/2000 = 0.225px 每毫秒移動： left = 初始位置 (+/-) 每毫秒遞增的距離（pos * 時間）
這樣算法我們放到 setInterval 就會發現錯的一塌糊涂，我們錯在最本質的東西。
JS 是單線程，定時器都是排隊列的，理論上也達不到 1ms 繪制一次 dom
所以每次產生的這個下一次繪制的時間差根本不是一個等比的，所以我們按照線性的等值遞增是有誤的。
思路二：動態計算
setInterval 的調用是不規律的，但是調用的時間是（2秒）是固定的，我們可以在每次調用的時候算法時間差的比值，用這個比值去計算移動的距離就比較準確了。
remaining = Math.max(0, startTime + duration - currentTime),
通過這個公司我們計算出，每次 setInterval 調用的時候，當前時間在總時間中的一個位置。
remainin 結果：
看到沒有，這個值其實很符合定時器的特性，也是一個沒有規律的值，根據這個值，我們可以得出當前位置的一個百分比了：
var remaining = Math.max(0, startTime + options.duration - createTime()) var temp = remaining / options.duration || 0; var percent = 1 - temp;
pecent結果
那么這個移動的距離就很簡單了，我把整個公式就直接列出來了。
function tick(){
//每次變化的時間
var remaining = Math.max(0, startTime + duration - createTime())
var temp = remaining / duration || 0;
var percent = 1 - temp;
//最終每次移動的left距離
var leftPos = (endLeft- startLeft) * percent +startLeft;
}
leftPos 就是每次移動的距離了，基本上比較準確了，事實上 jQuery 內部也就是這么干的，這里 13 代表了動畫每秒運行幀數，默認是13毫秒，屬性值越小，在速度較快的瀏覽器中（例如，Chrome），動畫執行的越流暢，但是會影響程序的性能并且占用更多的 CPU 資源，在新的游覽器中，我們都可以采用 requestAnimationFrame 會更優。
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽