緩動動畫的原理就是讓盒子移動的速度開始快到結束慢的步驟,有一種視覺舒服的作用.
完整版的函式封裝如下:

    // 思路:
    // 1. 讓盒子每次移動的距離慢慢變小, 速度就會慢慢落下來
    // 2. 核心演算法: (目標值 - 現在的位置) /10 作為每次移動的距離  步長
    // 3. 停止的條件, 讓當前盒子位置等於目標位置就停止計時器
    function animate(obj,target,callback){
        
        // 先清除以前的定時器, 只保留當前的一個定時器執行
        clearInterval(obj.timer)
        obj.timer = setInterval(function(){
            // 步長值寫到定時器裡面
            // 把我們的步長值改為整數 不要出現小數的問題
            var step = (target - obj.offsetLeft) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
            if(obj.offsetLeft == target){
                // 停止動畫 本質是停止定時器
                clearInterval(obj.timer)
            }
            // 把每次加1 這個步長值改為一個慢慢變小的值  步長公式: (目標值 - 現在的位置) / 10 
            obj.style.left = obj.offsetLeft + step + 'px';
        },16.7)
    }