JS封装缓动动画效果函数

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);
        });

可以看到🐟按照我们的意愿进行的移动。