技術標籤：JSjavascript

JS封裝緩動動畫效果函式

JS動畫效果原理:新增一個定時器，每多少毫秒呼叫一次可以使盒子運動一次

 // 封裝緩動動畫函式，兩個引數第一個緩動物件，第二個目標位置
        function animate(object, target) {
            clearInterval(object.time);//清除之前呼叫的定時器
            object.time = setInterval(function () {
                //步長值:(目標位置-現在的位置)/10 
                var
 
 step_value = (target - object.offsetLeft) / 10;
                //JS不解析小數我們讓步長值變成整數
                if (step_value > 0) {
                    Math.ceil(step_value)
                } else {
                    Math.floor(step_value)
                }
                if (object.offsetLeft == target) {
                    clearInterval
 
(object.time)
                }
                //讓移動物件的位置等於現在位置加上步長值
                object.style.left = object.offsetLeft + step_value + 'px';
            }, 20)
        }

然後我們給按鈕繫結個單擊事件看一下效果如何

// 給按鈕繫結事件
        button.addEventListener('click', function () {
            //呼叫動畫函式
            animate(div,
 
 300);
        });
        btn.addEventListener('click', function () {
            animate(div, 100);
        });

可以看到