匀速动画函数的封装和缓动动画函数的封装js代码

匀速动画函数的封装：

 function animate(element, target) {
        //把timer当做element的属性
        clearInterval(element.timer);
        element.timer = setInterval(function () {
            var current = element.offsetLeft;
            var step = 10;
            step = current > target ? -step : step;
            current += step;
            if (Math.abs(current - target) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                element.style.left = target + "px";
                clearInterval(element.timer);
            }
        }, 200);
    }

缓动动画函数的封装

 function animate1(element, target) {
        clearInterval(element.timer);
        element.timer = setInterval(function () {
            var current = element.offsetLeft;
            var step = (target-current) / 10;
            //向上取整和向下取整
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            current += step;
            element.style.left = current + "px";
            if (current==target) {
                clearInterval(element.timer);
            }
            //测试代码：
            console.log("当前位子："+current+",目标位子："+target+"步数为："+step);
        }, 200);
    }