缓动动画原理

利用定时器；让元素运动快慢发生变化，最常见的就是慢慢慢下来，就是让移动距离逐渐变小，用目标位置，减去现在的位置，由于现在的位置是逐渐增加的，所以相减之后就会逐渐减小；当盒子当前位置等于目标位置的时候，就停下来；

但是实际上达不到莫表位置就停下来了，是因为除法会有小数除不尽的情况，所以需要用到向上取整Math.ceil() 和 向下取整 Math.floor()；正数就是向上取整，负数向下取整：

function animate(obj, target) {
            // 先清除原先的定时器，只保留一个定时器在执行
            clearInterval(obj.timer);
            // 定时器,obj.timer：每个对象传过来，就是每个对象专门的定时器，不会产生歧义 (利用的是 自定义对象的属性)
            obj.timer = setInterval(function () {
                // 步长计算公式：(目标位置 - 现在的位置) / 10; Math.ceil()向上取整，避免达不到目标位置
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step); // Math.ceil()向上取整，Math.floor()向下取整，避免达不到目标位置

                if (obj.offsetLeft == target) {
                    // 停止动画,就是停止定时器
                    clearInterval(obj.timer);
                }
                // 把加一后的位置赋值给这个元素，把 + 1这个步长改为慢慢变小的值
                obj.style.left = obj.offsetLeft + step + 'px'; //offset只能获取，不能赋值;style能赋值
            }, 20) //每隔20ms，左边距离+step
        }